关闭连接后如何重新连接到WebSocket [重复]

i86rm4rw  于 2023-08-05  发布在  其他
关注(0)|答案(5)|浏览(239)

此问题在此处已有答案

Reconnection of Client when server reboots in WebSocket(9个回答)
三年前就关了。
我用下面的代码构建我的WebSocket连接(例如):

var socket = new WebSocket("ws://94.12.176.177:8080");

字符串
我把它和这个联系起来:

socket.close();


但我该如何重建连接呢?
我做了一些研究,尝试了几种方法。这个问题帮不了我:Socket.io reconnect on disconnect?这是唯一接近我所寻找的结果。
我想这样做的原因是允许用户暂时停止向Web发送数据,并在一段时间后重新发送。如果没有重新连接,用户必须刷新页面才能重新发送。这可能会导致一些数据丢失。- 谢谢你-谢谢

yebdmbv4

yebdmbv41#

当服务器关闭连接时,客户端 * 不会 * 尝试重新连接。对于一些JS框架可能是这样,但问题是,在这个答案的时候,标记为普通的Vanilla JS。
我有点沮丧,因为公认的、被赞成的答案显然是错误的,而且在找到正确的解决方案时花费了我一些额外的时间。
就是这里:Reconnection of Client when server reboots in WebSocket

tyky79it

tyky79it2#

我在这个页面上找到了一个很好的解决方案:https://sam-low.com/how-to-reopen-a-closed-websocket.html
关闭原始连接后,需要创建一个带有新事件侦听器的新WebSocket对象

function startWebsocket() {
  var ws = new WebSocket('ws://localhost:8080')

  ws.onmessage = function(e){
    console.log('websocket message event:', e)
  }

  ws.onclose = function(){
    // connection closed, discard old websocket and create a new one in 5s
    ws = null
    setTimeout(startWebsocket, 5000)
  }
}

startWebsocket();

字符串
请注意,如果重新连接出现问题,新的WebSocket对象仍将接收另一个close事件,这意味着即使onclose()从未在技术上打开过,它也将被执行。这就是为什么5秒的延迟是合理的--没有它,你可能会发现自己创建和销毁数千个WebSocket连接的速度可能会破坏一些东西。

4uqofj5v

4uqofj5v3#

注意:这个问题被标记为socket.io,所以这个答案是专门针对socket.io的。
正如许多人指出的那样,这个答案不适用于vanilla websockets,它在任何情况下都不会尝试重新连接。
Websockets不会自动尝试重新连接。您必须重新创建套接字以获得新的连接。唯一的问题是你得重新接上你的接头人。
但实际上,Websockets是为了保持开放而设计的。
更好的方法是让服务器关闭连接。这样,WebSocket将触发onclose事件,但将继续尝试建立连接。当服务器再次侦听时,连接将自动重新建立。

chhkpiq4

chhkpiq44#

完美的实施:

var socket;

const socketMessageListener = (event) => {
  console.log(event.data);
};

const socketOpenListener = (event) => {
  console.log('Connected');
  socket.send('hello');
};

const socketCloseListener = (event) => {
  if (socket) {
    console.error('Disconnected.');
  }
  socket = new WebSocket('ws://localhost:8080');
  socket.addEventListener('open', socketOpenListener);
  socket.addEventListener('message', socketMessageListener);
  socket.addEventListener('close', socketCloseListener);
};

socketCloseListener();

字符串
要测试它:

setTimeout(()=>{
  socket.close();
},5000);


编辑:注意指数回退实现(在顶部评论链接的线程中:https://stackoverflow.com/a/37038217/8805423),不在上面的代码中,但非常非常关键。
再次编辑:从primus中检出backhttps://www.npmjs.com/package/back,这是一个灵活的性感的实现。

nwlls2ji

nwlls2ji5#

function wsConnection(url){
    var ws = new WebSocket(url);
    var s = (l)=>console.log(l);
	ws.onopen = m=>s(" CONNECTED")
    ws.onmessage = m=>s(" RECEIVED: "+JSON.parse(m.data))
    ws.onerror = e=>s(" ERROR")
    ws.onclose = e=>{
        s(" CONNECTION CLOSED");
        setTimeout((function() {
            var ws2 = new WebSocket(ws.url);
			ws2.onopen=ws.onopen;
            ws2.onmessage = ws.onmessage;
            ws2.onclose = ws.onclose;
            ws2.onerror = ws.onerror;
            ws = ws2
        }
        ).bind(this), 5000)
    }
    var f = m=>ws.send(JSON.stringify(m)) || "Sent: "+m;
    f.ping = ()=>ws.send(JSON.stringify("ping"));
    f.close = ()=>ws.close();
    return f
}

c=new wsConnection('wss://echo.websocket.org');
setTimeout(()=>c("Hello world...orld...orld..orld...d"),5000);
setTimeout(()=>c.close(),10000);
setTimeout(()=>c("I am still alive!"),20000);

个字符

相关问题