SignalR 瀏覽器聊天室示例程式碼分析

在上一篇教程中的程式碼我們主要實現SignalR開發中的兩個基本任務：建立服務端的 hub 類作為伺服器的協調，然後就是使用 SignalR jQuery 庫來收發資訊。

SignalR Hubs

在前面的示例的ChatHub類繼承自Microsoft.AspNet.SignalR.Hub，一般建立一個 SignalR 應用都會繼承 Hub 類， 然後你可以在你的Hub類上建立公用的方法，供前端的 SignalR jQuery 來呼叫。

在示例中客戶端使用 ChatHub.Send 方法傳送一條新訊息，然後hub通過Clients.All.broadcastMessage

Send這個方法展示了 hub 的幾個概念：

• 在 hub 類上定義的公共方法，客戶端是可以呼叫的。
• 使用Microsoft.AspNet.SignalR.Hub.Clients的動態特性是可以連線所有的客戶端到 hub。

• 在客戶端呼叫方法（比如broadcastMessage）是能夠觸發更新其他客戶端的

  public class ChatHub : Hub
  {
      public void Send(string name, string message)
      {
      // Call the broadcastMessage method to update clients.
      Clients.All.broadcastMessage(name, message);
      }
  }

SignalR 和 jQuery

在HTML示例程式碼中展示了怎樣使用SignalR jQuery 類庫去連線 SignalR  Hub。示例程式碼所起的作用就是宣告一個 hub 代理的引用，宣告一個方法能夠讓服務端傳送訊息到客戶端，並且建立一個連線能夠傳送訊息到 hub。

下面的程式碼就是宣告一個到hub 代理的引用。

    var chat = $.connection.chatHub;

需要注意的是，預設情況下，JavaScript對伺服器類的引用是其類名的駝峰格式。比如示例中的c#類名是ChatHub，在JavaScript中就是chatHub。

下面的程式碼顯示的就是在指令碼建立的一個回撥方法。在伺服器的 hub 類可以呼叫這個方法去推送訊息到每一個客戶端。

chat.client.broadcastMessage = function (name, message) {
        // Html encode display name and message. 
        var encodedName = $('<div />').text(name).html();
        var encodedMsg = $('<div />').text(message).html();
        // Add the message to the page. 
        $('#discussion').append('<li><strong>' + encodedName
            + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    };

下面的程式碼展示了怎樣開啟一個到 hub 的會話。當在 HTML 頁面點選 Send 按鈕的時候就會去建立一個到伺服器端的會話連線。

$.connection.hub.start().done(function () {
        $('#sendmessage').click(function () {            // Call the Send method on the hub. 
            chat.server.send($('#displayname').val(), $('#message').val());            // Clear text box and reset focus for next comment. 
            $('#message').val('').focus();
        });
    });

總結

通過前面的例子講解，你已經明白 SignalR 就是一個建立實時應用的框架。你應該明白建立 SignalR 應用的主要開發工作就是：怎樣整合 SignalR 到現有的應用中；怎樣建立 hub 類；怎樣在 hub 上去傳送和接收訊息。