阅读 140

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);
        }
?
        /// 
        /// 连接成功
        /// 
        /// 
        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"); //设置长连接地址
                endpoints.MapControllers();
            });
        }

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

 

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

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

  
  

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

   
"app">
class="view">
"text" v-model="name" placeholder="输入名称" />
"primary" @click="send">发送消息

 

html代码

js代码

 

关注gzh【黑哥聊dotNet】获取项目源码

原文:https://www.cnblogs.com/qpjlove/p/15001692.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