VueSocketIO 提供后备连接 url

Question

我将 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;
});

Answer 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，因为它可能已经在某些应用程序中使用组件（具有订阅功能）所以我们必须使用旧的发射器但使用新的监听器。
不幸的是，我们无法直接从 vue-socket.io 包导入 Listener class。所以我们必须使用旧的监听器，但将 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)

VueSocketIO 提供后备连接 url

VueSocketIO offer fallback connection url

socket.io

vue.js

vue-socket.io