2013年12月29日 星期日

在Windows Phone (WP8) 中使用SignalR

ASP.NET SignalR【幾乎】讓我想丟掉Push Notification,你就知道它把訊息傳遞這件事情弄得有多簡單方便了。在這一篇我說明一下如何在WP8中使用ASP.NET SignalR,同時也稍微解釋一下這兩天寫的Code。

請回憶一下我們昨天的情境:


我們在伺服器端透過ASP.NET以SignalR寫了一組服務,主要是用來做聊天室(基本上是範例啦)的功能,包含了接收用戶端傳來的訊息(姓名、聊天文字),以及把訊息主動推送給用戶端(姓名、聊天文字),這樣的功能。

而用戶端就很單純的呼叫或傾聽這個服務。呼叫Send方法可以把用戶端使用者想要說的訊息傳給伺服器端,而伺服器端收到,則執行broadcastMessage這個動態方法,把訊息推送給所有傾聽的用戶端。

透過ASP.NET SignalR要寫這個服務端的機制,很簡單。

首先,建立一個Empty WebForm專案(當然你用MVC也行,之所以用WebForm,原因在這裡),接著透過NuGet引用ASP.NET SignalR:


然後在專案中Add New Item,請找到Hub Class(VS2012 Update 4或VS2013):

建立出來的Class如下:
    public class MyHub1 : Hub
    {
        public void Hello()
        {
            Clients.All.hello();
        }
    }

該類別繼承自Hub,這個Hub就是SignalR服務的Bass Class,你可以在其中建立自己的Method,如上圖中的Hello。

我們修改此類別,建立一個聊天室中,接收用戶端傳來訊息的Method,名稱為Send, 其程式碼如下:
    
  public class MyHub1 : Hub //SignalR主要部分
    {
        public void Send(string name, string message)    //接收傳送來的訊息
         {
            //傳送訊息到用戶端            
            Clients.All.broadcastMessage(name, message);  //廣播訊息 (這邊用到了動態方法)
        }
    }

注意上面的Method Send,是用來讓Client端(WPF or WP8)呼叫的,用來把用戶端輸入的聊天訊息傳送到伺服器端,所以有兩個參數 name 和 message。而broadcastMessage也是我們自己定義的Method,用來把訊息傳遞到用戶端。

不過,很有趣的是,這邊用到了Dynamic Method的概念,這個部分我們過去不常談論,但這機制讓我們可以在程式碼中動態的建立類別的方法和屬性。例如上面這個broadcastMessage,本來Clients.All.底下根本沒這個Method,這是我們自己在Visual Studio寫程式時候直接加進去的,參數也是我們當下自己決定的。也因此,這部分Visual Studio是無法幫我們檢查是否有拼字或語法錯誤,你得要自己留意。

透過Clients.All.類別,可以讓我們把特定的資訊推送給用戶端(只要用戶端有設定好connection並傾聽),所以你看到上面的程式碼,我們在收到某一個用戶端透過呼叫Send方法所傳來的訊息之後,就透過Clients.All.broadcastMessage(用戶名 , 聊天訊息)把該訊息傳給所有用戶端。

這樣,只要任何一個用戶端(WPF or WP8 or Windows Form or ...)把聊天訊息傳到到伺服器端,透過伺服器端的broadcastMessage方法,所有傾聽的用戶端就會收到聊天訊息囉:


伺服器端程式碼的撰寫就是那麼簡單,不過別忘了ASP.NET SignalR必須註冊在Web.Config中,所以你必須撰寫一個Configuration方法:
[assembly: OwinStartup(typeof(WebApplication5.Startup1))]
namespace WebApplication5
{
    public class Startup1 //必須在web.config中註冊
    {
        public void Configuration(IAppBuilder app)
        {
            // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888
            app.MapSignalR();
        }
    }
}

然後得在Web.Config中註冊:
  
    
    
  

這樣該Hub才會運行起來。

以上是伺服器端的部分,那用戶端呢? 我們來看看WP8的用戶端App。坦白說,用戶端可就真的很簡單了,如同前面說的,簡單到我【幾乎】(但其實並沒有)想把Push Notification給丟了。

