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

针对于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 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('连接');
    })
}

 完结...