React中使用socket.io-stream无removeEventListener时如何清理事件监听器？

你遇到的TypeError: ios(...).removeEventListener is not a function错误，核心原因是socket.io和socket.io-stream的事件系统并不遵循DOM的事件监听规范——它们没有removeEventListener方法，而是使用自己的offAPI来移除事件监听器。你之前尝试的socket.removeEventListener无效，也是因为socket.io的原生接口里根本没有这个方法。

正确的客户端清理步骤 #

我们需要完成两项关键的清理工作，避免组件卸载后出现无效事件触发或内存泄漏：

1. 移除socket.io-stream的stream from server事件监听
2. 清理stream对象上的readable事件监听（防止组件卸载后触发setState引发警告）

修改你的componentWillUnmount方法，确保使用socket.io生态的标准API：

componentWillUnmount() {
  console.log("Unmount");
  // 1. 移除socket.io-stream的事件监听，必须传入和on时一致的回调引用
  ios(socket).off("stream from server", this.onStream);
  
  // 2. 清理stream上的readable事件监听
  if (this.serverStream) {
    this.serverStream.off("readable", this.onStreamRead);
    this.serverStream = null; // 主动释放引用，帮助GC回收
  }
}

额外的优化建议 #

1. 避免全局socket实例：你当前的socket是全局创建的，这可能导致多个组件实例共享同一个socket连接，引发意外的事件触发。建议把socket移到组件内部创建，并在卸载时断开连接：

constructor() {
  super();
  this.state = { serverConsole: "" };
  this.serverStream = null;
  // 组件内部创建socket实例，隔离不同组件的连接
  this.socket = io("http://localhost:4000");
  this.onChangeConsole = this.onChangeConsole.bind(this);
  this.startProcess = this.startProcess.bind(this);
  this.onStream = this.onStream.bind(this);
  this.onStreamRead = this.onStreamRead.bind(this);
  ios(this.socket).on("stream from server", this.onStream);
}

componentWillUnmount() {
  // ... 之前的清理代码
  // 断开socket连接，彻底释放资源
  this.socket.disconnect();
}

2. 修复服务端内存泄漏：你的服务端在begin事件中创建的setInterval会一直运行，即使客户端断开连接。需要在socket断开时清除定时器：

io.on("connection", socket => {
  console.log(new Date().toTimeString().substr(0, 8) + " a user connected");
  let intervalId = null; // 保存定时器ID，用于后续清理

  socket.on("disconnect", () => {
    console.log(new Date().toTimeString().substr(0, 8) + "a user disconnected");
    // 客户端断开时清除定时器
    if (intervalId) {
      clearInterval(intervalId);
      intervalId = null;
    }
  });

  socket.on("begin", () => {
    // 先清除之前的定时器（如果存在），避免重复创建
    if (intervalId) clearInterval(intervalId);
    
    const stream = ios.createStream();
    stream.write("Starting to stream");
    ios(socket).emit("stream from server", stream, "Some name");
    intervalId = setInterval(() => {
      stream.write("Poke!");
    }, 1000);
  });
});

为什么之前的方法无效？ #

• removeEventListener是DOM元素的专属方法，socket.io（包括socket.io-stream包装后的实例）并不实现这个接口，所以调用时会直接报错。
• socket.io的事件移除必须使用off方法，且需要传入和on绑定阶段完全相同的事件名与回调函数引用，这样才能精准移除对应的监听器（如果只传事件名，会移除该事件下所有的监听器）。

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