【轉】SignalR新手系列教程詳解（六）- ASP.NET 應用整合 SignalR 瀏覽器聊天室示例
在上一篇教程我們講解了SignalR 平臺配置要求，下面根據一步步詳細示例搭建一個 SignalR 的示例專案，以此瞭解 SignalR 到底是一個什麼樣的效果。
SignalR 示例所使用的軟體版本
- Visual Studio 2013，當然更高的版本也是支援的。
- .NET 4.5及其以上
- SignalR version 2
使用 VS2012 整合SignalR步驟
如果你是使用VS2012，那麼你可以按照下面的步驟操作：
- 在 Web Platform Installer 中搜索安裝ASP.NET and Web Tools 2013.1 for Visual Studio 2012。這樣就會安裝VS支援SignalR 類的元件，比如“Hub”。
- 儘管如此，但是有些模板（比如：OWIN Startup 類）還是不會安裝，所以你需要自己手動建類。
SignalR 版本
如果你想知道更多關於 SignalR 更早的版本，你可以檢視 SignalR 早期版本。
SignalR 示例概述
這篇教程會引導你建立一個瀏覽器版本的聊天室應用；你需要新增 SignalR 類庫到一個空的 ASP.NET web 應用，然後建立一個 Hub 類從伺服器端傳送訊息到客戶端；最後你需要建立一個 HTML 頁面，以便可以讓使用者傳送和收取訊息。類似的教程還有使用 MVC 5 整合 SignalR，你可以參考
SignalR 是一個開源的 .NET 類庫，用它可以建立線上使用者的實時互動程式。比如：社交應用、多人線上遊戲、商業合作、新聞、金融等實時應用。
SignalR 使得建立實時應用非常的方便。建立一個 SignalR 的實時應用，需要一個服務端的類庫和一個客戶端的JavaScript 類庫，有了這兩個東西就能夠非常方便的管理服務端與客戶端的連線，從而達到實時推送內容到客戶端。所有你可以非常方便的引入 SignalR 的類庫到一個現有的 ASP.NET 應用程式中，使其具備實時互動的功能。
下面我們具體示範 ASP.NET 應用整合 SignalR 的步驟：
- 引入 SignalR 類庫到ASP.NET 應用程式中。
- 建立一個 Hub 類用以伺服器推送訊息到客戶端。
- 建立一個 OWIN startup 類來配置應用程式；如果程式中有了Startup.cs檔案就不用再建立了。
- 使用 SignalR jQuery 的類庫在前端頁面傳送訊息到Hub，然後其他客戶端顯示傳送的訊息。
下面的截圖就是瀏覽器執行程式的樣子，任何客戶端訪問頁面，輸入任何訊息都會在其他客戶端顯示出來。
建立 SignalR 專案示例
下面的模組展示了怎樣使用Visual Studio 2013 建立一個使用SignalR 2 帶有聊天功能的應用。
建立前準備：
- Visual Studio 2013，或者更高版本。
下面使用Visual Studio 2013 一步步跟著示例建立一個空的 Web 應用，並且整合 SignalR2。
-
開啟VS，建立一個 ASP.NET Web Application。
-
在New ASP.NET Project 視窗，選擇Empty ，然後點選Ok。
-
在Solution Explorer中，右擊“Project”，然後選擇Add | SignalR Hub Class (v2)。將類命名為ChatHub.cs，並確定。
- 在Solution Explorer中，展開 Scripts 節點，你可以看到 SignalR 相關 jQuery。
-
將ChatHub類的程式碼替換如下：
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); } } } - 在Solution Explorer中，右擊Add | OWIN Startup Class，命名為Startup，然後點選Ok。
-
修改Startup類的程式碼如下：
using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRChat.Startup))] namespace SignalRChat { public class Startup { public void Configuration(IAppBuilder app) { // Any connection or hub wire up and configuration should go here app.MapSignalR(); } } } - 在Solution Explorer中，右擊Add | HTML Page，命名為index.html。
- 右鍵，將index.html頁面設定為啟動頁。
-
將將index.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-3.1.1.min.js" ></script> <!--Reference the SignalR library. --> <script src="Scripts/jquery.signalR-2.2.1.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 示例
-
按F5 Debug 模式執行專案，然後啟動瀏覽器執行你可以看到下面的例子：
- 隨便輸入一個名字。
- 然後複製URL，多開幾個瀏覽器視窗訪問，每個都輸入不同的名字。
-
在每個頁面都隨便輸入一句話，然後點擊發送，然後輸入的內容立即會在其他瀏覽器頁面顯示。
下面的截圖顯示了執行的結果：
-
在Solution Explorer中，檢查Script Documents節點，發現會有一個hubs的類庫在執行時動態生成。這個檔案就是管理管理客戶端jQuery 指令碼和伺服器端程式碼關鍵。
以上就是建立一個SignalR 應用的全部示例教程，在下一講我們將會針對示例進行程式碼分析，解釋為什麼需要這麼寫程式碼。最後附上 完整程式碼下載地址。