深入理解asp.net.core（SignalR在asp.netcore中简单使用）

瀿埖落浕 2022-12-10 09:24:42

深入理解asp.net.core（SignalR在asp.netcore中简单使用）(1)

引言

在现代web开发中常常需要消息的及时性或者说数据的实时性，现在WebSocket的出现让这样的需求变得简单，而现实中也出现了对WebSocket的一些封装或者扩展，Signalr的底层采用的是优先websocket实现，同时兼顾其它方式，在asp.net core中我们就可以使用Signalr来进行服务器端的主动推送来实现将数据实时推送到客户端，我们使用一个简单的例子来了解下SignalR的使用。

新建项目

我们新建一个asp.net core web的项目，我这里使用的是VS2019版本，名称自己随意起，然后我们先安装项目中依赖的一些js，服务端项目自带，我们按照我的截图一步步来（以下案例来自微软官方），在本地测试通过

右击项目打开添加-客户端库

深入理解asp.net.core（SignalR在asp.netcore中简单使用）(2)

我们在弹出的窗口提供程序选择unpkg，然后在库中填入@aspnet/signalr@1，回车

深入理解asp.net.core（SignalR在asp.netcore中简单使用）(3)

这个地方我么选择压缩的或者不压缩的都可以，在生产环境下使用压缩的就可以了。下面我们先进行服务端一些代码的编写

新建一个继承自Hub类，这是Signalr所需要的

我这里新建一个Myhub文件夹，然后新建了一个ChatHub类，代码内容很简单，如下（记得添加using Microsoft.AspNetCore.SignalR;命名空间）

using Microsoft.AspNetCore.SignalR; using System.Threading.Tasks; namespace WebApp.MyHub { public class ChatHub : Hub { public async Task SendMessage(string user, string message) { //广播消息 await Clients.All.SendAsync("ReceiveMessage", user, message); } } }

ChatHub 类继承自 SignalR Hub 类。 Hub 类管理连接、组和消息。可通过已连接客户端调用 SendMessage，以向所有客户端发送消息。

配置 SignalR

在asp.net core中我们需要配置一下Signalr，我们在ConfigureServices中加入

services.AddSignalR();

然后在Configure中加入（在app.UseMvc之前加入）

app.UseSignalR(routes => { routes.MapHub<ChatHub>("/chatHub"); });

以上就是我们服务端的所有代码，接下来我们简单的写一个客户端

新建index.html

在wwwroot文件夹下创建一个index.html和chat.js

引入signalr.js和chat.js

//index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="./lib/bootstrap/dist/css/bootstrap.css" /> </head> <body> <div class="container"> <div class="row"> </div> <div class="row"> <div class="col-2"> </div> <div class="col-6"> 用户<input type="text" id="userInput" class="form-control" /> <br /> 消息<input type="text" id="messageInput" class="form-control" /> <br /> <br /> <br /> <input type="button" id="sendButton" value="发送消息" class="btn btn-success" /> </div> </div> <div class="row"> <div class="col-12"> <hr /> </div> </div> <div class="row"> <div class="col-6"> </div> <div class="col-6"> <ul id="messagesList"></ul> </div> </div> </div> <script src="http://img.studyofnet.com./lib/@aspnet/signalr/dist/browser/signalr.min.js"></script> <script src="http://img.studyofnet.com./js/chat.js"></script> </body> </html> //chat.js "use strict"; var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build(); //建立连接之前，按钮不可用 document.getElementById("sendButton").disabled = true; connection.on("ReceiveMessage", function (user, message) { //var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); var encodedMsg = user ":" message; 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(); });

到此为止，一个简单的SignalR客户端和服务端就实现了，接下来我们启动测试一下项目，如下图

深入理解asp.net.core（SignalR在asp.netcore中简单使用）(4)