56

我用这段代码（例如）构建了我的 websocket 连接：

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

我关闭了与这个的连接：

socket.close();

但是如何重新建立连接？

我做了一些研究并尝试了几种方法。这个问题帮不了我：Socket.io reconnect on disconnect? 这是唯一接近我正在寻找的结果。

我想这样做的原因是允许用户暂时停止向网络发送数据，并在一段时间后重新发送。如果没有重新连接，用户必须刷新页面才能重新发送。这可能会导致一些数据丢失。谢谢你。

4

5 回答 5

89

当服务器关闭连接时，客户端不会尝试重新连接。可能有一些 JS 框架，但问题是，在这个答案的时候，被标记为普通的 Vanilla JS。

我有点沮丧，因为接受的、赞成的答案显然是错误的，并且在找到正确的解决方案时花费了我一些额外的时间。

在这里：当服务器在 WebSocket 中重新启动时重新连接客户端

于 2016-06-30T05:44:01.080 回答
26

我在此页面上找到了一个很好的解决方案：sam-low.com

关闭原始连接后，您需要使用新的事件侦听器创建一个新的 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 对象仍将收到另一个关闭事件，这意味着onclose()即使从技术上讲它从未打开也会执行。这就是为什么延迟 5 秒是明智的 - 没有它，您可能会发现自己以可能会破坏某些东西的速度创建和破坏数千个 websocket 连接。

于 2018-10-17T15:38:44.637 回答
13

注意：问题已标记socket.io，因此此答案专门针对socket.io.
正如许多人指出的那样，这个答案不适用于 vanilla websockets，它在任何情况下都不会尝试重新连接。

Websockets 不会自动尝试重新连接。您必须重新创建套接字才能获得新连接。唯一的问题是你必须重新连接你的处理程序。

但实际上，websockets 旨在保持开放。

更好的方法是让服务器关闭连接。这样，websocket 将触发一个onclose事件，但会继续尝试建立连接。当服务器再次监听时，连接将自动重新建立。

于 2012-12-10T08:30:45.940 回答
0

完美实现：

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），不在上面的代码中，但非常非常关键。

再次编辑：back从https://www.npmjs.com/package/back查看，这是一个灵活的性感实现。primus

于 2017-12-14T22:13:55.020 回答
-1 

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);
<pre>
This code will create a websocket which will 
reconnect automatically after 5 seconds from disconnection.

An automatic disconnection is simulated after 10 seconds.

于 2020-03-06T00:11:11.110 回答