用戶端(不管是WP8 or WPF  or Windows Form or ...),只需要透過NuGet引用SignalR .NET Client即可:

接著,就可以直接使用伺服器端寫好的服務囉。若想要傳送訊息到伺服器端,程式碼大致如下:
        private void ApplicationBarIconButton_Click(object sender, EventArgs e)
        {
            //從Client端送訊息
            proxy.Invoke("Send", TxbName.Text, TxbMessage.Text);
        }

基本上就是呼叫我們伺服器端寫的Send方法。而其中的Proxy哪來的? 請看底下程式碼:

        HubConnection connection;
        IHubProxy proxy;

        // Constructor
        public MainPage()
        {
            InitializeComponent();

            Loaded += MainPage_Loaded;
            // Sample code to localize the ApplicationBar
            //BuildLocalizedApplicationBar();
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            //建立connection, proxy
            connection = new HubConnection("http://signalrtestsite.azurewebsites.net"); //測試位置,請自行建立
            proxy = connection.CreateHubProxy("MyHub1");
            connection.Start();
            //listen broadcastMessage
            proxy.On<string , string>(
               "broadcastMessage", (name, msg) =>
                {
                    //非同步(在非UI執行序中)顯示訊息
                    this.Dispatcher.BeginInvoke(
                         () => { lblShow.Text = "" + name + ":" + msg + "\n" + lblShow.Text; });
                }
            );
        }

我們在Loaded事件中,透過HubConnection來建立伺服器端的連線,跟以前使用Web/WCF Services差不多,請留意CreateHubProxy中的MyHub1,就是先前我們在伺服器端建立的Hub Class Name,在Proxy.On這邊,做了一個註冊傾聽的動作,一旦服務器端有呼叫broadcastMessage把訊息往用戶端傳,我們的WP8 App就會收到,並且執行25,26行中的程式碼。(注意這邊用到了匿名方法、以及非UI執行續的Dispatcher,因為該行為是非同步的)

另外,我特別用asp.net寫一個webform的網頁,示範由伺服器端主動送訊息給用戶端:

其程式碼如下:
        protected void Button1_Click(object sender, EventArgs e)
        {
            //透過GlobalHost使用hub instanc
            var context = GlobalHost.ConnectionManager.GetHubContext();
            //由伺服器端主動發訊息
            context.Clients.All.broadcastMessage("admin", TextBox1.Text + " " + System.DateTime.Now.ToString());
        }


這說明了即便不是從用戶端觸發,伺服器端也可以輕鬆的主動傳送訊息給正在傾聽的用戶端。

就這樣,程式寫完了,範例在這裡

========================================================================
後記:

SignalR 用了OWIN這個 .net 的輕量級小組件,拋棄了龐大的.NET Framework,這其實是很有趣的事情,他再一次的說明了資訊界~天下合久必分分久必合~的道理,以前大家想要一組完整的framework(Java or .NET),覺得寫程式拼拼裝裝的很辛苦。現在又覺得framework太大了,而且有相依性的問題,所以又想要自由一點,自己兜出想要的解決方案。

為何會有這樣的改變呢? 過去不可行的,為何現在可行了??? 我想開發工具越來越便利是其中之一的原因,以前(1999年之前)開發人員在沒有framework的情況下,想要蒐集需要的套件很累,現在有Google、有stackoverflow、有NuGet...事情變簡單了,大家就想要提高自由度了,相形之下,一整套Framework似乎就太龐大了。

前端開發技術也是,以前大家想要total solutions,現在JavaScript Framework喜歡自己兜,服務端開發技術也是,以前想要制定一整套的服務描述和查找方法,所以有Web Services和WSDL,現在大家把這些丟了,然後重來一次,就有了RESTful、Web API、JSON、和SignalR這類的技術整合和應用...

天下合久必分、分久必合,所以我開始收斂地不太敢再說趨勢和所謂的主流,因為....你只要Coding的生涯夠長,會發現所有的開發技術,終將都會改變、只要你能活得夠久,終將目睹某個開發技術的興起與消逝。

