Vue 使用SignalR.JS与Microsoft.AspNetCore.SignalR实时通讯

news/2024/12/4 19:39:04/

针对于Web与其他应用的的通讯,在.Net中,SignalR是一个不错的选择,在前后端没有分离的时候,直接引用对应的signalr.js文件即可; 这里主要记录Vue与Asp.netcore 前后端分离通过signalR通讯实践;

服务端即Asp.net Core 程序

前提:通过Nugut 引入Microsoft.AspNetCore.SignalR 包

首先编写自己的Hub  

public class ChatHub:Hub{public Task SendMsg(ChatMessageInfo info)//这里的Show代表是客户端的方法,具体可以细看SignalR的说明return Clients.All.SendAsync("Show", info.UserName + ":" + info.Message);}}public class ChatMessageInfo{public string UserName { get; set; }public string Message { get; set; }}

or 

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;namespace MaintainceSysAPI
{public class MsgHub : Hub{private IList<string> userList = UserInfo.userList;public readonly static Dictionary<string, string> _connections = new Dictionary<string, string>();public Task SendMsg(string msg){return Clients.All.SendAsync("ShowMsg", msg);//这里的Show代表是客户端的方法}/// <summary>/// 用户上线就将用户名和连接id绑定/// </summary>/// <param name="name"></param>public void SendLogin(string name){if (!userList.Contains(name)){userList.Add(name);_connections.Add(name, Context.ConnectionId);}else{_connections[name] = Context.ConnectionId;}}public override Task OnConnectedAsync(){return base.OnConnectedAsync();}public async Task AddToGroup(string groupName){await Groups.AddToGroupAsync(Context.ConnectionId, groupName);await Clients.Group(groupName).SendAsync("ShowMsg", "");}public async Task RemoveFromGroup(string groupName){await Groups.RemoveFromGroupAsync(Context.ConnectionId, groupName);}}public class UserInfo{public static IList<string> userList = new List<string>();}}

其次在Startup.cs中进行注入和配置,在ConfigureServices中添加如下代码

services.AddCors(opttion => opttion.AddPolicy("cors", policy => policy.SetIsOriginAllowed(_=>true).AllowAnyHeader().AllowAnyMethod().AllowCredentials().AllowAnyOrigin()));//注册SignalR服务services.AddSignalR();

 最后在Configure中配置相关中间件使用,代码如下

 app.UseCors("cors");//跨域//可以设置SignalR相关参数,这里设置地址
app.UseSignalR(routes => {routes.MapHub<MsgHub>("/hub");});

到此,服务端准备完毕!!!

Vue 客户端准备(前提条件: 已经通过Vue-cli脚手架工具把项目搭建起来了)

首先安装对应的signalR插件

npm i --save ‘@aspnet/signalr’   (或者 cnpm i --save '@microsoft/signalr@^6.0.1')

其次开始封装js,这里是在utils文件夹下创建了signalR.js文件,内容如下

//引入安装的signalr包
import * as signalR from '@aspnet/signalr'const signal = new signalR.HubConnectionBuilder().withUrl('http://localhost:52970/lchub/signalr', {})//服务器地址.build()const signalr = function () {var hubif (hub === undefined) {hub = signal}return hub} //  自动重连async function start () {try {await signal.start()console.log('connected')} catch (err) {console.log(err)setTimeout(() => start(), 5000)}}signal.onclose(async () => {await start()}) //将创建的signal赋值给Vue实例export default {//install方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。install: function(Vue) {Vue.prototype.signalr = signal}}

然后在main.js中全局引入

import signalr from './utils/signalR'Vue.use(signalr)

客户准备就完成了,现在就可以使用了,在任意组件中都可以使用,使用方式如下:

//在Vue的生命周期Created函数中注册相关事件
created(){//这里Show就是在服务端指定的Show的方法名称,这里是先清除,再加上this.signalr.off('Show');this.signalr.on('Show',res=>{//可以做相关业务逻辑console.log('signalr 来了');})},
//在Vue的生命周期函数mounted中进行连接
mounted () {this.signalr.start().then(() => {console.log('连接');})
}

 完结...


http://www.ppmy.cn/news/1123028.html

相关文章

STM32单片机IC卡指纹密码锁门禁系统GSM短信报警

实践制作DIY- GC00166---IC卡指纹密码锁门禁系统 一、功能说明&#xff1a; 基于STM32单片机设计---IC卡指纹密码锁门禁系统 二、功能说明&#xff1a; 硬件组成&#xff1a;STM32F103C单片机最小系统LCD12864显示器AS608-指纹模块4x4矩阵键盘RC522读卡器模块蜂鸣器继电器&…

前端教程-小程序

微信小程序 微信小程序官网 抖音小程序 抖音小程序 支付宝小程序 支付宝小程序 uniapp uni-app 是一个使用 Vue.js 开发所有前端应用的框架&#xff0c;开发者编写一套代码&#xff0c;可发布到iOS、Android、Web&#xff08;响应式&#xff09;、以及各种小程序&#x…

代码随想录|647. 回文子串,516.最长回文子序列

647. 回文子串 1.dp含义 dp[i][j]&#xff1a;表示区间范围[i,j] &#xff08;注意是左闭右闭&#xff09;的子串是否是回文子串&#xff0c;如果是,则dp[i][j]为true&#xff0c;否则为false。 2.dp递推公式 整体上是两种&#xff0c;就是s[i]与s[j]相等&#xff0c;s[i]与…

找单身狗。一个数组中只有两个数字出现一次,其他数字出现了两次,编写一个函数找出这两个只出现一次的数字

例&#xff1a;在{1 2 3 4 5 6 1 2 3 4}找出5和6 方法二&#xff1a; 设计思想&#xff1a; 1.分组原理 &#xff08;1&#xff09;将所有数字进行异或&#xff0c;相同数字异或为零&#xff0c;所以只会剩5^6&#xff0c;即为异或的结果xor_result &#xff08;…

TLS/SSL(九) TLS1.2与TLS1.3中的ECDH协议

一 TLS1.2 与 TLS1.3 中的 ECDH 协议 TLS 1.3相比于TLS 1.2在性能和安全性有了很大的提升备注&#xff1a; 当前TLS1.2是主流,暂时关注1.2即可 国密TLS tls1.3 ① TLS1.2 通讯过程 说明&#xff1a; 需要wiresahrk分析报文加以赋证 ② FREAK攻击 客户端支持的很多安…

Docker 部署 Firefly III 服务

拉取最新版本的 Firefly III 镜像&#xff1a; $ sudo docker pull fireflyiii/core:latest在本地预先创建好 upload 和 export 目录, 用于映射 Firefly III 容器内的 /var/www/html/storage/upload 和 /var/www/html/storage/export 目录。 使用以下命令来运行 Firefly III …

go语言 rune 类型

ASCII 码只需要 7 bit 就能完整地表示&#xff0c;但只能表示英文字母在内的 128 个字符&#xff0c;为了表示世界上大部分的文字系统&#xff0c;发明了 Unicode &#xff0c;它是 ASCII 的超集&#xff0c;包含世界上书写系统中存在的所有字符&#xff0c;并且为每个代码分配…

点云从入门到精通技术详解100篇-机载 LiDAR 点云滤波及分类(中)

目录 3.2 研究区概况 3.3 两种滤波算法结果对比 3.4 结果评价 3.4.1 结果精度 3.4.2 结果对比