加强门户网站建设 信息公开,网络营销推广策划案,新冠政策最新20条,如何制作一个注册网站针对于Web与其他应用的的通讯#xff0c;在.Net中#xff0c;SignalR是一个不错的选择#xff0c;在前后端没有分离的时候#xff0c;直接引用对应的signalr.js文件即可#xff1b; 这里主要记录Vue与Asp.netcore 前后端分离通过signalR通讯实践#xff1b; 服务端即Asp.…针对于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 IListstring userList UserInfo.userList;public readonly static Dictionarystring, string _connections new Dictionarystring, string();public Task SendMsg(string msg){return Clients.All.SendAsync(ShowMsg, msg);//这里的Show代表是客户端的方法}/// summary/// 用户上线就将用户名和连接id绑定/// /summary/// param namename/parampublic 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 IListstring userList new Liststring();}}
其次在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.MapHubMsgHub(/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/signalrconst 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/signalRVue.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(连接);})
} 完结...
