dotNet Core使用SignalR实现websocket

　　dotNet Core使用SignalR实现websocket

　　前言:

　　最近有一个公司项目做一个排队叫号系统，系统功能不复杂，所以后端就我一人，难点在于消息推送到安卓屏上，最近有点时间，把我工作中使用的技术分享出来！

　　整个技术架构:前端使用vue uniapp，后端使用dotNet core3.1，数据库是Sqlserver，ORM框架是SqlSuagar,中间件有log4net，Newtonsoft.Json，

　　Microsoft.AspNet.SignalR.Core。

　　当然我们在使用一个自己以前没使用的技术时都是先写一个demo，那么我今天就给大家分享我写的demo！

　　首先我们新建一个dotNet Core3.1程序

　　然后我们打开Nuget包管理器，搜索SignalR安卓最新的稳定版本1.1.0

　　然后我们新建一个文件夹，用来存放我们新建的SignalR自定义集线器，代码如下！

　　public class ChatHub : Hub { /// /// 这里的方法是给前端调用的 /// /// /// /// public async Task SendMessage(string user, string message) { await Clients.All.SendAsync("ReceiveMessage", user, message); }<br /> /// /// 连接成功 /// /// public override async Task OnConnectedAsync() { await Clients.All.SendAsync("Connected", "连接成功[来至服务器的信息]"); } }<br />

　　然后我们在StartUp类的ConfigureServices方法中配置Signalr，配置跨域，代码如下！

　　 public void ConfigureServices(IServiceCollection services) { services.AddControllers();<br /> services.AddCors(options => options.AddPolicy("CorsPolicy", builder => { builder.AllowAnyMethod() .AllowAnyHeader() .SetIsOriginAllowed(o => true) .AllowCredentials(); })); services.AddSignalR(); }

　　最后我们在StartUp类的Configure方法中使用Signalr，使用我们自定义的集线器ChatHub，代码如下！

　　 public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); }<br /> app.UseRouting();<br /> app.UseAuthorization(); app.UseCors("CorsPolicy"); app.UseEndpoints(endpoints => { endpoints.MapHub("/chathub"); //设置长连接地址 endpoints.MapControllers(); }); }

　　这样我们服务端就搭建好了，当然搭建好之后我们需要自己写个前端代码验证自己的WebSocket服务是否搭建成功！

　　客户端代码 打开Vscode 新建WebSocket.html

　　我们在head标签内链接外部Signalr JS外部资源文件，代码如下！

　　然后写一个简单的发送消息界面

　　html代码

　　 发送消息

　　js代码

　　 new Vue({ el: "#app", data: { signalR: null, name: "MissLiu", sendValue: "其实AspNetCore.SignalR 非常简单" }, methods: { initSignalR() { var _this = this; _this.signalR = new signalR.HubConnectionBuilder() .withUrl("http://localhost:64059/ChatHub") .configureLogging(signalR.LogLevel.Information) .build();<br /> try { _this.signalR.start(); } catch (err) { console.log(err); } //*敏*感*词*连接成功 _this.signalR.on("Connected", (message) => { HeyUI.$Message(message) });<br /> _this.signalR.on("ReceiveMessage", (user, message) => { HeyUI.$Notice({ type: "info", title: user + " 说 ", content: message }); }); }, send() {<br /> this.signalR.invoke("SendMessage", this.name, this.sendValue).catch(function(err) { return console.error(err.toString()); }); } }, mounted() { this.initSignalR(); }, })

　　界面展示效果