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自定义集线器，代码如下！
publicclassChatHub:Hub {///<summary>///这里的方法是给前端调用的///</summary>///<param name="user"></param>///<param name="message"></param>///<returns></returns>publicasyncTaskSendMessage(stringuser,stringmessage) {awaitClients.All.SendAsync("ReceiveMessage", user, message); }///<summary>///连接成功///</summary>///<returns></returns>publicoverrideasyncTaskOnConnectedAsync() {awaitClients.All.SendAsync("Connected","连接成功[来至服务器的信息]"); } }
然后我们在StartUp类的ConfigureServices方法中配置Signalr，配置跨域，代码如下！
publicvoidConfigureServices(IServiceCollection services) { services.AddControllers();services.AddCors(options=>options.AddPolicy("CorsPolicy",builder=> { builder.AllowAnyMethod() .AllowAnyHeader().SetIsOriginAllowed(o=>true) .AllowCredentials(); })); services.AddSignalR(); }
最后我们在StartUp类的Configure方法中使用Signalr，使用我们自定义的集线器ChatHub，代码如下！
publicvoidConfigure(IApplicationBuilder app, IWebHostEnvironment env) {if(env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseRouting(); app.UseAuthorization();app.UseCors("CorsPolicy");app.UseEndpoints(endpoints=> {endpoints.MapHub("/chathub");//设置长连接地址 endpoints.MapControllers(); }); }
这样我们服务端就搭建好了，当然搭建好之后我们需要自己写个前端代码验证自己的WebSocket服务是否搭建成功！
客户端代码 打开Vscode 新建WebSocket.html
我们在head标签内链接外部Signalr JS外部资源文件，代码如下！
<!--微软SignalR js 客户端 必须要 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.3/signalr.min.js"></script>
然后写一个简单的发送消息界面
html代码
<div id="app">
<div class="view">
<div><textarea v-autosize v-model="sendValue" rows=3 placeholder="请输入要发送的内容"></textarea></div>
<div><input type="text" v-model="name" placeholder="输入名称" /></div>
<div>
<h-button color="primary" @click="send">发送消息</h-button>
</div>
</div>
</div>
js代码
<script>newVue({el:"#app", data: {signalR:null,name:"MissLiu",sendValue:"其实AspNetCore.SignalR 非常简单" }, methods: { initSignalR() {var_this =this;_this.signalR =newsignalR.HubConnectionBuilder().withUrl("http://localhost:64059/ChatHub") .configureLogging(signalR.LogLevel.Information) .build();try{ _this.signalR.start();}catch(err) {console.log(err); }//监听连接成功_this.signalR.on("Connected",(message) =>{ HeyUI.$Message(message) });_this.signalR.on("ReceiveMessage",(user, message) =>{ HeyUI.$Notice({type:"info",title: user +" 说 ", content: message }); }); }, send() {this.signalR.invoke("SendMessage",this.name,this.sendValue).catch(function(err){returnconsole.error(err.toString()); }); } }, mounted() {this.initSignalR(); }, })
关注gzh【黑哥聊dotNet】获取项目源码
关注gzh【黑哥聊dotNet】获取项目源码
