vue+signalr 实时数据接收 @aspnet/signalr

内容分享4小时前发布
0 0 0

1、npm i –save @aspnet/signalr

2、新建 utils/signalR.js

import * as signalR from  @aspnet/signalr 
const signal = new signalR.HubConnectionBuilder() //服务器地址
  .withUrl( http://127.0.0.1:43992/logic-hub , {})
  .configureLogging(signalR.LogLevel.Information) //打印日志
  .build()

export default {
  // install方法的第一个参数是 Vue 构造器, 第二个参数是一个可选的选项对象。
  install: function (Vue) {
    Vue.prototype.signalr = signal
  }
}

3、main.js

import signalr from  ./utils/signalR 
Vue.use(signalr)

4、单页面应用

methods: {
signalRfun(){
     let _that = this;
      this.signalr.off("Message");
      this.signalr.on("Message", (data) => {
        console.log(data);
      })
    
    //根据参数先调用指定方法
     this.signalr.invoke("subscribeToLogic", this.filename).then((data) => {
        console.log(data);
      });
    
    //再订阅
      this.signalr.off("LogicStatusUpdated");
      this.signalr.on("LogicStatusUpdated", (data) => {
          console.log(data);
      }
}
},
      mounted(){
           this.signalr.start().then(() => {
            console.log("连接");
             _this.signalRfun()});
      }

Cannot send data if the connection is not in the Connected State. at HubConnection.invoke

this.signalr.start()是异步操作,所以要等start完成后再去订阅消息

© 版权声明

相关文章

暂无评论

none
暂无评论...