socket.on()回调被调用两次

Question

谁能帮助我或向我解释为什么socket.on的回调被调用两次。我使用socket.io和socket.io-client版本4.5.1。我试图将socket.on放入useEffect中，但回调的调用减少到两次。下面是代码:

客户:

import { useEffect, useState } from 'react'
import { io } from 'socket.io-client';
const socket = io('ws://localhost:3001');
const Main = () => {
const [message, setMessage] = useState<string>('');
const [chat, setChat] = useState<string[]>([]);
useEffect(() => {
socket.on('recv_broadcast', message => { // this callback is being called twice
console.log(message);
setChat(state => [...state, message]);
});
}, []);
const send = () => {
setChat(state => [...state, message]);
socket.emit('send_broadcast', message);
}
...

服务器:

io.on('connection', socket => {
console.log('Client connected');
console.log('Total client:', io.engine.clientsCount);
socket.on('send_broadcast', message => {
socket.broadcast.emit('recv_broadcast', message);
})
});

Answer 1

React严格模式运行一些函数两次，这意味着它添加了两次recv_broadcast侦听器!

进入index.js文件并删除

<React.Strictmode> </React.Strictmode>

。

希望这对你有帮助!