Asp-Net-Core学习笔记:3.使用SignalR实时通信框架开发聊天室

SignalR牛刀小试

在MVP杨老师的博客里看到这么个东西,我还以为是NetCore3才推出的新玩意,原来是已经有很多年的历史了,那看来还是比较成熟的一个技术了。

简介

SignalR是一个.NET Core/.NET Framework的开源实时框架,SignalR的可使用Web Socket, Server Sent Events 和 Long Polling作为底层传输方式。

SignalR基于这三种技术构建,抽象于它们之上,它让你更好的关注业务问题而不是底层传输技术问题。

以上介绍来自博客,SignalR分为客户端和服务端,服务端运行在AspNetCore上,客户端支持前端、桌面端和移动端,我去查了一下,连Flutter也有相应的支持库。

几个概念

回落机制

SignalR支持三种底层传输技术,根据客户端的兼容性可以自动协商传输类型。如图

Web Socket是最好的最有效的传输方式,如果浏览器或Web服务器不支持它的话,就会降级使用SSE,实在不行就用Long Polling。

RPC

不用解释太多,Remote Procedure Call,SignalR采用RPC范式来进行服务端和客户端之间的通信。

Hub

Hub是SignalR的一个组件,运行在服务端,它是一个通信用的组件, Hub使用RPC接受从客户端发来的消息,也能把消息发送给客户端 。

关于横向扩展

SignalR针对多种底层通信方式有了 Sticky Sessions (粘性会话) 这种解决方案,可以保证一个客户端在一次会话中的请求都分配给同一个服务器,具体以后需要的时候再研究。

开始使用

我要做的是一个聊天室,所以只需要写一个简单的服务就可以了。

首先要创建AspNetCore项目,注册SignalR服务:

c# 复制代码
public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    services.AddSignalR();
}

创建ChatService类:

c# 复制代码
public class ChatService
{
    private readonly List<ChatMessage> _messages;
    private readonly IHubContext<ChatHub> _context;
    public List<ChatMessage> Messages { get => _messages; }
    public ChatService(IHubContext<ChatHub> context)
    {
        _context = context;
        _messages = new List<ChatMessage>();
    }
}

消息实体类:

c# 复制代码
public class ChatMessage
{
    public string UserName { get; set; }
    public string Content { get; set; }
    public DateTime SendedTime { get; set; }
    public string ClientName { get; set; }
}

关键的来了,编写Hub:

使用SendAsync可以进行远程调用

c# 复制代码
public class ChatHub : Hub {
    private readonly ChatService _chatService;
    public ChatHub(ChatService chatService) {
        _chatService = chatService;
    }
    public async Task GetMessages(string connectionId) {
        var data = _chatService.Messages;
        await Clients.Client(connectionId).
            SendAsync("GetMessages", data);
    }
    public async Task SendMessage(string userName, string content, string clientName) {
        var msg = new Models.ChatMessage {
            UserName = userName,
            Content = content,
            SendedTime = DateTime.Now,
            ClientName = clientName
        };
        _chatService.Messages.Add(msg);
        await Clients.All.SendAsync("SendMessage", msg);
    }
    public override Task OnConnectedAsync() {
        GetMessages(Context.ConnectionId);
        return base.OnConnectedAsync();
    }
}

注册依赖注入和中间件

依赖注入

c# 复制代码
public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    services.AddSignalR();
    services.AddSingleton<CountService>();
    services.AddSingleton<ChatService>();
}

中间件

c# 复制代码
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseStaticFiles();
    app.UseRouting();
    app.UseEndpoints(endpoints =>{
        endpoints.MapControllers();
        endpoints.MapHub<ChatHub>("/chat");
    });
}

客户端

为了方便我就用网页来做。

首先写个简单的聊天界面布局,这里就不贴代码了没啥技术含量,效果大概这样:

首先要安装signalr.js,通过npm安装即可。

然后需要编写js:

js 复制代码
function setupConnection() {
    connection = new signalR.HubConnectionBuilder()
        .withUrl("/chat")
        .build();

    connection.on("SendMessage", message => {
        console.log(message);
        addMsg(message.userName, message.sendedTimeStr, message.content, message.clientName);
    });

    connection.on("GetMessages", data => {
        console.log(data);
        for (var i = 0; i < data.length; i++) {
            let message = data[i];
            addMsg(message.userName, message.sendedTimeStr, message.content, message.clientName);
        }
    });

    connection.on("Finished", () => {
        connection.stop();
        console.log("finished.")
    });

    connection.start()
        .catch(err => console.error(err.toString()));
}

通过以下代码可以远程调用服务器的方法:

js 复制代码
connection.invoke("SendMessage", username, content, '网页客户端');

然后就可以打开多个浏览器测试了。

这是我在手机上的截图

PS:为了把这个部署到服务器,我还买了个新的阿里云服务器。。

参考资料

欢迎交流

交流问题请在微信公众号后台留言,每一条信息我都会回复哈~

相关推荐
向宇it4 小时前
【unity小技巧】unity 什么是反射?反射的作用?反射的使用场景?反射的缺点?常用的反射操作?反射常见示例
开发语言·游戏·unity·c#·游戏引擎
九鼎科技-Leo5 小时前
什么是 WPF 中的依赖属性?有什么作用?
windows·c#·.net·wpf
Heaphaestus,RC6 小时前
【Unity3D】获取 GameObject 的完整层级结构
unity·c#
baivfhpwxf20236 小时前
C# 5000 转16进制 字节(激光器串口通讯生成指定格式命令)
开发语言·c#
直裾6 小时前
Scala全文单词统计
开发语言·c#·scala
ZwaterZ7 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
ZwaterZ10 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
SRC_BLUE_1712 小时前
SQLI LABS | Less-55 GET-Challenge-Union-14 Queries Allowed-Variation 2
oracle·c#·less
yngsqq13 小时前
037集——JoinEntities连接多段线polyline和圆弧arc(CAD—C#二次开发入门)
开发语言·c#·swift
Zԅ(¯ㅂ¯ԅ)13 小时前
C#桌面应用制作计算器进阶版01
开发语言·c#