前言
一早起牀後，在消化 RSS 的過程中，看到 Scott Hanselman 在 Russia TechDays 介紹 SignalR 的影片，一整個讓人很驚豔，馬上就想動手寫寫看。 javascript
由於我也是初學者，先把相關 Reference 列上來，有興趣的朋友能夠直接參考官網或影片，應該會比個人文章清楚的多。 html
Reference : java
簡介
SignalR 的重點，就在於即時 (realtime) ，以往在設計網站的時候，基本上都是透過 client 頁面從新整理頁面、重送 request 或定時輪詢 server 端，以從新呈現即時的資料。但那根本不是即時，即時應該是 server 端一旦有了最新的資料，會主動通知 client 端更新資料的呈現。 jquery
但這樣的機制，每每得透過不少機制，不少複雜的設計，纔有可能達成。 git
SignalR 則像撰寫 .NET Remoting 通常 github
- 在 server 端定義對應的 hub class。
- 在 client 定義 hub class 所對應的 proxy。
- 在 client 與 server間，創建一個不斷的connection。
- 接著 client 端能夠呼叫 proxy object 的方法，也就是 server 端的方法，也就是送 request 給 server 端。
- server 端接收到 request 資料後，能夠針對全部的 client 發送通知。
若是各位去下載 SignalR.Sample ，其例子就是股票的即時資訊，股票的資訊沒法子透過定時從新整理，那可能會虧死。若是每一秒都跟 server 送 request，那 server 必定會 loading 過重而炸掉。透過 SignalR，這再也不是無解的問題。 app
有興趣的朋友，能夠直接在 NuGet 的 Package Manager Console，輸入 ide
install-package SignalR.Sample spa
即時聊天室範例
這邊跟著說明文件，來創建一個可即時對全部 client 送出，某人送出最新的訊息。 server
- 創建一個 ASP.NET 4.0 的 WebApplication or WebSite，官網上是使用 Web Application，我這邊則使用 WebSite 來示範。
- 在 NuGet 的Package Manager Console，輸入「install-package SignalR」，相關的參考檔案，以下圖所示：
- 創建一個範例網頁： SignalR_Sample.aspx，供使用者能夠透過網頁發送與接收聊天室訊息。
- 創建一個 Chat class，用來處理 client 發送的訊息，以及發送通知給全部 client 的處理。
接下來，來看網頁與 server 端的 hub 該怎麼設計。
實做
首先，設計一個最簡單的發送與接收訊息的畫面，程式碼以下：
| 02 |
<input type="text" id="message" /> |
| 03 |
<input type="button" id="send" value="送出" /> |
| 07 |
<ul id="wholeMessages"> |
畫面：
接下來撰寫 server 端 Chat class 的內容：
幾個重點：
- HubName：這個 atttibute 表明 client 端要如何創建對應 server 端物件的 proxy object。透過 HubName ， server 端的 class name纔不會被 client 綁死。若是沒有設定，則會以 server 端 class name 為 HubName 預設值。
- 繼承 Hub：繼承 Hub 之後，不少對應的設計就都不用寫了，我們只須要把注意力放在 client 如何送 request 給 server的 hub ， server 如何通知 client 便可。 Hub 上有一些屬性可使用，請參考下圖：
- public void SendMessage(string message) ，就像 WebService Method 或 PageMethod 通常， client 端透過 proxy object ，能夠直接呼叫 server 端這個方法。後續會介紹到如何在頁面上使用。
- Clients property：表明全部有使用 Chat 的頁面。而 Clients 的型別是 dynamic ，因為要直接對應到 JavaScript 的物件。
- Clients.addMessage(message)：表明 server 端呼叫 Clients 上的 addMessage 方法，也就是 JavaScript 的方法。
- 總結： Chat 物件負責的，就是當 client 端呼叫 SendMessage() 方法後，要把這個 message ，送給全部 client 頁面上呈現。以達到聊天室的功能。
Server 端的 Hub 物件設計好後，接著來看頁面上如何與 server 的 hub 物件互動。
頁面：
| 01 |
<script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script> |
| 02 |
<script src="Scripts/jquery.signalR-0.5.2.js" type="text/javascript"></script> |
| 03 |
<%--很重要的一個參考，必定要加，且在這一行以前，必定要先參考jQuery.js與signalR.js--%> |
| 04 |
<script src="../SignalR_WebSite/signalr/hubs" type="text/javascript"></script> |
| 05 |
<script type="text/javascript"> |
| 08 |
// 創建對應server端Hub class的物件，請注意joeyChat的第一個字母要改爲小寫 |
| 09 |
var chat = $.connection.joeyChat; |
| 11 |
// 定義client端的javascript function，供server端hub，透過dynamic的方式，呼叫全部Clients的javascript function |
| 12 |
chat.addMessage = function (message) { |
| 13 |
//當server端調用addMessage時，將server push的message資料，呈現在wholeMessage中 |
| 14 |
$('#wholeMessages').append('<li>' + message + '</li>'); |
| 17 |
$("#send").click(function () { |
| 18 |
//呼叫server端的Hub物件，將#message資料傳給server |
| 19 |
chat.sendMessage($('#message').val()); |
| 20 |
$('#message').val(""); |
| 24 |
$.connection.hub.start(); |
- 先引用 jQuery 與 signalR 的 js 檔。
- 很重要的一個步驟：加入一個 js 參考，其路徑為「根目錄/signalr/hubs」。 SignalR 會創建相關的 JavaScript，放置於此。
- 透過 $.connection.『server 端的 HubName』，便可創建對應該 hub 的 proxy object。要注意，首字母需小寫。
- 定義 client 端上，供 server 端通知的 JavaScript function，這邊的範例是 addMessage。
- 當按下送出按鈕時，呼叫 server 端的 SendMessage() 方法，只須要直接透過 proxy object 便可。要注意，首字母需小寫。
- 記得透過 $.connection.hub.start() ，把 connection 打開。
畫面
我們透過多個 browser 頁面，來模擬是否全部 client 都會收到同步的訊息。
接著在某一頁上輸入 hello world，按下送出的同時，全部頁面都會即時更新訊息。
結論
- 安裝相當簡單
- 使用相當簡單
- 應用面相當廣泛
其實我也只是初學者，但實在覺得這樣的東西實在把底層複雜的機制包裝的太美好了，忍不住趕緊跟你們介紹這個好物，相信很快就能夠看到不一樣的應用或更深刻的介紹了。
Sample
download : SignalR_WebSite.zip
