在本教程中使用的軟件版本
- Visual Studio 2015
- .NET 4.5
- SignalR 版本 2
概述
本教程介紹了通過演示如何生成簡單的基於瀏覽器的聊天應用程序的 SignalR 開發。 將 SignalR 庫添加到空的 ASP.NET web 應用程序，創建一個中心類，用於將消息發送到客戶端，並創建使用戶能夠發送和接收聊天消息的 HTML 頁。 有關演示如何在 MVC 5 中創建的聊天應用程序使用 MVC 視圖的類似教程，請參閱SignalR 2 和 MVC 5 入門。
SignalR 是構建 web 應用程序的需要實時用戶交互或實時數據更新的開放源.NET 庫。 示例包括社交應用程序、 多用戶游戲、 業務協作和新聞、 天氣或財務更新應用程序。 這些測試通常稱為實時應用程序。
SignalR 簡化了構建實時應用程序的過程。 它包括 ASP.NET 服務器庫和 JavaScript 客戶端庫來輕松地管理客戶端-服務器連接，並將內容更新推送到客戶端。 您可以將 SignalR 庫添加到現有 ASP.NET 應用程序以獲取實時功能。
本教程演示以下的 SignalR 開發任務：
- SignalR 庫添加到 ASP.NET web 應用程序。
- 創建用於將內容推送到客戶端的中心類。
- 創建配置應用程序的 OWIN 啟動類。
- 使用 SignalR jQuery 庫在網頁上發送消息並顯示從中心的更新。
以下屏幕截圖顯示在瀏覽器中運行的聊天應用程序。 每個新用戶可以發表評論，並查看用戶加入聊天后已添加注釋。
聊天實例
設置項目
本部分演示如何使用 Visual Studio 2013 和 SignalR 版本 2 創建空的 ASP.NET web 應用程序，將 SignalR 中，並創建聊天應用程序。
先決條件：
- Visual Studio 2013+
以下步驟使用 Visual Studio 2015 創建 ASP.NET 空 Web 應用程序並添加 SignalR 庫：
- 在 Visual Studio 中創建 ASP.NET Web 應用程序。
-
在中新建 ASP.NET 項目窗口中，保留空選中然后單擊創建項目。
-
在中解決方案資源管理器，右鍵單擊項目，選擇添加 |SignalR Hub 類 (v2)。 將類命名ChatHub.cs並將其添加到項目。 此步驟將創建ChatHub類，並將一組腳本文件和支持 SignalR 的程序集引用添加到項目。
您還可以將 SignalR 通過打開添加到項目工具 > NuGet 包管理器 > 程序包管理器控制台並運行命令：
install-package Microsoft.AspNet.SignalR
如果使用控制台來添加 SignalR，SignalR hub 類作為單獨的步驟后創建將 SignalR 添加。
如果使用 Visual Studio 2012 中， SignalR Hub 類 (v2) 模板將不可用。 您可以添加純類調用ChatHub相反。
在中解決方案資源管理器，展開腳本節點。 適用於 jQuery 和 SignalR 的腳本庫將顯示在該項目。
在新的代碼替換為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); } } }
- 在中解決方案資源管理器，展開腳本節點。 適用於 jQuery 和 SignalR 的腳本庫將顯示在該項目。
- 在新的代碼替換為ChatHub用下面的代碼的類。
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(); } } }
-
在中解決方案資源管理器，右鍵單擊項目，然后單擊添加 |OWIN 啟動類。 新類命名為Startup並單擊確定。
備注 -
如果使用 Visual Studio 2012 中， OWIN 啟動類模板將不可用。 您可以添加純類調用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(); } } }
- 在中解決方案資源管理器，右鍵單擊項目，然后單擊添加 |HTML 頁。 命名新頁面index.html。
備注：可能需要更改對 JQuery 和 SignalR 庫的引用的版本號
- 在中解決方案資源管理器，右鍵單擊剛創建的 HTML 頁，然后單擊設為起始頁。
HTML 頁中的默認代碼替換為以下代碼。
備注：可能通過程序包管理器安裝 SignalR 腳本的更高版本。 驗證以下腳本參考對應於版本的腳本文件在項目中 （它們將與此不同如果添加了使用 NuGet，而不是添加 hub 的 SignalR。）
<!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>
保存所有項目。
運行示例
按 F5 以在調試模式下運行該項目。 中的瀏覽器實例並提示輸入用戶名稱的 HTML 頁面加載。
- 輸入用戶名;輸入用戶名稱。
- 從地址行中的瀏覽器復制 URL 並將其用於打開兩個更多的瀏覽器實例。 在每個瀏覽器實例中，輸入唯一的用戶名稱。
在每個瀏覽器實例中，添加注釋並單擊發送。 注釋應顯示在瀏覽器的所有實例。
下面的屏幕截圖顯示了在三個瀏覽器情況下，所有這些更新一個實例發送消息時運行的聊天應用程序：
- 在中解決方案資源管理器，檢查腳本文檔節點運行的應用程序。 沒有名為的腳本文件中心在運行時動態生成 SignalR 庫。 此文件管理的 jQuery 腳本和服務器端代碼之間的通信。
檢查代碼檢查代碼
SignalR 聊天應用程序演示了兩個基本的 SignalR 開發任務： 在服務器上的主要協調對象為創建中心和使用 SignalR jQuery 庫來發送和接收消息。
SignalR 集線器
中的代碼示例ChatHub類派生自Microsoft.AspNet.SignalR.Hub類。 派生自中心類是一種有用的方式來構建 SignalR 應用程序。 可以在中心類上創建的公共方法，然后通過調用從網頁中的腳本中訪問這些方法。
在聊天代碼中，客戶端調用ChatHub.Send方法發送一封新郵件。 在中心反過來將消息發送給所有客戶端，通過調用Clients.All.broadcastMessage。
發送方法演示了多個中心概念：
集線器上聲明的公共方法，以便客戶端可以調用它們。
使用Microsoft.AspNet.SignalR.Hub.Clients動態屬性來訪問所有客戶端連接到此中心。
在客戶端上調用的函數 (如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 中心進行通信。 在代碼中的基本任務聲明的代理服務器能夠引用中心，聲明服務器可以將內容推送到客戶端，調用的函數和啟動的連接將消息發送到中心。
下面的代碼聲明對集線器代理的引用。
var chat = $.connection.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(); }); });