Javascript VueJS上Vuex中的信号器连接错误

我正在尝试使用VueJS中的Vuex存储连接signalR，但在连接订阅时，出现了一个错误

我将存储库分解为几个文件

存储索引.js

import Vue from 'vue'
import Vuex from 'vuex'

import SignalR from './modules/signalR'


Vue.use(Vuex)

const store = () =>
  new Vuex.Store({
    modules: {
      signalR: SignalR
    }
  });

export default store

信号器主连接文件signar/index.js

const signalR = require('@aspnet/signalr')
const Cookie = process.client ? require("js-cookie") : undefined;

export default {
  state: {
    connection: null
  },

我在应用程序的主要组件中声明通过分派引起的操作

  actions: {
    connectSignalR(context, data) {
      var token = Cookie.get("authToken");
      console.log('signalR', token)  

      context.state.connection == null ? context.state = new signalR.HubConnectionBuilder().withUrl(context.getters.base_signalr + "/notification",
      { accessTokenFactory: () => token }).build()
      : false

      let startedPromise = null
      function start() {
        startedPromise = context.state.connection.start()
        .catch(error => {
          console.log('Failed to connect with hun', error)
          return new Promise((resolve, reject) => 
            setTimeout(() => start().then(resolve).catch(reject), 5000))
        })
        return startedPromise
      }

      context.state.connection.onclose(() => start())

      //context.state.connection.connectionSlow(function() {
      //  console.log('slow connection...');
      //});

      context.state.connection.on('support', (data) => {
        console.log(data);
      })

      start()
    }
  }
}

错误

或

---

我不知道我是否建议将连接对象存储在状态中，或者尝试在操作中注册回调。我发现在插件中托管连接对象要容易得多。如果你仍然想集成Vuex，你可以在插件中引用你的商店，反之亦然

创建一个插件：

import * as signalR from '@aspnet/signalr';
import store from '../store';

const SignalRPlugin = {
    install(Vue) {
        // make your signalR connection
        const connection = new signalR.HubConnectionBuilder()
            .configureLogging(signalR.LogLevel.Information)
            .withUrl("hubUrl")
            .build();

        // register callbacks
        connection.on("DoStuff", () => {
            store.dispatch('DoTheStuff', true);
        });

        //Anything you want to expose outside of the plugin should be prefixed Vue.prototype.$
        Vue.prototype.$sendSomething = function(something){
            connection.send("Incoming", something);
        }
    }
}

export default SignalRPlugin;

在您的操作中，在顶部添加插件

import SignalRPlugin from '../plugins/signalRPlugin';
import Vue from 'vue'
Vue.use(SignalRPlugin);
let app = new Vue();

然后你可以使用你的插件：

---

应用程序$sendSomething“我的超级重要信息”

我喜欢这种插件方法，以后如何添加JWT令牌？我只有一部分集线器连接需要进行身份验证。@JohanVanWambeke我没有使用JWT，但不幸的是，Signal目前在承载令牌方面有一些限制。const hubConnection=new HubConnectionBuilder.withUrl/hubs/notifications，{accessTokenFactory:=>token}.withAutomaticReconnect.build；其中token是您的jwt令牌，为什么不使用Vue.store而使用导入的store？感觉你可能在应用程序上下文中有两个商店。。。。正当

import * as signalR from '@aspnet/signalr';
import store from '../store';

const SignalRPlugin = {
    install(Vue) {
        // make your signalR connection
        const connection = new signalR.HubConnectionBuilder()
            .configureLogging(signalR.LogLevel.Information)
            .withUrl("hubUrl")
            .build();

        // register callbacks
        connection.on("DoStuff", () => {
            store.dispatch('DoTheStuff', true);
        });

        //Anything you want to expose outside of the plugin should be prefixed Vue.prototype.$
        Vue.prototype.$sendSomething = function(something){
            connection.send("Incoming", something);
        }
    }
}

export default SignalRPlugin;

import SignalRPlugin from '../plugins/signalRPlugin';
import Vue from 'vue'
Vue.use(SignalRPlugin);
let app = new Vue();