本教程展示了如何使用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庫發送和顯示更新消息
下面的屏幕截圖顯示了在瀏覽器運行中的聊天應用程序，每個新加入聊天室的用戶都可以隨意發言。
本節說明如何使用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）保存全部項
1）按下F5，在調試模式下運行該項目，如果一切正常，Html會在瀏覽器中打開并提示一個對話框。
2）輸入用戶名并確定。
3）復制這個瀏覽器中的URL，打開一個新的瀏覽器實例，在另外一個瀏覽器中，輸入一個新用戶名。
4）在每個瀏覽器實例中添加評論并且發送，評論將被發送到所有瀏覽器的頁面中。
注意：這個簡單的聊天室沒有在服務器上維護一個聊天上下文（舊的數據），所有發送的評論將實時廣播給打開了頁面的所有瀏覽器，所以新加入的用戶無法看到以前的歷史記錄。
新聞熱點
疑難解答
