在 socket.io-client reactjs 中多次发出相同的事件答案

【问题标题】：Same event emitting multiple times in socket.io-client reactjs在 socket.io-client reactjs 中多次发出相同的事件
【发布时间】：2025-12-29 12:55:11
【问题描述】：

我正在react、expressjs 和socket.io 中创建一个聊天应用程序。当我单击发送按钮时，我正在发出一个事件并在服务器端监听该事件，然后再次从服务器端发出另一个事件并在客户端监听该事件。我已经在componentDidMount 上编写了事件监听代码。但不知道为什么我的客户端多次调用同一个事件。以下是我的双方代码：

客户端

var socketIOClient = require('socket.io-client')('http://localhost:4001');

sendMessageClicked(e) {
    e.preventDefault();
    let message = this.state.originalMessage;

    var data = {
        message: message,
        time: Date.now()
    }

    socketIOClient.emit('send_message',data);
}

componentDidMount() {
    socketIOClient.on('msg',function(result){
        let messageHtml = 'messages working!';
        let messageBox = document.getElementById('messageBox');

        if (messageBox ) {
            messageBox.appendChild(messageHtml);
        }
    })
}

render(){
    return(
        <div>
            <form onSubmit={this.sendMessageClicked}>
                <textarea onChange={this.handleMessageChange} name="originalMessage" value={this.state.originalMessage}></textarea>
                <input type="submit" value="" />
            </form>
        </div>
    );
}

服务器端

const app = require('./app');

var server = require('http').Server(app);
var io = require('socket.io')(server);
server.listen(4001);

io.on('connection',function(socket){
    socket.on('send_message',function(data){
        io.emit('msg',data);
    })
})

有人可以帮忙吗？

【问题讨论】：

您找到解决方案了吗？

标签： node.js reactjs websocket socket.io

【解决方案1】：

我有同样的问题，我用 useEffect 钩子解决了它。在您的情况下，它将是（在客户端）：

useEffect(()=>{
socket.on('msg', (result) => {
    let messageHtml = 'messages working!';
    let messageBox = document.getElementById('messageBox');

    if (messageBox ) {
        messageBox.appendChild(messageHtml);
    })
return function cleanup() {socket.off('msg')}
},[])

我相信您也可以使用 ComponentDidUpdate 或 ComponentDidUnmount 执行此操作，但 useEffect 更容易。

【讨论】：

谢谢，帮了我很多！

【解决方案2】：

在useEffect() 钩子中，使用socket.current 检查套接字连接是否已经存在帮助我摆脱了这个问题-

useEffect(() => {
  (async () => {
    if (!socket.current) {
      socket.current = io(`http://localhost:8080/`)
      .on("connect", () => {
        //do something 
      });

      socket.current.on("message", (instance) => {
          //receive message from server 
      });
    }
  })();
});

【讨论】：