ASP.NET Core+Vue3 实现SignalR通讯

正义夫

从ASP.NET Core 3.0版本开始，SignalR的Hub已经集成到了ASP.NET Core框架中。因此，在更高版本的ASP.NET Core中，不再需要单独引用Microsoft.AspNetCore.SignalR包来使用Hub。
在项目创建一个类继承Hub,
首先是写一个CreateConnection方法
ConnectionId是SignalR中标识的客户端连接的唯一标识符,
将userId和ConnectionId关联起来，这样就可以实现指定给某一个或一些用户发送消息了。
SendMessageToUser方法用于向特定的用户发送消息。它接受两个参数：userId表示要用于接收消息的用户标识，message表示要发送的消息内容。
该方法的主要作用是根据userId从内存缓存（IMemoryCache）中获取与之关联的ConnectionId，然后使用Clients.Client(connectionId.ToString())方法找到对应的客户端连接，并通过SendAsync方法将消息发送给该用户。这样，用户就能收到特定的消息。

1. public class MyHub : Hub
2. {
3.     private readonly IMemoryCache memoryCache;
5.     public MyHub(IMemoryCache memoryCache)
6.     {
7.         this.memoryCache = memoryCache;
8.     }
9.     public void CreateConnection(int userId)
10.     {
11.         // 将用户标识与 ConnectionId 关联起来
12.         memoryCache.Set(userId, Context.ConnectionId);
13.     }
14.     public async Task SendMessageToUser(int userId, string message)
15.     {
16.         if (memoryCache.TryGetValue(userId, out var connectionId))
17.         {
18.             await Clients.Client(connectionId.ToString()).SendAsync("ReceiveMessage", message);
19.         }
20.     }
21. }

复制代码

在program文件中注册hub

1. //注册signalr
2. builder.Services.AddSignalR();
3. //注册hub  这里的路径是我的Hub类在项目中的路径
4. app.MapHub<MyHub>("/SignalR/MyHub");

复制代码

———————————————————————————————————————————————————————————————————————————
让后前端这里在vue项目中下载@microsoft/signalr包

1. npm i @microsoft/signalr --save

复制代码

创建一个myHub.js文件

1. import * as signalr from '@microsoft/signalr';
2. const conn = new signalr.HubConnectionBuilder()
3.               .withUrl('http://localhost:5124/SignalR/Myhub')
4.               .withAutomaticReconnect()
5.               .build();
6. export default conn;

复制代码

.withUrl('http://localhost:5124/SignalR/Myhub')这里的路径一定要和在api项目中的Program配置的app.MapHub("/Signalr/Myhub");相同。
withAutomaticReconnect()用于启用自动重连功能。这意味着如果连接断开，SignalR将自动尝试重新建立连接，以确保保持实时通信。
.build()方法构建并返回一个SignalR连接对象。
conn.start();和SignarlR启动建立连接。
———————————————————————————————————————————————————————————————————————————
让后的话这里简单模拟了一下数据库的登录
Api部分

1. [Route("api/[controller]/[action]"), ApiController]
2.     public class TestController : ControllerBase
3.     {
4.         List<SysUser> userList = new List<SysUser>()
5.         {
6.             new SysUser(1,"王鹤棣","123456"),
7.             new SysUser(2,"吴磊","123456"),
8.             new SysUser(3,"赵露思","123456")
9.         };
11.         [HttpPost]
12.         public ActionResult Login(SysUser sysUser)
13.         {
14.             var user = userList.Where(s => s.userName == sysUser.userName && s.userPwd == sysUser.userPwd).FirstOrDefault();
15.             if (user is not null)
16.             {
17.                 return Ok(user.userId);
18.             }
19.             return Ok("失败");
20.         }
21.     }
22.     public record SysUser(int? userId,string userName,string userPwd);

复制代码

Vue部分

1. <template>
2.   <input type="text" v-model.trim="loginUser.userName" placeholder="用户名">
3.   <input type="text" v-model.trim="loginUser.userPwd" placeholder="密码">
4.   <button @click="loginBtn">确定</button>
5.   <input type="text" v-model="message">
6.   <select  v-model="sendUserId">
7.     <option value="1">王鹤棣</option>
8.     <option value="2">吴磊</option>
9.     <option value="3">赵露思</option>
10.   </select >
11.   <button @click="sendMessage">发送消息</button>
12. </template>

复制代码

来源:https://www.cnblogs.com/cyfj/archive/2023/11/04/17808647.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！