英文渣水平，大伙湊合着看吧……
這是微軟官方SignalR 2.0教程Getting Started with ASP.NET SignalR 2.0系列的翻譯，這里是第四篇：開始使用SignalR 2.0
原文：Getting Started with SignalR 2.0
PS.前面的那篇從SignalR1.0升級為2.0跳過了……只有幾步，有興趣的同學可以自己去看。
概述
本教程展示了如何使用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開發任務：
- 添加SignalR庫到ASP.NET Web應用程序
- 建立一個集線器類來推送更新內容到客戶端
- 建立一個.Net開放Web接口(OWIN)啟動類來配置應用程序
- 在網頁中使用SignalR jQuery庫發送和顯示更新消息
下面的屏幕截圖顯示了在瀏覽器中運行的聊天應用程序，每個新加入聊天室的用戶都可以隨意發言。
設置項目
本節說明如何使用VS2013及SignalR 2.0庫來創建一個空的ASP.NET WEB引用程序並向其中添加SignalR，以創建聊天室。
1.在VS2013中創建一個新的WEB應用程序。
2.在新的ASP.NET項目窗口中，選擇空項目並確定創建。
3.在解決方案資源管理器中，右擊該項目，選擇添加—新建項，選擇SignalR集線器類(v2)，命名為ChatHub.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.保存全部項。
運行示例
1.按下F5在調試模式下運行該項目，如果一切正常，HTML會在瀏覽器中打開並提示一個對話框。
2.輸入用戶名並確定。
3.復制這個瀏覽器中的URL，打開一個新的瀏覽器實例，在另一個瀏覽器中，輸入一個新用戶名。
4.在每個瀏覽器實例中添加評論並發送，評論將被發送到所有瀏覽器的頁面中。
注意：這個簡單的聊天室沒有在服務器上維護一個聊天上下文，所有發送的評論將實時廣播給打開了頁面的所有瀏覽器，所以新加入的用戶無法看到以前的歷史記錄。
5.在解決方案資源管理器中，檢查正在運行的應用程序的腳本文件，你可以看到SignalR庫動態生成的Hub腳本文件，該文件管理jQuery腳本和服務器代碼之間的通訊。
回顧
SignalR聊天室程序演示了兩個基本的SignalR開發任務：在服務器端創建一個集線器作為主要協調對象，並使用SignalR和jQuery來發送和接收評論。
SignalR集線器(Hub)
在代碼示例中的ChatHub類派生自Microsoft.AspNet.SignalR.Hub類。是最通常的建立SignalR應用程序的方法就是從Hub類派生。 你可以創建你的集線器類的公共方法，然后從網頁中的腳本調用它們來訪問這些方法。
這本示例中，客戶端調用ChatHub.Send來發送新評論。反之，集線器通過調用Clients.All.broadcastMessage來將新評論發送至所有客戶端。
Send方法演示了使用集線器的概念：
- 在集線器上建立公共方法，使客戶端可以調用它們。
- 使用使用Microsoft.AspNet.SignalR.Hub.Clients動態屬性訪問連接到該集線器的所有客戶端。
- 調用客戶端方法（比如broadcastMessage函數）來更新客戶端。
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在事件句柄處理之前就建立好通訊連接。
下一步
您已經了解到SignalR框架是如何構建起一個實時Web應用程序的，您還了解並演練了幾個開發任務：添加SignalR庫到Web應用程序中，創建一個集線器類及如何從集線器發送、接收消息。
要了解更多，請參閱以下連接：
作者：帕特里克·弗萊徹 -帕特里克·弗萊徹是ASP.NET開發團隊的程序員，作家，目前正在SignalR項目工作。