轻松搞定Vue 使用SignalR与Asp.net Core通讯
前言
针对于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; } }
其次在Startup.cs中进行注入和配置,在ConfigureServices中添加如下代码
//设置跨域问题 因为前后端分离可能不在统一站点部署,会出现跨域问题,这里进行跨域配置 services.AddCors(options => { options.AddPolicy("SignalRCors", policy => policy.AllowAnyOrigin() .AllowAnyHeader() .AllowAnyMethod() .AllowCredentials()); }); //注册SignalR services.AddSignalR();
最后在Configure中配置相关中间件使用,代码如下
//参数中的值一定要和以上设置的跨域名字一样
app.UseCors("SignalRCors");
//可以设置SignalR相关参数,这里设置地址 app.UseSignalR(routes => { routes.MapHub<LCHub>("/lchub/signalr"); });
到此,服务端准备完毕!!!
Vue 客户端准备
前提条件: 已经通过Vue-cli脚手架工具把项目搭建起来了
首先安装对应的signalR插件
npm i --save @aspnet/signalr
其次开始封装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 hub if (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('连接'); }) }
总结
以上步骤轻松实现Vue和Asp.Net Core 前后端分离通过signalR进行通讯。signalR详细资料可以参考对应的官方文档和对应大牛博客
关注公众号,每周更新至少两篇关于.NetCore相关文章