Angular4+RxJS WebSocket：服务端断开检测、重连及视图切换关闭问题

我之前也遇到过几乎一模一样的WebSocket问题——折腾了好几天找解决方案，既要处理服务端断开的检测，又要做自动重连，还要解决视图切换时主动关闭的坑。结合我踩过的坑，给你整理一套可行的方案：

一、准确检测服务端主动关闭连接 #

WebSocket本身提供了原生事件来监听连接状态变化，重点关注两个事件就能覆盖服务端断开的场景：

• onclose事件：不管是服务端主动断开、网络中断还是客户端主动关闭，都会触发这个事件。可以通过事件对象的code字段区分是否是服务端主动断开——比如1001（服务端正常退出）、1008（政策冲突导致断开）等非1000的code，一般代表非客户端主动发起的关闭。
• onerror事件：连接出错时会先触发这个事件，之后通常会触发onclose。比如服务端意外崩溃、网络波动时，都会先触发error，这时候可以提前处理连接清理。

示例代码：

let ws = new WebSocket('ws://your-service-url');

ws.onclose = (event) => {
  console.log(`连接关闭：code=${event.code}，原因=${event.reason}`);
  // 只有非客户端主动关闭的情况，才触发重连逻辑
  if (event.code !== 1000) {
    handleReconnect();
  }
};

ws.onerror = (error) => {
  console.error('WebSocket连接出错:', error);
  // 出错后主动关闭连接，避免资源泄漏
  if (ws.readyState !== WebSocket.CLOSED) {
    ws.close();
  }
};

二、实现可靠的自动重连机制 #

直接无限重试重连会给服务端造成压力，建议加上指数退避策略——初始间隔短，每次失败后间隔翻倍，直到达到最大间隔，既保证重连的及时性，又避免过度消耗资源：

let wsInstance = null;
let reconnectInterval = 1000; // 初始重连间隔1秒
const MAX_RECONNECT_INTERVAL = 30000; // 最大重连间隔30秒
let reconnectTimer = null;

// 创建WebSocket连接的核心方法
function createWebSocket() {
  wsInstance = new WebSocket('ws://your-service-url');

  wsInstance.onopen = () => {
    console.log('WebSocket连接成功！');
    // 连接成功后重置重连间隔
    reconnectInterval = 1000;
    // 清除可能存在的重连定时器
    if (reconnectTimer) clearTimeout(reconnectTimer);
  };

  wsInstance.onclose = (event) => {
    console.log(`连接关闭，准备重连...`);
    if (event.code !== 1000) {
      scheduleReconnect();
    }
  };

  wsInstance.onerror = () => {
    console.error('WebSocket出错，准备重连...');
    if (wsInstance.readyState !== WebSocket.CLOSED) {
      wsInstance.close();
    }
  };
}

// 调度重连逻辑
function scheduleReconnect() {
  // 先清除之前的定时器，避免重复调度
  if (reconnectTimer) clearTimeout(reconnectTimer);
  reconnectTimer = setTimeout(() => {
    createWebSocket();
    // 重连间隔翻倍，不超过最大值
    reconnectInterval = Math.min(reconnectInterval * 2, MAX_RECONNECT_INTERVAL);
    reconnectTimer = null;
  }, reconnectInterval);
}

// 初始化连接
createWebSocket();

三、视图切换时主动关闭WebSocket的修复 #

你提到的视图切换时主动关闭功能失效，核心问题是主动关闭后要取消自动重连的调度，同时用正确的code标记是客户端主动关闭：

新增一个主动关闭的方法，在视图切换时调用：

// 主动关闭WebSocket（视图切换时调用）
function closeWebSocketManually() {
  if (wsInstance && wsInstance.readyState === WebSocket.OPEN) {
    // 用1000标记为客户端主动正常关闭，避免触发重连
    wsInstance.close(1000, '视图切换主动关闭');
  }
  // 清除重连定时器，防止关闭后自动重连
  if (reconnectTimer) {
    clearTimeout(reconnectTimer);
    reconnectTimer = null;
  }
  // 重置重连间隔，下次打开视图时正常初始化
  reconnectInterval = 1000;
}

调用这个方法后，onclose事件会捕获到code=1000，不会触发重连逻辑，完美解决视图切换时的关闭问题。

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