WebSocket需手动删除事件监听器吗？代码是否生成重复on.message监听器？

问题1：在WebSocket中，我是否需要手动删除事件监听器？ #

分两种情况判断：

• 如果你用的是onmessage/onopen这类赋值式的事件处理（比如ws.onmessage = function() {...}），不需要手动删除。因为每次赋值都会直接覆盖之前的处理函数，不会存在重复绑定问题，且WebSocket连接关闭后，这些绑定的函数会自动失效。
• 但如果用addEventListener添加监听器（比如ws.addEventListener('message', function() {...})），就必须手动用removeEventListener清理。这种方式会叠加绑定多个监听器，即便连接关闭，监听器也不会自动移除，容易引发内存泄漏或重复触发的问题。

问题2：以下代码是否会创建重复的on.message监听器？当执行on.message时，payloads数组每次都会恢复为初始值。 #

关于重复监听器 #

不会创建重复的onmessage监听器。代码里用的是webSocket.onmessage = ...的赋值方式，每次执行这行代码都会直接覆盖之前绑定的处理函数，不会叠加多个监听器。

关于payloads回到初始值的问题 #

这是闭包陷阱导致的：
你的第二个useEffect依赖了payloads，每次payloads更新，这个useEffect都会重新执行，给webSocket.onmessage绑定新的函数。但React状态更新是异步的，函数会捕获当前作用域的变量值——如果WebSocket的消息在两次payloads更新之间触发，绑定的函数可能拿到的还是旧的payloads值，看起来就像是回到了初始值。

优化后的代码 #

解决问题的核心是用函数式更新修改payloads，不需要依赖payloads本身，既能避免闭包捕获旧值，还能减少不必要的useEffect执行：

export default function ProjectChat() {
    const { id: projectId } = useParams()

    const [payloads, setPayloads] = useState([])
    const [messageBody, setMessageBody] = useState('')
    const [webSocket, setWebSocket] = useState(null)

    // 创建连接：依赖加上projectId，避免projectId变化时连接不更新
    useEffect(() => {
        const url = `ws://localhost:3000/ws/${projectId}`;
        const ws = new WebSocket(url);
        
        // 直接在这里绑定onmessage，无需单独开useEffect
        ws.onmessage = e => {
            const payload = JSON.parse(e.data);
            // 函数式更新，确保拿到最新的payloads状态
            setPayloads(prevPayloads => [...prevPayloads, payload])
        }

        setWebSocket(ws)

        return () => ws.close()
    }, [projectId]) // 依赖projectId，projectId变化时自动重建连接

    return <p>jsx</p>
}

优化后效果：

1. 仅在创建WebSocket连接时绑定一次onmessage，无重复绑定问题
2. 用setPayloads(prev => ...)总能拿到最新的payloads状态，不会出现回到初始值的情况
3. 给第一个useEffect加上projectId依赖，路由中projectId变化时，会自动关闭旧连接并创建新连接，符合业务逻辑

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