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

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

示例代码：

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都不是为此而设计的。

• 首先，我们必须侦听重新连接失败事件，当超过重新连接尝试时，该事件将触发。

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

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

• 不幸的是，我们无法直接从vue-socket.io包导入Listener类。因此，我们必须使用旧的侦听器，但将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)