dotNet Core使用SignalR实现websocket

Posted 2022-03-11 dotNET跨平台

前言:

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

整个技术架构:前端使用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
    
        /// <summary>
        /// 这里的方法是给前端调用的
        /// </summary>
        /// <param name="user"></param>
        /// <param name="message"></param>
        /// <returns></returns>
        public async Task SendMessage(string user, string message)
        
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        


        /// <summary>
        /// 连接成功
        /// </summary>
        /// <returns></returns>
        public override async Task OnConnectedAsync()
        
            await Clients.All.SendAsync("Connected", "连接成功[来至服务器的信息]");
        
    

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

public void ConfigureServices(IServiceCollection services)
        
            services.AddControllers();


            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();
            


            app.UseRouting();


            app.UseAuthorization();
            app.UseCors("CorsPolicy");
            app.UseEndpoints(endpoints =>
            
                endpoints.MapHub<ChatHub>("/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>
    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();


                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) 
                    return console.error(err.toString());
                );
            
        ,
        mounted() 
            this.initSignalR();
        ,
    )
</script>

界面展示效果