ASP.NET|ASP.NET Core SignalR框架前端|Core

运行环境：vs2019
创建 Web 应用项目

从菜单中选择“文件”>“新建项目”。
在“创建新项目”对话框中，选择“ASP.NET Core Web 应用程序”，然后选择“下一步” 。
在“配置新项目”对话框中，将项目命名为SignalRChat，然后选择“创建”。
在“创建新的 ASP.NET Core Web 应用程序”对话框中，选择“.NET Core”和“ASP.NET Core 3.0” ,点击创建

文章图片

添加 SignalR 客户端库

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

文章图片

创建 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); } } }

配置 SignalR
必须将 SignalR 服务器配置为将 SignalR 请求传递给 SignalR。
12. 将以下三行代码添加到 Startup.cs 文件图片中的位置。

using SignalRChat.Hubs;

文章图片

services.AddSignalR();

文章图片

endpoints.MapHub("/chathub");

添加 SignalR 客户端代码

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

@page User Message src="https://www.it610.com/article/~/js/signalr/dist/browser/signalr.js"> src="https://www.it610.com/article/~/js/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, "& ").replace(//g, "> "); 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(); });