在不创建新实例的情况下重新连接 WebSocket
Reconnecting a WebSocket without creating a new instance
所以我创建了一个新的 Web 应用程序,它使用 WebSocket 到 Node.JS WebSocket 服务器。现在 Node 服务器完成了它需要做的一切并且完美地工作。我的问题是浏览器实现。
我查看了很多其他人在答案中给出的库,但我想看看他们是否是更好或更简洁的方法。
所以在我的例子中,我基本上创建了一个对象,它包装了 WebSocket,然后使用 setInterval 重新连接,通过调用 connect(url),它将创建另一个 WebSocket 实例。
我一直在查看连接和客户端,似乎如果连接关闭,比如服务器出现故障,或者发生某些事情,看起来有时,在较长的一段时间内,WebSocket 连接是加倍,所以不是每个客户端 1 个连接,而是 2、3 或 4...?
我觉得这是因为我每次都在创建一个新的 WebSocket 实例?
代码如下:
// Main Function
function WSWrapper() {
// Variables
this.socket = null;
this.enabled = false;
this.retry = false;
// Connect
this.connect = function(address) {
// Sets the address
this.address = address;
// Creates the websocket connection
this.socket = new WebSocket(address);
// On message event handler
this.socket.onmessage = function(event) {
// Do stuff here
}
this.socket.onopen = function(event) {
// On connect, disable retry system
window.ta.enabled = true;
window.ta.retry = false;
}
this.socket.onclose = function(event) {
// On close, enable retry system, disable bidding
window.ta.enabled = false;
window.ta.retry = true;
window.ta.bidEnabled = false;
}
this.socket.onerror = function(event) {
// Set variables off
window.ta.enabled = false;
window.ta.bidEnabled = false;
window.ta.retry = true;
}
return true;
}
// Close Socket
this.closeSocket = function() {
// Shutdown websocket
this.socket.close();
return true;
}
// Send Message
this.socketSend = function(content) {
this.socket.send(content);
return true;
}
// Retry System: Attempts to reconnect when a connection is dropped
this.repeat = setInterval(function() {
if (window.ta.enabled == false && window.ta.retry == true) {
window.ta.connect(window.ta.address);
}
}, 2000);
}
window.ta = new WSWrapper();
window.ta.connect('wss://example.com');
我想出了一些想法和问题,任何答案都很好。
有没有办法重新连接同一个套接字?像 .open(url) 将重新打开连接的函数?我查看了 chrome 控制台,查看了 WebSocket 的原型,但我在那里什么也没看到,所以我不这么认为,但很乐意被告知其他情况。
我可以通过使用一些获取信息的函数来解决这个问题吗,例如,我创建了 WebSocket 实例,然后将所有请求传递给另一个函数来管理消息信息,然后当连接断开,我可以以某种方式删除旧实例并重新创建一个新实例吗?
任何东西都会很好,因为我真的不确定,似乎每个人都制作包装器(就像我正在做的那样),但做事不同,所以最好的方式或首选方式是什么,那不会'不会导致套接字的多个实例保持 运行?如果我的代码有问题,请解释!
谢谢
只是对此的更新,我能够采用以下代码:
https://github.com/websockets/ws/wiki/Websocket-client-implementation-for-auto-reconnect
并修改它以在浏览器中为我工作。看下面的代码,记住这是对上面的改编,所以我不相信代码。
// Define WSClient instance
window.WSClient = {
// Default reconnect interval
reconnectInterval: 5000,
// Define whether it has ever reconnected
reconnected: false,
// Log messages
debug: false,
// Open the URL
open: function(url) {
// Define that
var that = this;
// Open the URL
this.url = url;
// Create underlying websocket instance
this.instance = new WebSocket(this.url);
// Setup the event handler for onopen
this.instance.onopen = function (ev) {
// If it has ever reconnected lets say that
if (that.reconnected && that.debug) {
console.log('[WS]: Reconnected.');
}
// Run the open function
that.onopen(ev);
}
// Setup the event handler for onmessage
this.instance.onmessage = function(data, flags) {
that.onmessage(data, flags);
}
// Setup the event handler for onclose
this.instance.onclose = function(e) {
switch (e){
// Normal closure
case 1000:
if (that.debug) {
console.log("[WS]: Closed");
}
break;
// Abnormal closure
default:
that.reconnect(e);
break;
}
// Run onclose event
that.onclose(e);
}
// Setup the event handler for onerror
this.instance.onerror = function(e) {
switch (e.code){
// Try and reconnect
case 'ECONNREFUSED':
that.reconnect(e);
break;
// Otherwise run error
default:
that.onerror(e);
break;
}
}
},
// Setup send function
sendRaw: function(data, option) {
try {
this.instance.send(data, option);
} catch (e) {
this.instance.emit('error', e);
}
},
// Send the content
send: function(content) {
this.instance.send(content);
},
// Define the reconnection function
reconnect: function(e) {
// Define that
var that = this;
// Log reconnection
if (that.debug) {
console.log(`[WS]: Reconnecting in ${this.reconnectInterval / 1000} seconds.`);
}
// Set reconnect timeout
setTimeout(function() {
// Log reconnecting
if (that.debug) {
console.log("[WS]: Reconnecting...");
}
// Define has reconnected
that.reconnected = true;
// Try and open the URL
that.open(that.url);
}, this.reconnectInterval);
},
}
所以我在 Vue.JS 框架中使用它,如下所示:
<script type="text/javascript">
// Define the websocket
window.vm['socket_example'] = new Vue({
el: '#socket_example',
name: 'SocketExample',
data: {},
methods: {
// On connection open
socket_open: function(event) {
// Send get lots function
this.$socket.send('some_content_here');
},
// On connection close
socket_close: function(event) {
},
// On connection error
socket_error: function(error) {
},
// On connection message
socket_message: function(event) {
},
},
mounted: function() {
// Setup WebSocket connection
this.$socket = WSClient;
this.$socket.debug = true;
this.$socket.open('<?php echo $endpoint; ?>');
// Setup websocket listeners
this.$socket.onopen = this.socket_open;
this.$socket.onclose = this.socket_close;
this.$socket.onerror = this.socket_error;
this.$socket.onmessage = this.socket_message;
},
});
</script>
无论如何,我希望这对您有所帮助!
所以我创建了一个新的 Web 应用程序,它使用 WebSocket 到 Node.JS WebSocket 服务器。现在 Node 服务器完成了它需要做的一切并且完美地工作。我的问题是浏览器实现。
我查看了很多其他人在答案中给出的库,但我想看看他们是否是更好或更简洁的方法。
所以在我的例子中,我基本上创建了一个对象,它包装了 WebSocket,然后使用 setInterval 重新连接,通过调用 connect(url),它将创建另一个 WebSocket 实例。
我一直在查看连接和客户端,似乎如果连接关闭,比如服务器出现故障,或者发生某些事情,看起来有时,在较长的一段时间内,WebSocket 连接是加倍,所以不是每个客户端 1 个连接,而是 2、3 或 4...?
我觉得这是因为我每次都在创建一个新的 WebSocket 实例?
代码如下:
// Main Function
function WSWrapper() {
// Variables
this.socket = null;
this.enabled = false;
this.retry = false;
// Connect
this.connect = function(address) {
// Sets the address
this.address = address;
// Creates the websocket connection
this.socket = new WebSocket(address);
// On message event handler
this.socket.onmessage = function(event) {
// Do stuff here
}
this.socket.onopen = function(event) {
// On connect, disable retry system
window.ta.enabled = true;
window.ta.retry = false;
}
this.socket.onclose = function(event) {
// On close, enable retry system, disable bidding
window.ta.enabled = false;
window.ta.retry = true;
window.ta.bidEnabled = false;
}
this.socket.onerror = function(event) {
// Set variables off
window.ta.enabled = false;
window.ta.bidEnabled = false;
window.ta.retry = true;
}
return true;
}
// Close Socket
this.closeSocket = function() {
// Shutdown websocket
this.socket.close();
return true;
}
// Send Message
this.socketSend = function(content) {
this.socket.send(content);
return true;
}
// Retry System: Attempts to reconnect when a connection is dropped
this.repeat = setInterval(function() {
if (window.ta.enabled == false && window.ta.retry == true) {
window.ta.connect(window.ta.address);
}
}, 2000);
}
window.ta = new WSWrapper();
window.ta.connect('wss://example.com');
我想出了一些想法和问题,任何答案都很好。
有没有办法重新连接同一个套接字?像 .open(url) 将重新打开连接的函数?我查看了 chrome 控制台,查看了 WebSocket 的原型,但我在那里什么也没看到,所以我不这么认为,但很乐意被告知其他情况。
我可以通过使用一些获取信息的函数来解决这个问题吗,例如,我创建了 WebSocket 实例,然后将所有请求传递给另一个函数来管理消息信息,然后当连接断开,我可以以某种方式删除旧实例并重新创建一个新实例吗?
任何东西都会很好,因为我真的不确定,似乎每个人都制作包装器(就像我正在做的那样),但做事不同,所以最好的方式或首选方式是什么,那不会'不会导致套接字的多个实例保持 运行?如果我的代码有问题,请解释!
谢谢
只是对此的更新,我能够采用以下代码: https://github.com/websockets/ws/wiki/Websocket-client-implementation-for-auto-reconnect
并修改它以在浏览器中为我工作。看下面的代码,记住这是对上面的改编,所以我不相信代码。
// Define WSClient instance
window.WSClient = {
// Default reconnect interval
reconnectInterval: 5000,
// Define whether it has ever reconnected
reconnected: false,
// Log messages
debug: false,
// Open the URL
open: function(url) {
// Define that
var that = this;
// Open the URL
this.url = url;
// Create underlying websocket instance
this.instance = new WebSocket(this.url);
// Setup the event handler for onopen
this.instance.onopen = function (ev) {
// If it has ever reconnected lets say that
if (that.reconnected && that.debug) {
console.log('[WS]: Reconnected.');
}
// Run the open function
that.onopen(ev);
}
// Setup the event handler for onmessage
this.instance.onmessage = function(data, flags) {
that.onmessage(data, flags);
}
// Setup the event handler for onclose
this.instance.onclose = function(e) {
switch (e){
// Normal closure
case 1000:
if (that.debug) {
console.log("[WS]: Closed");
}
break;
// Abnormal closure
default:
that.reconnect(e);
break;
}
// Run onclose event
that.onclose(e);
}
// Setup the event handler for onerror
this.instance.onerror = function(e) {
switch (e.code){
// Try and reconnect
case 'ECONNREFUSED':
that.reconnect(e);
break;
// Otherwise run error
default:
that.onerror(e);
break;
}
}
},
// Setup send function
sendRaw: function(data, option) {
try {
this.instance.send(data, option);
} catch (e) {
this.instance.emit('error', e);
}
},
// Send the content
send: function(content) {
this.instance.send(content);
},
// Define the reconnection function
reconnect: function(e) {
// Define that
var that = this;
// Log reconnection
if (that.debug) {
console.log(`[WS]: Reconnecting in ${this.reconnectInterval / 1000} seconds.`);
}
// Set reconnect timeout
setTimeout(function() {
// Log reconnecting
if (that.debug) {
console.log("[WS]: Reconnecting...");
}
// Define has reconnected
that.reconnected = true;
// Try and open the URL
that.open(that.url);
}, this.reconnectInterval);
},
}
所以我在 Vue.JS 框架中使用它,如下所示:
<script type="text/javascript">
// Define the websocket
window.vm['socket_example'] = new Vue({
el: '#socket_example',
name: 'SocketExample',
data: {},
methods: {
// On connection open
socket_open: function(event) {
// Send get lots function
this.$socket.send('some_content_here');
},
// On connection close
socket_close: function(event) {
},
// On connection error
socket_error: function(error) {
},
// On connection message
socket_message: function(event) {
},
},
mounted: function() {
// Setup WebSocket connection
this.$socket = WSClient;
this.$socket.debug = true;
this.$socket.open('<?php echo $endpoint; ?>');
// Setup websocket listeners
this.$socket.onopen = this.socket_open;
this.$socket.onclose = this.socket_close;
this.$socket.onerror = this.socket_error;
this.$socket.onmessage = this.socket_message;
},
});
</script>
无论如何,我希望这对您有所帮助!