在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的生涯夠長,會發現所有的開發技術,終將都會改變、只要你能活得夠久,終將目睹某個開發技術的興起與消逝。

留言

這個網誌中的熱門文章

使用 Airtable 在小型需求上取代傳統資料庫

使用Semantic Kernel 建立自然語言請假系統

精彩(且驚人)的Semantic Kernel入門範例

在 LINE Bot 開發中使用Semantic Kernel建立自然語言請假系統

專業的價值...