Question

我正在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);
    })
})

有人可以帮忙吗？

Answer 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 更容易。

同一事件在socket.io-client reactjs中多次发出

1 个答案: