VueJS 上 Vuex 中的 signalR 连接错误

Question

我正在尝试使用 VueJS 中的 Vuex 存储连接 signalR，但是当连接订阅时，我收到错误

我将存储库分成几个文件

存储 index.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

SignalR主连接文件signalR/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()
    }
  }
}

错误

TypeError: context.state.connection.connectionSlow is not a function
at Store.connectSignalR

或

TypeError: context.state.connection.on is not a function
at Store.connectSignalR

Answer 1

我不知道我是否建议将您的连接对象存储在状态中，或者尝试在操作中注册回调。我发现在插件中托管连接对象要容易得多。如果您仍想集成 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();

然后你就可以使用你的插件了： app.$sendSomething('My super important message');