第三章SignalR在線聊天例子
本教程展示了如何使用SignalR2.0構建一個基於瀏覽器的聊天室程序。你將把SignalR庫添加到一個空的Asp.Net Web應用程序中，創建用於發送消息到客戶端的集線器（Hubs）類，創建一個Html頁面讓用戶在該頁面上發送和接收聊天信息。對於如何在MVC5環境中創建這個聊天室程序，請參閱Getting Started with SignalR 2.0 and MVC 5。
SignalR是一個開源的.Net庫，用於構建需要實時用戶交互或實時數據更新的Web應用程序。比如社交網站應用、多用戶在線游戲、商務協作、新聞、天氣、金融或更新應用的程序。以上通常被稱為----實時應用程序。
SignalR簡化構建實時應用程序的過程。它包含一個Asp.net服務器庫和一個JavaScript客戶端庫，使其更容易管理客戶端到服務器端的連接並推送內容到客戶端讓其更新。您可以將SignalR庫添加到現有的Asp.net應用程序已實現實時功能。
本教程將演示SignalR是如何開發的：
1） 添加Signal庫到Asp.net Web 應用程序。
2） 建立一個集線器（Hubs）類來推送更新內容到客戶端。
3） 建立一個.Net開放Web 接口（OWIN）啟動類來配置應用程序
4） 雜網頁中使用SignalR jQuery庫發送和顯示更新消息
下面的屏幕截圖顯示了在瀏覽器運行中的聊天應用程序，每個新加入聊天室的用戶都可以隨意發言。
1.設置項目：
本節說明如何使用VS2013及SignalR2.0庫來創建一個空的Asp.Net Web應用程序，並向其添加SignalR，使它實現實時聊天室的功能。
1） 在VS2013中創建一個新的Web應用程序。
2） 在新的Asp.Net項目窗口中，選擇空項目並且確定創建
3） 在解決方案資源管理器中，右擊項目，選擇添加----新建項，選擇SignalR集線器類（v2），命名為ChatHus.cs並添加，如下圖：
這一步將創建ChatHub類，並將一組SignalR腳本和程序集引用添加到項目中。
注意：您還可以通過NuGet來添加SignalR到項目中，通過打開工具----庫軟件包管理器----包管理器控制台，並運行一個明命令：install – package Microsoft.AspNet.SignalR
如果您使用包管理器控制台來添加SignalR，請在添加后再執行創建ChatHub類這一步。
4） 在解決方案資源管理器中，展開腳本文件夾，可以看到項目已經添加jQuery已經SignalR的JS引用。
5）編輯你的ChatHub文件，刪除Hello方法並且添加Send方法，如下面代碼：
| using System; using System.Web; using Microsoft.AspNet.SignalR;
namespace SignalRChat { public class ChatHub : Hub { public void Send(string name, string message) { // Call the broadcastMessage method to update clients. Clients.All.broadcastMessage(name, message); } } } |
6）在解決方案資源管理器中，右擊項目，然后添加----新建項----OWIN啟動類，將類命名為Startup並添加。
7）在啟動類的配置方法中添加SignalR的映射，如下面的代碼：
| using Microsoft.Owin; using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat { public class Startup { public void Configuration(IAppBuilder app) { // 有關如何配置應用程序的詳細信息， // 請訪問http://go.microsoft.com/fwlink/?LinkID=316888 app.MapSignalR(); } } } |
8）在解決方案資源管理器中，右鍵單擊該項目，然后點擊添加----新建項----HTML頁面，命名為index.html並添加。
9）用下面的代碼替換掉Html的：
| <!DOCTYPE html> <html> <head> <title>SignalR Simple Chat</title> <style type="text/css"> |
| .container { background-color: #99CCFF; border: thick solid #808080; padding: 20px; margin: 20px; } </style> </head> <body> <div class="container"> <input type="text" id="message" /> <input type="button" id="sendmessage" value="Send" /> <input type="hidden" id="displayname" /> <ul id="discussion"> </ul> </div> <!--Script references. --> <!--Reference the jQuery library. --> <script src="Scripts/jquery-1.6.4.min.js" ></script> <!--Reference the SignalR library. --> <script src="Scripts/jquery.signalR-2.0.2.min.js"></script> <!--Reference the autogenerated SignalR hub script. --> <script src="signalr/hubs"></script> <!--Add script to update the page and send messages.--> <script type="text/javascript"> $(function () { // Declare a proxy to reference the hub. var chat = $.connection.chatHub; // Create a function that the hub can call to broadcast messages. 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>: ' + encodedMsg + '</li>'); }; // Get the user name and store it to prepend to messages. $('#displayname').val(prompt('Enter your name:', '')); // Set initial focus to message input box. $('#message').focus(); // Start the connection. $.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(); }); }); }); </script> </body> </html> |
注意：如果你使用包管理器來安裝了SignalR，請核對腳本目錄中的SignalR腳本文件名與上面Html代碼中所引用的是否一致，如下圖：
11）保存全部項
2.運行示例：
1）按下F5，在調試模式下運行該項目，如果一切正常，Html會在瀏覽器中打開並提示一個對話框。
2）輸入用戶名並確定。
3）復制這個瀏覽器中的URL，打開一個新的瀏覽器實例，在另外一個瀏覽器中，輸入一個新用戶名。
4）在每個瀏覽器實例中添加評論並且發送，評論將被發送到所有瀏覽器的頁面中。
注意：這個簡單的聊天室沒有在服務器上維護一個聊天上下文（舊的數據），所有發送的評論將實時廣播給打開了頁面的所有瀏覽器，所以新加入的用戶無法看到以前的歷史記錄。
5）在解決方案資源管理器中，檢查正在運行的應用程序的腳本文件，您可以看到SignalR庫動態生成Hub腳本文件，該文件管理jQuery腳本和服務器代碼之間的通訊。
3.回顧：
SignalR聊天室程序演示了兩個最基本的Signal開發任務：
A：在服務器端創建一個集線器作為主要協調對象；
B：使用SignalR和jQuery來發送和接受評論；
1）SignalR集線器（Hub）：
在代碼示例中的ChatHub類派生自Microsoft.AspNet.SignalR.Hub類。是最通常的建立SignalR應用程序的方法------從Hub類派生。你可以創建你的集線器類的公共方法，然后從網頁中的腳本調用他們來訪問這些方法。
在本示例中，客戶端調用ChatHub.Send來發送新評論。反之，集線器通過調用Clients.All.broadcastMessage來將新評論發送至所有客戶端。
Send方法演示了使用集線器的概念：
a) 在集線器上建立公共方法，使客戶端可以調用它們。
b) 使用Microsoft.AspNet.SignalR.Hub.Clients動態屬性訪問連接到該集線器的所有客戶 端。
c) 調用客戶端方法（比如：broadcastMessage函數）來更新客戶端。
2）SignalR和jQuery
Html頁面暫時了如何使用SignalR和jQuery庫與SignalR集線器通訊，即定義了一個代理引用集線器，聲明一個函數可以讓服務器推送內容到客戶端，並且可以實時連接，已發送消息到集線器上。
下面的代碼定義了一個集線器代理的引用：
| var chat = $.connection.chatHub; |
注意：在JS中，引用服務器類以及成員，應當使用駝峰（camel）式拼寫。該代碼實例使用chatHub引用了服務器端的ChatHub類。
下面代碼演示了如何創建一個回調函數，服務器上的集線器類調用這個函數來推送內容，並且更新到每個客戶端。前兩行代碼表示將輸入的內容進行Html編碼，作為一個簡單的防止腳本注入的方法：
| 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>: ' + encodedMsg + '</li>'); }; |
下面的代碼顯示了如何打開與集線器的連接。該代碼啟動連接，然后傳遞一個函數來處理Html頁面上發送按鈕的點擊事件。
| $.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在事件句柄處理之前就建立好通訊連接.
4.下一步
您已經了解到SignalR框架是如何構建起一個實時Web應用程序的，您還了解並演練了幾個開發任務：添加SignalR庫到Web應用程序中，創建一個集線器類及如何從集線器發送、接收消息。要了解更多，請參閱以下連接：