在本教程中使用的軟體版本
- 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(); }); });