SignalR前端vue的使用方法

一、SignalR是什么？

SignalR，全称Microsoft ASP.NET SignalR，是一个使用C#语言写成的客户端和服务器端开发库，2012年由微软所开发。

以“定时事件触发，异步输入输出”为其理念。

ASP.NET Core SignalR JavaScript 客户端官网地址查询。

二、安装

1. 通过npm安装：

npm install --save @aspnet/signalr

2. 若要在没有 npm 的情况下使用客户端库，请引用客户端库的 CDN 托管副本。 例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.7/signalr.min.js"></script>

三、使用步骤

新建一个名为signalR.ts的文件：

• 初始化连接 initSR
• 停止连接 stopSR

import * as signalR from '@aspnet/signalr'
export default {
  SR: {},
  // 初始化连接
  initSR: function () {
    const that = this
    if (!localStorage.getItem('userInfo')) return;
    const token = JSON.parse(localStorage.getItem('userInfo') as any).token;
    // 1.获取系统中定义的baseURL
    let orgin = window.location.origin
    const url = orgin + '加一些和后端约定得参数、字符串'
    // 2.初始化连接
    that.SR = new signalR.HubConnectionBuilder()
      .withUrl(url, {})
      .configureLogging(signalR.LogLevel.Information)
      .build();
    // 3. 在停止signalR时，不让onclose内的 start执行
    (that.SR as any).flag = true
    // 4.启动连接的方法
    async function start() {
      try {
        await (that.SR as any).start();
      } catch (err) {
        setTimeout(start, 5000);
      }
    }
    // 5.关闭之后重连
    (that.SR as any).onclose(async () => {
      if ((that.SR as any).flag) {
        await start();
      }
    });

    // 6.启动连接
    start();
  },
  // 停止连接，因为调用that.SR.stop(),同时会触发5操作，所以用了flag
  stopSR: function () {
    const that = this
    (that.SR as any).flag = false
    async function stop() {
      try {
        await (that.SR as any).stop();
      } catch (err) {
      	console.log(err)
      }
    }
    stop();
  }
};

在页面使用时：

• 先引入signalR文件，
• 再进行初始化，
• 然后on接收来自中心的消息。

// 引入
import signalR from '@/utils/signalR'

// 初始化
signalR.initSR();
// 接收来自中心的消息
(signalR.SR as any).on('feedbackReply', (res: any) => {
   // 接收后要做的事
  console.log('收到消息---', res)
})

TIP：
因为停止连接，会调用that.SR.stop()，但会执行that.SR.onclose内的逻辑，
所以，我们需要区别，是重连进入的onclose，还是停止链接stop()进入的onclose。
flag这个变量就是做这个区分用的。

注意事项

在使用时，signalR只有在服务端被主动触发时，才会给前端发送消息，我们前端才能接收到消息。

比如消息的回复，要是在前端没有初始化连接，没有和后端建立链接的时候，后端给予回复。那当我们上线时，是没办法通过signalR拿到消息。

只有当前后端建立链接之后，后端被主动触发，发送给客户端消息的事件，前端才能通过on里拿到消息。