ToB企服应用市场:ToB评测及商务社交产业平台

标题: ASP.NET Core+Vue3 实现SignalR通讯 [打印本页]
作者: 麻花痒    时间: 2023-12-4 03:20
标题: 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>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4