客户端刷新页面时服务器WebSocket 1001报错的修复及重连问题咨询

首先得给你解释下为啥会出现 websocket: close 1001 (going away) 这个错误——当你刷新页面的时候，浏览器会直接销毁当前页面的所有内存资源，包括已经建立好的WebSocket连接，服务器察觉到客户端“走了”，就会抛出这个关闭信号，这其实是个正常的断开提示，不用太紧张。

那为啥不会自动重连呢？你现在的代码只是在页面第一次加载的时候创建了一次WebSocket连接，刷新页面后，虽然新页面会重新执行这段代码，但如果服务器那边还没清理完旧连接的状态，或者你的代码没有主动重试的逻辑，就会出现连接不上的情况。而且就算服务器状态没问题，万一连接过程中因为网络波动失败了，现在的代码也不会尝试重新连。

给你改一下代码，加上自动重连的逻辑，很简单：

let socket;

// 封装创建连接的函数
function createWebSocket() {
  socket = new WebSocket("ws://localhost:8080/ws");
  
  socket.onmessage = function(event) {
    DownloadScene(event);
  };

  // 连接关闭时尝试重连
  socket.onclose = function() {
    console.log("连接断开，正在尝试重连...");
    // 加个2秒延迟，避免频繁请求服务器
    setTimeout(createWebSocket, 2000);
  };

  // 连接出错时也尝试重连
  socket.onerror = function(error) {
    console.error("连接出错:", error);
    socket.close();
  };
}

function DownloadScene(event) {
  var data = JSON.parse(event.data);
  // 这里写你的DOM操作逻辑
  document.getElementById(data.id).innerHTML = /* 你的内容 */;
}

// 页面加载时初始化连接
window.onload = function() {
  createWebSocket();
};

这样改了之后，不管是页面刷新（刷新后window.onload会重新触发createWebSocket），还是连接意外断开，代码都会自动尝试重新建立连接。另外加个延迟是为了避免短时间内频繁请求服务器，给服务器一点缓冲时间。

如果之后遇到服务器端的连接限制（比如同一用户只能连一个），可能还需要在服务器端处理旧连接的销毁，但目前这个客户端的重连逻辑已经能解决你现在的问题啦。

内容的提问来源于stack exchange，提问作者Haknazar