signalR封装及使用

最新推荐文章于 2024-08-13 15:15:58 发布

爬虫的爬虫

最新推荐文章于 2024-08-13 15:15:58 发布

阅读量357

点赞数

文章标签：前端 signalR

本文链接：https://blog.csdn.net/lee1169639/article/details/131847521

版权

文章展示了如何在Vue应用中封装SignalR连接，包括初始化连接、配置跨域、处理身份验证、错误重连以及调用服务端方法。同时，提供了断开连接的方法，并给出了在组件挂载时如何使用封装好的signalR进行连接和事件监听。

摘要由CSDN通过智能技术生成

封装

import * as signalR from '@microsoft/signalr'
import { api } from '../../boot/axios'
// 如果需要身份验证 .withUrl("/messageHub", {accessTokenFactory: () => sessionStorage.getItem("token")})
export default {
  connection: {},
  // 开始signalr连接
  connect: async function () {
    const _this = this
    const res = await api({
      method: 'get',
      url: '/xxxx'
    })
    let baseURL = res.Description

    _this.connection = new signalR.HubConnectionBuilder()
      .withUrl(baseURL, { crossDomain: true }) // 跨域需要使用绝对地址
      .configureLogging(signalR.LogLevel.Information)
      .build()

    async function start () {
      try {
        await _this.connection.start()
        console.log('signaR连接成功')
      } catch (err) {
        console.log('err', err)
        setTimeout(start, 5000)
      }
    }
    _this.connection.onclose(async (error) => {
      console.log('error', error)
      // 断线重连 error是空的话则是手动断开，不需要重连
      if (error) await _this.connect()
    })
    start()
  },
  // 调用服务端方法
  send: async function (methodName, param) {
    try {
      const _this = this
      await _this.connection.invoke(methodName, param)
    } catch (err) {
      console.error(err)
    }
  },

  // 断开连接
  disconnect: async function () {
    const _this = this
    await _this.connection.stop()
  }
}

使用

引入封装好的signalR

import signalr from '../../assets/js/useSignalr'

    onMounted(async () => {
      // 连接signalr
      await signalr.connect()
      // xxx为监听的接口
      signalr.connection.on('xxx', (res) => {
        console.log('--------------', res)
      })
    })