0

我将 Vuetify 与 Vuex 和 VueSocketIO 一起用于我的 WebApp，这是代码的示例部分：

Vue.use(new VueSocketIO({
      reconnection: true,
      debug: true,
      connection: SocketIO(`http://${process.env.ip}:4000`),
      vuex: {
        store,
        actionPrefix: 'SOCKET_',
      },
    }));

如果我理解正确的话，一起使用 Vuex 和 VueSocketIO 使得只能同时使用一个这样的 Socket。

在某些情况下，Vue 可能无法连接到指定的套接字connection。我想知道是否有可能首先让 Vue 尝试连接到一个套接字（也有一些重新连接尝试）但切换到另一个connection值并在之后尝试使用该值作为后备？

先感谢您！

最终解决方案

const options = {
  reconnection: true, 
  reconnectionAttempts: 2, 
  reconnectionDelay: 10,
  reconnectionDelayMax: 1,
  timeout: 300,
};

let connection = new SocketIO(`http://${process.env.ip}:4000`, options);
const instance = new VueSocketIO({
  debug: true,
  connection,
  vuex: {
    store,
    actionPrefix: 'SOCKET_',
  },
  options,
});

const options2 = {
  reconnection: true,
  reconnectionAttempts: 4,
};

connection.on('reconnect_failed', () => {
  connection = new SocketIO(`http://${process.env.fallback}:4000`, options2);
  instance.listener.io = connection;
  instance.listener.register();
  Vue.prototype.$socket = connection;
});
4

1 回答 1

1

要指定重新连接尝试的次数，您可以设置reconnectionAttempts选项。

示例代码：

const url = `http://${process.env.ip}:4000`
const options = {
  reconnectionAttempts: 3
}

Vue.use(new VueSocketIO({
  debug: true,
  connection: new SocketIO(url, options),
  vuex: { ... }
}))

但是切换到另一个连接并不容易，因为两者都不是为此vue-socket.io而socket.io-client设计的。

  • 首先，我们必须监听reconnect_failed事件，该事件将在超过重新连接尝试时触发。

  • 然后我们必须创建一个新连接来连接到后备 url。

  • 该VueSocketIO实例有两个重要的属性，emitter我们listener无法创建新的emitter，因为它可能已经在某些组件中使用（带有订阅功能），所以我们必须使用旧的发射器但新的侦听器。

  • 不幸的是，我们不能Listener直接从vue-socket.io包中导入类。所以我们必须使用旧的监听器，但将io属性更改为新的连接，然后手动调用register方法。

  • 绑定Vue.prototype.$socket到新连接以供将来使用。

示例代码：

const url = `http://${process.env.ip}:4000`
const fallbackUrl = `http://${process.env.ip}:4001`
const options = {
  reconnectionAttempts: 3
}

const connection = new SocketIO(url, options)
const instance = new VueSocketIO({
  debug: true,
  connection,
  vuex: {
    store,
    actionPrefix: 'SOCKET_'
  },
  options
})

connection.on('reconnect_failed', error => {
  const connection = new SocketIO(fallbackUrl, options)
  instance.listener.io = connection
  instance.listener.register()
  Vue.prototype.$socket = connection;
})

Vue.use(instance)
于 2020-09-25T05:58:57.330 回答