.net6 SignalR实现简单的实时通讯

最新推荐文章于 2024-10-17 13:32:39 发布

强壮的小白菜

最新推荐文章于 2024-10-17 13:32:39 发布

阅读量1.2k

点赞数

分类专栏： .net 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_43893277/article/details/128668647

版权

.net 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用SignalR构建实时Web应用。首先引用客户端库，创建SignalR集线器处理请求，然后创建客户端程序并配置路由，确保请求被ChatHub处理。接着展示了在JavaScript中连接到集线器并处理发送与接收消息的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、总体思路
1、引用客户端库
2、创建singanlr集线器（接受请求过来后，实时处理请求）
3、创建客户端程序
4、配置Program
1）添加依赖服务
2）在Endpoints里面配置路由，实现路由关系的制定
//每当遇到请求都会交给chatHub去处理
endpoints.MapHub<SignaIRChat.Hubs.ChatHub>(“/chatHub”);
5、导入SignaIR

二、具体实现
1、在js文件夹右键添加客户端库
在这里插入图片描述
2、创建singanlr集线器，用于实时处理请求

using Microsoft.AspNetCore.SignalR;
namespace SignaIRChat.Hubs
{
    public class ChatHub:Hub
    {
        //实现消息的发送，接受消息后发送消息给其他客户端
        public async Task SendMessage(string user,string message)
        {
            await Clients.All.SendAsync("ReceiveMessage",user, message);
        }
    }
}

3、注册服务并添加中间件

builder.Services.AddSignalR();
app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<SignaIRChat.Hubs.ChatHub>("/chatHub");
});

4、具体demo

<div class="container">
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-2">用户名</div>
            <div class="col-4"><input type="text" id="userInput" /></div>
        </div>
        <div class="row">
            <div class="col-2">消息框</div>
            <div class="col-4"><input type="text" id="messageInput" /></div>
        </div>
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-6">
                <input type="button" id="sendButton" value="发送消息" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
        
    </div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script>

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
document.getElementById("sendButton").disabled = true;
connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
 
    li.textContent = `${user} ：${message}`;
});
 
connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});
 
document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

</script>