前言
针对于Web与其他应用的的通讯，在.Net中，SignalR是一个不错的选择，在前后端没有分离的时候，直接引用对应的signalr.js文件即可； 这里主要记录Vue与Asp.netcore 前后端分离通过signalR通讯实践；
服务端即Asp.net Core 程序
前提：通过Nugut 引入Microsoft.AspNetCore.SignalR 包
首先编写自己的Hub
| 1 2 3 4 5 6 7 8 9 10 11 12 |
public class ChatHub:Hub
{
public Task SendMsg(ChatMessageInfo info)
{<br> //这里的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中添加如下代码
| 1 2 3 4 5 6 7 8 9 10 |
//设置跨域问题 因为前后端分离可能不在统一站点部署，会出现跨域问题，这里进行跨域配置
services.AddCors(options => {
options.AddPolicy("SignalRCors", policy => policy.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials());
});
//注册SignalR
services.AddSignalR();
|
最后在Configure中配置相关中间件使用，代码如下
| 1 2 |
//参数中的值一定要和以上设置的跨域名字一样<br>app.UseCors("SignalRCors");<br>//可以设置SignalR相关参数，这里设置地址
app.UseSignalR(routes => { routes.MapHub<LCHub>("/lchub/signalr"); });
|
到此，服务端准备完毕！！！
Vue 客户端准备
前提条件： 已经通过Vue-cli脚手架工具把项目搭建起来了
首先安装对应的signalR插件
| 1 |
npm i --save @aspnet/signalr
|
其次开始封装js，这里是在utils文件夹下创建了signalR.js文件，内容如下
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
//引入安装的signalr包<br>import * as signalR from '@aspnet/signalr'
const signal = new signalR.HubConnectionBuilder()<br> //服务器地址
.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()
}) */<br>//将创建的signal赋值给Vue实例
export default {
install方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
install: function(Vue) {
Vue.prototype.signalr = signal
}
}
|
然后在main.js中全局引入
| 1 2 |
import signalr from './utils/signalR'
Vue.use(signalr)
|
客户准备就完成了，现在就可以使用了，在任意组件中都可以使用，使用方式如下：
| 1 2 3 4 5 6 7 8 9 10 11 |
//在Vue的生命周期Created函数中注册相关事件 <br> created(){<br> //这里Show就是在服务端指定的Show的方法名称，这里是先清除，再加上
this.signalr.off('Show');
this.signalr.on('Show',res=>{<br> //可以做相关业务逻辑
console.log('signalr 来了');
})
},<br> //在Vue的生命周期函数mounted中进行连接
mounted () {
this.signalr.start().then(() => {
console.log('连接');
})
}
|