React+Node+Socket.io聊天应用：客户端socket.on无法监听事件求助

嘿，我来帮你搞定这个问题！你的客户端监听不到sent_message事件主要有两个关键问题，咱们一步步来解决：

核心问题分析 #

1. 服务端没有主动回传事件
   你的服务端代码只是在收到sent_message后打印了数据，但并没有把这个事件（或者消息内容）发送回客户端——Socket.io的事件触发是双向的，服务端必须主动emit事件，客户端才能监听到。

2. 客户端监听绑定位置错误
   你把socket.on('sent_message')放在了handleSubmit方法里，这意味着每次提交表单都会重复绑定一次监听。不仅会造成冗余的监听回调，而且第一次提交时绑定的监听，要等下一次服务端发事件才会触发，逻辑完全不对。

修改后的代码示例 #

服务端代码（添加事件回传） #

var users = {};
io.on('connection', function(socket){
  socket.on('user_email', (data) => {
    console.log('user_email event called!');
    users[data.email] = socket.id;
  });
  socket.on('sent_message',(data)=>{
    console.log('data is ',data);
    // 给发送消息的客户端回传事件，这样客户端就能监听到了
    socket.emit('sent_message', data);
    
    // 如果是要实现私密聊天，还可以给目标用户发送消息（示例）
    // if(users[data.targetEmail]){
    //   io.to(users[data.targetEmail]).emit('new_message', data);
    // }
  })
});

客户端代码（修正监听位置） #

把监听事件移到组件初始化的地方，确保只绑定一次：

类组件版本

import socket from '../../socket';

class ChatForm extends React.Component {
  componentDidMount() {
    // 组件挂载时绑定监听，只执行一次
    socket.on('sent_message',(data)=>{
      console.log('client side',data);
      // 这里可以把消息添加到聊天记录里
      // this.setState(prev => ({ chatHistory: [...prev.chatHistory, data] }));
    })
  }

  handleSubmit(e){
    e.preventDefault();
    let email = window.localStorage.getItem('email');
    let message = this.state.message;
    if(message){
      socket.emit('sent_message',{email:email,message:message});
      // 发送后清空输入框
      this.setState({ message: '' });
    }
  }

  // ...其他组件代码
}

函数组件版本（React Hooks）

import { useEffect, useState } from 'react';
import socket from '../../socket';

function ChatForm() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    // 组件挂载时绑定监听
    socket.on('sent_message',(data)=>{
      console.log('client side',data);
      // 这里可以更新聊天记录状态
    });

    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      socket.off('sent_message');
    };
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    let email = window.localStorage.getItem('email');
    if(message){
      socket.emit('sent_message',{email:email,message:message});
      setMessage('');
    }
  }

  // ...其他组件代码
}

额外小贴士 #

• 确保socket.js里的CONFIG.API_BASE_URL是正确的服务端地址，如果跨域的话，服务端要配置好CORS（Socket.io默认会处理，但如果有自定义配置要注意）。
• 如果要做群组聊天，可以用Socket.io的房间功能：socket.join('groupName')，然后用io.to('groupName').emit('new_message', data)给群组内所有用户发消息。
• 一定要在组件卸载时移除监听（比如上面Hooks里的return回调），避免内存泄漏和不必要的回调触发。

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