经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » ASP.net » 查看文章
ASP.NET Core+Vue3 实现SignalR通讯
来源:cnblogs  作者:柴油飞机  时间:2023/11/6 9:12:03  对本文有异议

从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;
  4. public MyHub(IMemoryCache memoryCache)
  5. {
  6. this.memoryCache = memoryCache;
  7. }
  8. public void CreateConnection(int userId)
  9. {
  10. // 将用户标识与 ConnectionId 关联起来
  11. memoryCache.Set(userId, Context.ConnectionId);
  12. }
  13. public async Task SendMessageToUser(int userId, string message)
  14. {
  15. if (memoryCache.TryGetValue(userId, out var connectionId))
  16. {
  17. await Clients.Client(connectionId.ToString()).SendAsync("ReceiveMessage", message);
  18. }
  19. }
  20. }

在program文件中注册hub

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

image
———————————————————————————————————————————————————————————————————————————
让后前端这里在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. };
  10. [HttpPost]
  11. public ActionResult Login(SysUser sysUser)
  12. {
  13. var user = userList.Where(s => s.userName == sysUser.userName && s.userPwd == sysUser.userPwd).FirstOrDefault();
  14. if (user is not null)
  15. {
  16. return Ok(user.userId);
  17. }
  18. return Ok("失败");
  19. }
  20. }
  21. public record SysUser(int? userId,string userName,string userPwd);

Vue部分

  1. <script setup>
  2. import {ref,reactive,onMounted} from 'vue';
  3. import axios from 'axios';
  4. import myHub from './httpTools/myHub'; //导入hub
  5. const loginUser=reactive({
  6. userName:'王鹤棣',
  7. userPwd:'123456',
  8. });
  9. const loginBtn= ()=>{
  10. axios.post('http://localhost:5159/api/test/login',loginUser)
  11. .then(async res => {
  12. console.log(res);
  13. alert('成功');
  14. //这里在登录成功之后调用服务端在MyHub类的CreateConnection方法,
  15. //把登录成功之后返回的userId传过去
  16. //使客户端与服务端建立连接
  17. if(myHub.state.toString()!="Connected"){
  18. await myHub.start();
  19. }
  20. myHub.invoke("CreateConnection",res.data);
  21. })
  22. }
  23. //这里的ReceiveMessage用于接受服务器发送的消息
  24. //这个ReceiveMessage名字是自己定义的
  25. onMounted(() => {
  26. myHub.on('ReceiveMessage', (message) => {
  27. console.log("MyHub接受到的消息:"+message);
  28. alert(message);
  29. })
  30. })
  31. const message=ref();
  32. const sendUserId=ref();
  33. const sendMessage=()=>{
  34. myHub.invoke("SendMessageToUser",Number(sendUserId.value),message.value)
  35. }
  36. </script>
  37. <template>
  38. <input type="text" v-model.trim="loginUser.userName" placeholder="用户名">
  39. <input type="text" v-model.trim="loginUser.userPwd" placeholder="密码">
  40. <button @click="loginBtn">确定</button>
  41. <input type="text" v-model="message">
  42. <select v-model="sendUserId">
  43. <option value="1">王鹤棣</option>
  44. <option value="2">吴磊</option>
  45. <option value="3">赵露思</option>
  46. </select >
  47. <button @click="sendMessage">发送消息</button>
  48. </template>

image

原文链接:https://www.cnblogs.com/cyfj/p/17808647.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号