CSharp的@microsoft/signalr实时通信教程 - 前端 vue

1. 安装@microsoft/signalr

pnpm install @microsoft/signalr --save

signalr  是微软对 websocket技术的封装，优化了操作 ；
1. build 和后端signalR服务建立关联
2. 使用 on 方法监听后端定义的函数，ps：此函数由后端触发，后端发送数据给前端
3. 使用 invoke 主动触发后端的函数，ps：由前端触发，前端可以发送数据给后端

2. 封装组件 js

import * as signalR from '@microsoft/signalr'
import { ref } from "vue"
const opt = ref<any>(
 {
  // 禁止协商
  skipNegotiation: true,
  // 使用 websocket 协议
  transport: signalR.HttpTransportType.WebSockets,
  // 启用日志
  logging: true
 }
)
opt.HttpMessageHandlerFactory = (handler: any) => {
 var newHandler = handler as any;
 newHandler.ServerCertificateCustomValidationCallback = (request: any, cert: any, chain: any, errors: any) => {
  return true;
 };
 return newHandler;
}


export function SignalR() {
 const _signalR: any = {
  connection: null,
  connectionStatus: false,
  // url 必须写全路径
  build(url: string) {
   console.log(url)
   const connection = new signalR.HubConnectionBuilder()
    .withUrl(url, opt.value)
    .withAutomaticReconnect({
     nextRetryDelayInMilliseconds: retryContext => {
      if (retryContext.elapsedMilliseconds < 60000) {
       // If we've been reconnecting for less than 60 seconds so far,
       // wait between 0 and 10 seconds before the next reconnect attempt.
       return 2000
      } else {
       // If we've been reconnecting for more than 60 seconds so far, stop reconnecting.
       return 5000
      }
     }
    })
    // .withAutomaticReconnect([0, 2000, 5 * 1000, 10 * 1000, 30 * 1000, 60 * 1000, 120 * 1000, 120 * 1000, 120 * 1000])
    .build()
   this.connection = connection
   console.log(connection.state);
   console.log(signalR.HubConnectionState.Connected);





   // if (connection.state === signalR.HubConnectionState.Connected) {
   //   this.handles();
   // }
   this.handles()
   console.log('signalR初始化成功', this)
   return this
  },
  handles() {
   const that: any = this
   // Starts the connection.
   function start() {
    console.log('start方法执行');
    that.connection.start().then((message: any) => {
     console.log('start成功', message);
     that.startSuccess(message)
    }).catch((err: any) => {
     if (that.connectionStatus === true) {
      console.error("start失败", err)
      setTimeout(() => {
       start()
      }, 1000)
     }
    })
   }
   start()
   // invoked when the connection is closed.
   this.connection.onclose(async (error: any) => {
    this.closeSuccess(`signalR connection closed. error: ${error}`);
    await this.connection.start();
   });
   // this.connection.onclose(error => {
   //  this.closeSuccess(`signalR connection closed. error: ${error}`)
   // })
   // 重连时触发
   this.connection.onreconnecting((error: any) => {
    this.reconnecting(error)
   })
   // invoked when the connection successfully reconnects.
   this.connection.onreconnected((connectionId: any) => {
    this.reconnectedSuccess(connectionId)
   })
  },
  stop() {
   // Stops the connection.
   this.connection && this.connection.stop().then(() => {
    this.stopSuccess()
   }).catch((err: any) => console.error(err))
  },
  startSuccess(message: any) {
   console.log(`start成功, ${message}`)
  },
  closeSuccess(message: any) {
   console.log(`close成功, ${message}`)
  },
  reconnecting(err: any) {
   console.log(`正在重连, ${err}`)
  },
  reconnectedSuccess(connectionId: any) {
   console.log(`reconnected成功, ${connectionId}`)
  },
  stopSuccess() {
   console.log(`stop stopSuccess成功`)
  },
  invoke(methodName: any, args: any) {
   console.log('invoke方法触发，传送args参数给后端，由客户端主动触发就用invoke');
   this.connection && this.connection.invoke(methodName, args).catch((err: any) => console.error("errerrerr", err))
  },
  on(methodName: any, newMethod = () => { }) {
   console.log('on方法触发 开始监听，由后端触发使用on监听，从后端接收数据')
   this.connection && this.connection.on(methodName, newMethod)
  },
  off(methodName: any, newMethod: any) {
   if (!this.connection) {
    return false
   }
   if (newMethod) {
    this.connection.off(methodName, newMethod)
   } else {
    this.connection.off(methodName)
   }
  }
 }
 return _signalR
}

3. 使用   【 按需 】

import { SignalR } from '@/utils/signalR'
let si  = SignalR();
try {
 si.build('http://192.168.1.63:5965/chatHub')
 si.on("ReceiveMessage",(tt)=>{
  if(tt.substring(0,1) === "{") {
    tt = JSON.parse(tt)
    console.log('原来数据',tt,typeof tt);
// 逻辑操作
    formInline.formData.barcodename = tt.BarcodeName
    formInline.formData.batch = tt.Batch
    formInline.formData.valid_s = tt.BirthDate
    formInline.formData.serial = tt.Serial
  }else {
   console.log('原来数据',tt,typeof tt);
// 赋值操作
   formInline.formData.tagid = tt
  }
})
} catch (error) {
 console.log('signarl 出错');
}