Socket.io实时聊天应用收发事件异常及useEffect使用咨询

问题描述 #

使用socket.io和socket.io-client开发实时聊天应用时，点击发送按钮触发handleNewMessage函数，后端能正常接收send-new-message事件并打印日志，但前端的new-message-received事件始终不触发，尽管接口返回状态码为200。

前端代码 #

const handleNewMessage = async()=>{
        const newMessage = {
            sent_from:currentuser._id ,
            sent_to: itemOwnerId || item.second_person._id,
            time_stamp: new Date(),
            message: message,
        }
        socket.emit("send-new-message",newMessage)
        setMessage("")
        try{
            const response = await fetch("http://10.0.2.2:4000/sendNewMessageWithItems",{
            method: "POST",
            body: JSON.stringify({
                newMessage
            }),
            headers: {
                'Content-Type': "application/json"
            }

            })
            const result = await response.json()
            
            if(response.status === 200){
                socket.on("new-message-received",()=>{
                    setConversations(prev=>[...prev,result?.message])
                  })
            } else{
                console.log("Error saving the data on mongodb")
            }
        } catch(error){
            console.log("There is an error sendinga message????")
            console.log(error)
        }
    }

后端代码 #

socket.on("send-new-message",(data)=>{
    console.log("A new messagefrom frontend in the socket",data)
    socket.emit("new-message-received")
  })

可能的原因 #

• 事件监听时机滞后：前端在接口返回200后才注册new-message-received监听，但后端的事件可能在接口响应前就已经发送，导致前端错过事件触发。
• 重复绑定监听隐患：每次点击发送按钮都会新增一个new-message-received监听，多次点击后会累积多个监听，不仅会导致后续消息触发多次更新，还可能因闭包问题拿到旧的result值。
• 后端事件发送逻辑局限：当前后端用socket.emit仅向发送消息的当前客户端推送事件，若为单聊场景，未将消息推送给目标用户，也会导致接收端无响应。

解决方案 #

1. 提前注册事件监听（使用useEffect） #

将new-message-received的监听放在组件挂载阶段注册，确保后端发送事件时前端已处于监听状态，同时避免重复绑定。

修正后的前端代码：

import { useEffect, useState } from 'react';

// 组件内其他逻辑

useEffect(() => {
  // 定义消息接收处理函数
  const handleMessageReceived = (newMsg) => {
    setConversations(prev => [...prev, newMsg]);
  };
  // 注册监听
  socket.on("new-message-received", handleMessageReceived);

  // 组件卸载时移除监听，防止内存泄漏
  return () => {
    socket.off("new-message-received", handleMessageReceived);
  };
}, [socket]); // 依赖socket实例，确保实例变化时重新注册

const handleNewMessage = async() => {
  const newMessage = {
      sent_from: currentuser._id ,
      sent_to: itemOwnerId || item.second_person._id,
      time_stamp: new Date(),
      message: message,
  };
  setMessage("");
  
  try {
      const response = await fetch("http://10.0.2.2:4000/sendNewMessageWithItems", {
          method: "POST",
          body: JSON.stringify({ newMessage }),
          headers: { 'Content-Type': "application/json" }
      });
      
      if(response.status !== 200){
          console.log("Error saving the data on mongodb");
      }
  } catch(error) {
      console.log("There is an error sending a message????");
      console.log(error);
  }
  // 可选：直接将本地消息加入列表，提升即时体验，无需等待后端推送
  // setConversations(prev => [...prev, newMessage]);
};

2. 修正后端事件推送逻辑 #

如果是单聊场景，后端需要将消息推送给目标用户，而非仅发送给当前客户端。可以通过房间机制或用户ID映射实现：

// 后端代码修改示例
socket.on("send-new-message", async (data) => {
  console.log("A new message from frontend in the socket", data);
  // 先将消息保存到数据库（假设已有saveMessageToDB方法）
  const savedMessage = await saveMessageToDB(data);
  
  // 推送给目标用户（需确保目标用户已连接，且有对应的socket映射/房间）
  io.to(data.sent_to).emit("new-message-received", savedMessage);
  // 同时推送给当前发送者，用于同步本地状态
  socket.emit("new-message-received", savedMessage);
});

3. 关于空依赖useEffect的疑问 #

空依赖的useEffect仅执行一次是正确的——事件监听只需要注册一次，后续每次后端触发new-message-received事件时，都会调用对应的处理函数，完全不影响后续消息的接收。反而每次发送消息时注册监听会导致重复绑定，引发不必要的问题。

只需注意在useEffect的清理函数中移除监听，避免组件卸载后残留监听导致内存泄漏。

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