SignalR实时聊天[通俗易懂]

大家好，我是知秋君，一个会写博客吟诗的知秋码农。今天说一说SignalR实时聊天[通俗易懂],希望能够帮助大家进步!!!

1.创建 Web 项目。

选择“Web 应用程序”以创建使用 Razor Pages 的项目，然后选择“创建” 。

2.添加 SignalR 客户端库。

SignalR 服务器库包含在 ASP.NET Core 3.0 共享框架中。 JavaScript 客户端库不会自动包含在项目中。对于此教程，使用库管理器 (LibMan) 从 unpkg 获取客户端库。 unpkg 是一个内容分发网络 (CDN)，可分发在 npm（即 Node.js 包管理器）中找到的任何内容。

在“解决方案资源管理器”中，右键单击项目，然后选择“添加”>“客户端库” 。
在“添加客户端库”对话框中，对于“提供程序”，选择“unpkg”。
对于“库”，输入 @microsoft/signalr@latest。
选择“选择特定文件”，展开“dist/browser”文件夹，然后选择“signalr.js”和“signalr.min.js”。
将“目标位置”设置为 wwwroot/js/signalr/，然后选择“安装”。

###　3.创建 SignalR 中心。
中心是一个类，用作处理客户端 - 服务器通信的高级管道。

在 SignalRChat 项目文件夹中，创建 Hubs 文件夹。
在 Hubs 文件夹中，使用以下代码创建 ChatHub.cs 文件：

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，以向所有客户端发送消息。本教程后面部分将显示调用该方法的 JavaScript 客户端代码。 SignalR 代码是异步模式，可提供最大的可伸缩性。

4.配置项目以使用 SignalR。

必须将 SignalR 服务器配置为将 SignalR 请求传递给 SignalR。

将以下突出显示的代码添加到 Startup.cs 文件。

此代码由一叶知秋网-知秋君整理
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.HttpsPolicy; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; 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.AddRazorPages(); services.AddSignalR(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { 
 if (env.IsDevelopment()) { 
 app.UseDeveloperExceptionPage(); } else { 
 app.UseExceptionHandler("/Error"); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.UseEndpoints(endpoints => { 
 endpoints.MapRazorPages(); endpoints.MapHub<ChatHub>("/chathub"); }); } } }

这些更改将 SignalR 添加到 ASP.NET Core 依赖关系注入和路由系统。

5.添加 SignalR 客户端代码

使用以下代码替换 Pages\Index.cshtml 中的内容：

@page <div class="container"> <div class="row">&nbsp;</div> <div class="row"> <div class="col-2">User</div> <div class="col-4"><input type="text" id="userInput" /></div> </div> <div class="row"> <div class="col-2">Message</div> <div class="col-4"><input type="text" id="messageInput" /></div> </div> <div class="row">&nbsp;</div> <div class="row"> <div class="col-6"> <input type="button" id="sendButton" value="Send Message" /> </div> </div> </div> <div class="row"> <div class="col-12"> <hr /> </div> </div> <div class="row"> <div class="col-6"> <ul id="messagesList"></ul> </div> </div> <script src="~/js/signalr/dist/browser/signalr.js"></script> <script src="~/js/chat.js"></script>

前面的代码：

创建名称以及消息文本的文本框和“提交”按钮。
使用 id=“messagesList” 创建一个列表，用于显示从 SignalR 中心接收的消息。
包含对 SignalR 的脚本引用以及在下一步中创建的“chat.js”应用程序代码。
在 wwwroot/js 文件夹中，使用以下代码创建 chat.js 文件：

此代码由一叶知秋网-知秋君整理
"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(); });