首页 > 编程语言 >ASP.NET Core+Vue3 实现SignalR通讯

ASP.NET Core+Vue3 实现SignalR通讯

时间:2023-11-04 12:45:34浏览次数:37  
标签:Core ASP const userId myHub SignalR message public

从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方法将消息发送给该用户。这样,用户就能收到特定的消息。

public class MyHub : Hub
{
    private readonly IMemoryCache memoryCache;

    public MyHub(IMemoryCache memoryCache)
    {
        this.memoryCache = memoryCache;
    }
    public void CreateConnection(int userId)
    {
        // 将用户标识与 ConnectionId 关联起来
        memoryCache.Set(userId, Context.ConnectionId);
    }
    public async Task SendMessageToUser(int userId, string message)
    {
        if (memoryCache.TryGetValue(userId, out var connectionId))
        {
            await Clients.Client(connectionId.ToString()).SendAsync("ReceiveMessage", message);
        }
    }
}

在program文件中注册hub

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

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

npm i @microsoft/signalr --save

创建一个myHub.js文件

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

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

———————————————————————————————————————————————————————————————————————————
让后的话这里简单模拟了一下数据库的登录
Api部分

[Route("api/[controller]/[action]"), ApiController]
    public class TestController : ControllerBase
    {
        List<SysUser> userList = new List<SysUser>()
        {
            new SysUser(1,"王鹤棣","123456"),
            new SysUser(2,"吴磊","123456"),
            new SysUser(3,"赵露思","123456")
        };

        [HttpPost]
        public ActionResult Login(SysUser sysUser)
        {
            var user = userList.Where(s => s.userName == sysUser.userName && s.userPwd == sysUser.userPwd).FirstOrDefault();
            if (user is not null)
            {
                return Ok(user.userId);
            }
            return Ok("失败");
        }
    }
    public record SysUser(int? userId,string userName,string userPwd);

Vue部分

<script setup>
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import myHub from './httpTools/myHub'; //导入hub
const loginUser=reactive({
  userName:'王鹤棣',
  userPwd:'123456',
});
const loginBtn= ()=>{
  axios.post('http://localhost:5159/api/test/login',loginUser)
  .then(async res => {
    console.log(res);
    alert('成功');
    //这里在登录成功之后调用服务端在MyHub类的CreateConnection方法,
    //把登录成功之后返回的userId传过去
    //使客户端与服务端建立连接
    if(myHub.state.toString()!="Connected"){
        await myHub.start();
    }
    myHub.invoke("CreateConnection",res.data);
  })
}

//这里的ReceiveMessage用于接受服务器发送的消息
//这个ReceiveMessage名字是自己定义的
onMounted(() => {
  myHub.on('ReceiveMessage', (message) => {
    console.log("MyHub接受到的消息:"+message);
    alert(message);
  })
})
const message=ref();
const sendUserId=ref();
const sendMessage=()=>{
  myHub.invoke("SendMessageToUser",Number(sendUserId.value),message.value)
}
</script>

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

image

标签:Core,ASP,const,userId,myHub,SignalR,message,public
From: https://www.cnblogs.com/cyfj/p/17808647.html

相关文章

  • Asp.Net Core webapi+net6 使用资源筛选器(过滤器) 做缓存
    写一个特性类,用来做标记[AttributeUsage(AttributeTargets.Method)]//只对方法有效publicclassResourceFilterAttribute:Attribute{}我这里使用了MemoryCache来做缓存,也可以使用字典来做,但一定要加上static,否则字典每一次请求都会new一个实例,缓存的东西就丢了private......
  • NetCore 技术参考
    开发平台   1、数据模型   2、数据视图   3、界面模型   4、系统图标接口开发   1、接口设置   2、联动设置   3、调用日志代码生成   1、BLL业务逻辑层   2、DAL数据访问层   3、Model实体层   4、生成报表模板      5、EF......
  • 如何实施符合功能安全及ASPICE要求的模型动态测试 ——TPT Workshop邀请函
    尊敬的女士/先生:2023年3月,北汇信息与诸多工程师相约上海,成功举办了今年第一场TPTWorkshop活动,与大家进行了深入的技术交流。如今,2023年已渐渐步入尾声,我们将在北汇信息上海总部再次举办题为“如何实施符合功能安全及ASPICE要求的模型动态测试”的TPTWorkshop活动,诚邀各位新老......
  • .Net Core Aop之IActionFilter
    一、简介在.netcore中Filter分为以下六大类:1、AuthorizeAttribute(权限验证)2、IResourceFilter(资源缓存)3、IActionFilter(执行方法前后的记录)4、IResultFilter(结果生成前后扩展)5、IAlwaysRun(响应结果的补充)6、IExceptionFilter(异常处理) 二、IActionFilter(同步)1、定义Fi......
  • .Net Core Aop之IResourceFilter
    一、简介在.netcore中Filter分为以下六大类:1、AuthorizeAttribute(权限验证)2、IResourceFilter(资源缓存)3、IActionFilter(执行方法前后的记录)4、IResultFilter(结果生成前后扩展)5、IAlwaysRun(响应结果的补充)6、IExceptionFilter(异常处理)二、IResourceFilter(同步资源缓存)1......
  • .Net Core AOP之IResultFilter
    一、简介在.netcore中Filter分为以下六大类:1、AuthorizeAttribute(权限验证)2、IResourceFilter(资源缓存)3、IActionFilter(执行方法前后的记录)4、IResultFilter(结果生成前后扩展)5、IAlwaysRun(响应结果的补充)6、IExceptionFilter(异常处理)二、IResultFilter(同步)1、定义Filt......
  • .Net Core AOP之IExceptionFilter
    一、简介在.netcore中Filter分为以下六大类:1、AuthorizeAttribute(权限验证)2、IResourceFilter(资源缓存)3、IActionFilter(执行方法前后的记录)4、IResultFilter(结果生成前后扩展)5、IAlwaysRun(响应结果的补充)6、IExceptionFilter(异常处理)二、使用publicclassCustomerE......
  • Musescore常用操作备忘
    最近开始写歌,记录下经常用的一些操作目录添加文本折叠休止符添加小节删除小节添加乐器编辑双音、和弦钢琴键盘升高/降低音三连音多声部延音线连音线添加文本选中音符,按cmd+T折叠休止符折叠休止符,按下键盘上的M添加小节选择小节,右键->插入小节插入换行小节也可以插入水......
  • Aspose.Words for Java21.11去除水印和数量限制
    前言工欲善其事,必先利其器目前用到了word转pdf,然后开始研究大佬的文章,用于个人学习,首先感谢!源码分析1.下载Aspose.WordsforJava21.11官方jar包2.开始分析调用授权方法InputStreamis=newFileInputStream("..license.xml");Licenselicense=newLicense();license.setLi......
  • 如何让 WinDebug Preview 加载 Dotnet Core 的 SOS.dll 进行调试
    一、前言最近我在使用WinDebug进行系统调试,也是在学习《Net高级调试》这本书。以前听过WinDebug调试器,但是没有使用过,由于最近想起来了,就好好的研究一下,学习一下。初次接触,还是走了不少弯路,踩了不少坑。关于WinDebug最新版的安装方法,可以在“微软商店”里面,直接查询......