ASP.NET Core SignalR 入門

本教程介紹生成使用 SignalR 的實時應用的基礎知識。 您將學習如何：

• 創(chuàng)建 Web 項目。
• 添加 SignalR 客戶端庫。
• 創(chuàng)建 SignalR 中心。
• 配置項目以使用 SignalR。
• 添加可將消息從任何客戶端發(fā)送到所有連接客戶端的代碼。

最終將創(chuàng)建一個正常運行的聊天應用：

查看或下載示例代碼（如何下載）。

系統(tǒng)必備

• Visual Studio
• Visual Studio Code
• Visual Studio for Mac

• 已安裝“ASP.NET 和 Web 開發(fā)”工作負載的 Visual Studio 2017 版本 15.9 或更高版本
• .NET Core SDK 2.2 或更高版本

創(chuàng)建 Web 項目

• Visual Studio
• Visual Studio Code
• Visual Studio for Mac

• 從菜單中選擇“文件”>“新建項目”。

• 在“新建項目”對話框中，選擇“已安裝”>“Visual C#”>“Web”>“ASP.NET Core Web 應用”。 將項目命名為“SignalRChat”。

  

• 選擇“Web 應用”，以創(chuàng)建使用 Razor Pages 的項目。

• 選擇“.NET Core”目標框架，選擇“ASP.NET Core 2.2”，然后單擊“確定”。

  

添加 SignalR 客戶端庫

Microsoft.AspNetCore.App 元包中包括 SignalR 服務器庫。 JavaScript 客戶端庫不會自動包含在項目中。 對于此教程，使用庫管理器 (LibMan) 從 unpkg 獲取客戶端庫。 unpkg 是一個內容分發(fā)網(wǎng)絡 (CDN)，可以分發(fā)在 npm（即 Node.js 包管理器）中找到的任何內容。

• Visual Studio
• Visual Studio Code
• Visual Studio for Mac

• 在“解決方案資源管理器”中，右鍵單擊項目，然后選擇“添加” > “客戶端庫”。

• 在“添加客戶端庫”對話框中，對于“提供程序”，選擇“unpkg”。

• 對于“庫”，輸入 @aspnet/signalr@1，然后選擇不是預覽版的最新版本。

  

• 選擇“選擇特定文件”，展開“dist/browser”文件夾，然后選擇“signalr.js”和“signalr.min.js”。

• 將“目標位置”設置為 wwwroot/lib/signalr/，然后選擇“安裝”。

  

  LibMan 創(chuàng)建 wwwroot/lib/signalr 文件夾并將所選文件復制到該文件夾。

創(chuàng)建 SignalR 中心

中心是一個類，用作處理客戶端 - 服務器通信的高級管道。

• 在 SignalRChat 項目文件夾中，創(chuàng)建 Hubs 文件夾。
• 在 Hubs 文件夾中，使用以下代碼創(chuàng)建 ChatHub.cs 文件：C#復制using Microsoft.AspNetCore.SignalR; using System.Threading.Tasks; namespace SignalRChat.Hubs { public class ChatHub : Hub { public async Task SendMessage(string user, string message) { await Clients.All.SendAsync("ReceiveMessage", user, message); } } } ChatHub 類繼承自 SignalR Hub 類。 Hub 類管理連接、組和消息?？赏ㄟ^已連接客戶端調用 SendMessage，以向所有客戶端發(fā)送消息。 本教程后面部分將顯示調用該方法的 JavaScript 客戶端代碼。 SignalR 代碼是異步模式，可提供最大的可伸縮性。

配置 SignalR

必須配置 SignalR 服務器，以將 SignalR 請求傳遞到 SignalR。

• 將以下突出顯示的代碼添加到 Startup.cs 文件。C#復制using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using SignalRChat.Hubs; namespace SignalRChat { public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { services.Configure<CookiePolicyOptions>(options => { // This lambda determines whether user consent for non-essential cookies is needed for a given request. options.CheckConsentNeeded = context => true; options.MinimumSameSitePolicy = SameSiteMode.None; }); services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1); services.AddSignalR(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Error"); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseCookiePolicy(); app.UseSignalR(routes => { routes.MapHub<ChatHub>("/chatHub"); }); app.UseMvc(); } } } 這些更改將 SignalR 添加到 ASP.NET Core 依賴關系注入系統(tǒng)和中間件管道。

添加 SignalR 客戶端代碼

• 使用以下代碼替換 Pages\Index.cshtml 中的內容：CSHTML復制@page <div class="container"> <div class="row">&nbsp;</div> <div class="row"> <div class="col-6">&nbsp;</div> <div class="col-6"> User..........<input type="text" id="userInput" /> <br /> Message...<input type="text" id="messageInput" /> <input type="button" id="sendButton" value="Send Message" /> </div> </div> <div class="row"> <div class="col-12"> <hr /> </div> </div> <div class="row"> <div class="col-6">&nbsp;</div> <div class="col-6"> <ul id="messagesList"></ul> </div> </div> </div> <script src="~/lib/signalr/dist/browser/signalr.js"></script> <script src="~/js/chat.js"></script> 前面的代碼：創(chuàng)建名稱以及消息文本的文本框和“提交”按鈕。使用 id="messagesList" 創(chuàng)建一個列表，用于顯示從 SignalR 中心接收的消息。包含對 SignalR 的腳本引用以及在下一步中創(chuàng)建的 chat.js 應用程序代碼。
• 在 wwwroot/js 文件夾中，使用以下代碼創(chuàng)建 chat.js 文件：JavaScript復制"use strict"; var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build(); //Disable send button until connection is established document.getElementById("sendButton").disabled = true; connection.on("ReceiveMessage", function (user, message) { var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"); var encodedMsg = user + " says " + msg; var li = document.createElement("li"); li.textContent = encodedMsg; document.getElementById("messagesList").appendChild(li); }); connection.start().then(function(){ document.getElementById("sendButton").disabled = false; }).catch(function (err) { return console.error(err.toString()); }); document.getElementById("sendButton").addEventListener("click", function (event) { var user = document.getElementById("userInput").value; var message = document.getElementById("messageInput").value; connection.invoke("SendMessage", user, message).catch(function (err) { return console.error(err.toString()); }); event.preventDefault(); }); 前面的代碼：創(chuàng)建并啟動連接。向“提交”按鈕添加一個用于向中心發(fā)送消息的處理程序。向連接對象添加一個用于從中心接收消息并將其添加到列表的處理程序。

運行應用

• Visual Studio
• Visual Studio Code
• Visual Studio for Mac

• 按 Ctrl+F5 可運行應用而不進行調試。

• 從地址欄復制 URL，打開另一個瀏覽器實例或選項卡，并在地址欄中粘貼該 URL。
• 選擇任一瀏覽器，輸入名稱和消息，然后選擇“發(fā)送消息”按鈕。兩個頁面上立即顯示名稱和消息。

 提示

如果應用不起作用，請打開瀏覽器開發(fā)人員工具 (F12) 并轉到控制臺。 可能會看到與 HTML 和 JavaScript 代碼相關的錯誤。 例如，假設將 signalr.js 放在不同于系統(tǒng)指示的文件夾中。 在這種情況下，對該文件的引用將不起作用，并且你將在控制臺中看到 404 錯誤。