2013年12月28日 星期六

在WPF中使用SignalR


假日,在等著接送家人的時間空檔,順便寫了一個最近工作上會用到的範例,不知是Windows Client端的技術用的人越來越少還是如何? WPF的使用情境似乎沒啥網友討論,所以範例寫完之後順便放上GitHub,如果有需要的朋友們可以參考。
 
大概的需求如下圖,基本上非常簡單,用WPF與WP8作為用戶端(WP8的範例我晚一點寫),存取以asp.net SignalR所寫的服務,底下先寫WPF的部份:
 

 
會寫這個,主要的原因是,我們公司有不少先前已經搭建好的ASP.NET WebSite(Web Services),這些個WebSite是以WebForm的方式開發的,而用戶端不僅僅只有browser,還有不少WPF/Windows應用程式。所以雖然打算用SignalR做訊息傳遞,但又不是現在大家比較常見的ASP.NET MVC Site(不過說真的, 其實MVC或WebForm根本沒差)。再加上Client端(consumer)又不是Web,而是WPF(和WP8),所以稍微寫個簡單例子整理一下,好讓公司的開發人員可以接手去做後續的部分。
 
先把寫好的範例放在這裡,有需要的朋友可以參考。
 
背後的需求很常見,過去我們有很多以WPF或是XAML(不管是Silverlight/WP8/Windows 8 App...etc)開發的Application,在沒有導入SignalR之前,如果需要知道伺服器端的狀態或訊息,要嘛就是走web services polling、要麼就是走socket,不然就是用push notification(但只有Windows Phone/Windows 8 App才能享用)。因此,傳統的Windows/WPF應用程式(不知道現在還有多少人在寫?),要透過http方式來接收伺服器端主動推送過來的訊息不是非常容易。(搞polling的效能當然是差到不行,又得自己做些手腳提高效能,挺費力)
 
但SingalR讓開發人員現在不用大腦就可以很輕鬆地解決這個問題。
 
所以我們打算在Windows/WPF/Silverlight應用程式當中快速地加入一些由伺服器端推送訊息到用戶端的功能,因此有了SignalR+WPF的這種需求,也因此有了這個範例。
 
範例中,是一個很簡單的聊天室,然後透過一個(其實你可以Run兩個instance比較好玩)WPF Client,搭配SingalR開發的Services,達成伺服器端與用戶端溝通的效果。
 
除此之外,特別用.aspx做了一個在WebForm中透過GlobalHost來主動傳送訊息到WPF Client端的例子,好讓我們的伺服器端可以主動推送訊息到用戶端。
 
時間的空檔到了,過一兩天有空我會再稍微仔細談談這個範例程式碼的部份。順便,下一個例子就是寫個WP8的用戶端了(我明後天補上)...
 
==========================================================
後記:開發技術的進步,讓原本需要耗費不少時間的功能,現在可以用等人的空檔花一兩個小時就完成 ~ 這很有趣,但也有些令人感慨(因為剛好前幾天聖誕夜分享中,又再次有學員問到,軟體開發技術的改變迅速,是否還值得再多花時間投入云云~ )。


2013年12月6日 星期五

China TechED 2013 北京、上海,順利完成

早上,順利完成了China TechED在北京與上海的場次,本來昨天測試的HDMI投影整片花花的狀況幸好沒再發生。由於China場次只有60min,原先在台北講了近兩個多小時的架構設計,只能挑著重點講,很拚。

不過至少沒有發生嚴重超時的問題,感謝上海與北京的朋友們熱情捧場,在早上第一個場次的時段,依舊給予相當熱情的支持。

課堂中的案例檔案可由此處下載:
http://arock.blob.core.windows.net/blogdata201312/Examples.zip

相關的範例與影片可以參考底下連結:
http://studyhost.blogspot.com/search/label/Enterprise%20Library

後續我會陸續把每一個範例以及China場次的內容更完整的整理後,再在這邊跟大家分享。