Socket.Io 事件多次命中

Question

index.js

 const messageContainer = document.querySelector('.msg');
const append = (message, position) => {
    console.log(message)
    const messageElement = document.createElement('div');
    messageElement.innerText = message;
    messageElement.classList.add('message');
    messageElement.classList.add(position);
    console.log(messageElement)
    messageContainer.append(messageElement);
    console.log(messageContainer)
};
const SERVER = "http://localhost:3010";
var socket = io(SERVER);
socket.on('receive_message', (message) => {
    console.log('Connected');
    console.log(message.content);
    setRMsg(message);
    console.log(rmsg)
    // append(`${message ? message.name : ''}: ${message ? message.content : ''}`, 'right');
    // // if (message.sendBy === 'user') {
        // append(`${message.content} `, 'left');
    // };
});
console.log(rmsg);
if (rmsg && rmsg != '') {
    append(`${rmsg.content} `, 'left');
    setRMsg('')
}
const send = () => {
    console.log('*95')
    console.log(sending)
    if (sending === '' || sending.senderChatID === '' || sending.content === '' || id === '') {
        console.log('***')
        toast.error('Missing Required Field', {
            position: "top-right",
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
        });
    }
    else {
        let obj = {
            senderChatID: sending.senderChatID,
            receiverChatID: id,
            content: sending.content,
            sendBy: sendVia,
            chatId: id,
            name: name ? name.name : '',
            profile_pic: name ? name.profile_pic : '',
            role: name ? name.role : '',
            createdAt: new Date(Date.now()),
            user_id: id
        };
        append(`${name ? name.name : ''}: ${sending.content}`, 'right');
        const input = document.getElementById('messageInp');
        input.value = '';
        socket.emit('send_message', obj);
}

'recieve_message' 事件触发了多次，但它必须触发一次，而点击按钮发送功能工作正常，但在接收消息时它被多次触发不知道为什么，因为我是新手 socket.io 可能是我犯了一个小错误。任何帮助将不胜感激

Answer 1

您可能 重新注册 socket.on(...) 在您的 的每个 重新渲染 反应组件。将代码放入 useEffect 和 [] 数组中，像这样只执行一次：-

const socketObj = useRef(io("http://localhost:3010"));
const socket = socketObj.current;

useEffect(()=>{
socket.on('receive_message', (message) => {
    console.log('Connected');
    console.log(message.content);
    setRMsg(message);
    console.log(rmsg)
    // append(`${message ? message.name : ''}: ${message ? message.content : ''}`, 'right');
    // // if (message.sendBy === 'user') {
        // append(`${message.content} `, 'left');
    // };
});
},[]);

这里我使用 socket 作为 ref 因为我相信它一旦初始化就不会改变并参与渲染流程但你甚至可以将它作为一个状态，如果你需要。

Socket.Io 事件多次命中

Socket.Io event hitting multiple times

javascript

socket.io

em-websocket-client