WebSocket内存泄漏是资源生命周期失控的必然结果，必须显式关闭连接、清除监听器和定时器，并确保服务端同步释放，否则会导致FD耗尽。

WebSocket 长连接内存泄漏不是“偶发问题”，而是资源生命周期失控的必然结果。只要没显式关闭、没清理关联引用，内存和文件描述符就一定会涨——不管用 Vue、React 还是原生 JS。

关键原则：WebSocket 实例不会自动销毁，GC 不会替你关连接、清定时器、解监听器。

---

一、先确认是不是 WebSocket 导致的泄漏

打开 Chrome DevTools → Memory 面板 → 拍摄堆快照（Heap Snapshot）→ 在搜索框输入 WebSocket

• 看实例数量是否随页面操作（如反复进/出模块）线性增长
• 点开任一 WebSocket 实例 → 查看 Retainers 标签 → 若显示被闭包、全局数组、组件 this 或 setInterval 强引用，就是泄漏证据
• 补充验证：在控制台执行 getEventListeners(ws)，若返回非空对象，说明监听器还在

小技巧：路由跳转后拍第二张快照，用 Comparison 视图筛选 “Objects allocated between snapshots”，重点盯 Closure 和 Array 类型的增长。

立即学习“Java免费学习笔记（深入）”；

---

二、前端必须做的三件事（缺一不可）

• 调用 ws.close() 显式断开连接

  • 不要依赖 beforeUnmount 或 useEffect cleanup 自动触发——它们不保证执行，尤其在强制刷新或异常退出时
  • 最稳妥位置：在 ws.onclose 和 ws.onerror 回调里都补一句 ws.close()（防重复调用无害）

• 清空所有事件监听器

  

  deep-java-review

  Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

  下载
  • 错误写法：ws.onmessage = (e) => this.handle(e)，卸载时不设 ws.onmessage = null
  • 正确做法：统一在 ws.onclose 中执行

    ws.onclose = () => {
      ws.onmessage = null;
      ws.onerror = null;
      ws.onopen = null;
      ws.onping = null;
    }

• 清理心跳定时器（最隐蔽的泄漏源）

  • 把 timer ID 挂到 ws 实例上，例如 ws.heartbeatTimer = setInterval(...)
  • 在 ws.onclose 中判空清除：

    if (ws.heartbeatTimer) {
      clearInterval(ws.heartbeatTimer);
      ws.heartbeatTimer = null;
    }

  • 切忌只清 state 或 data 字段，timer 本身还在跑，闭包持续锁住整个作用域

---

三、服务端也要同步释放，否则 FD 会耗尽

客户端关了，服务端不处理，连接仍卡在 CLOSE_WAIT 状态，文件描述符（FD）持续累积。Linux 默认限制常为 1024，撑满后新连接直接失败（报 too many open files 或 EOF）。

• Node.js（ws 库）：每个连接出错、超时、主动断开时，必须调 ws.terminate() 或 ws.close()
  • 特别注意 pong 超时分支，不能漏
• Go（gorilla/websocket）：handler 函数开头加 defer conn.Close()；读循环中 err != nil 必须 break，否则 goroutine 永不退出
• PHP（Swoole）：onClose 回调里必须 unset($this->connections[$fd]) 或 $server->close($fd)

可用 lsof -p <PID> | wc -l 快速检查 FD 占用量，接近 ulimit -n 值即为瓶颈。

---

四、推荐封装一个带 destroy() 的连接管理器

把连接、监听器、定时器、上下文全收口管理，避免散落在各组件中失控：

class WsManager {
  constructor(url) {
    this.url = url;
    this.ws = null;
  }

  connect() {
    this.ws = new WebSocket(this.url);
    this.ws.onopen = () => { /* ... */ };
    this.ws.onmessage = (e) => { /* ... */ };
    this.ws.heartbeatTimer = setInterval(() => { /* ping */ }, 30000);
  }

  destroy() {
    if (this.ws && this.ws.readyState !== WebSocket.CLOSED) {
      this.ws.close();
      this.ws.onmessage = null;
      this.ws.onerror = null;
      this.ws.onopen = null;
      if (this.ws.heartbeatTimer) {
        clearInterval(this.ws.heartbeatTimer);
        this.ws.heartbeatTimer = null;
      }
    }
  }
}

组件卸载时只调 manager.destroy()，逻辑清晰，不易遗漏。

不复杂但容易忽略。