@microsoft/signalr与vue 发布订阅

最新推荐文章于 2023-11-08 10:27:11 发布

可乐KL

最新推荐文章于 2023-11-08 10:27:11 发布

阅读量268

点赞数

分类专栏： vue 文章标签： microsoft vue.js javascript

本文链接：https://blog.csdn.net/m0_49494051/article/details/129928914

版权

vue 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

本文展示了如何在Vue.js应用中安装和使用MicrosoftSignalR库，建立与.NETCore后端的WebSocket连接，实现断线自动重连功能。代码详细说明了配置连接、监听事件（如`SendMessageResponse`和`ConnectResponse`）以及调用后端方法的过程。

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

安装@microsoft/signalr

yarn add @microsoft/signalr

APP.vue

<script>
import * as signalR from '@microsoft/signalr'

const hubUrl = 'http://192.168.1.209:5001/ServerHub'

// .net core 版本中默认不会自动重连，需手动调用 withAutomaticReconnect
const connection = new signalR.HubConnectionBuilder()
  .withAutomaticReconnect()// 断线自动重连
  .withUrl(hubUrl, {
    skipNegotiation: true,
    transport: signalR.HttpTransportType.WebSockets
  }) // 传递参数Query["access_token"]
  .configureLogging(signalR.LogLevel.Information)
  .build()

// 启动
connection.start().catch(err => {
  console.log(err)
})

// 自动重连成功后的处理
connection.onreconnected(connectionId => {
  console.log(connectionId)
})

export default {
  created () {
    if (window.localStorage.getItem('user_info')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(window.localStorage.getItem('user_info'))))
    }
  },
  mounted () {
    const _this = this
    // 调用后端方法 SendMessageResponse 接收定时数据
    connection.on('SendMessageResponse', function (data) {
      //   if(data.state==200)
      _this.remsg = _this.remsg + '<br>' + '接收数据:' + data
      console.log('接受的数据：', data)
    })

    // 调用后端方法 SendMessage 接受自己人发送消息
    // connection.on("SendMessage", function(data) {
    // //   if(data.state==200)
    //       _this.remsg = _this.remsg + "<br>" + data.data.userName + ":" + data.msg;
    // });

    // 调用后端方法 ConnectResponse 接收连接成功
    connection.on('ConnectResponse', function (data) {
      //   if(data.state==200)
      _this.remsg = _this.remsg + '<br>' + '连接:' + data
    })
  },
  methods: {
    handle () {
      if (this.msg.trim() === '') {
        alert('不能发送空白消息')
        return
      }
      // 调用后端方法 SendMessage 传入参数
      connection.invoke('SendMessage', this.user, this.msg)
      this.msg = ''
    }
  }
}
</script>