誰能告訴我這個套接字事件有什么問題？

Question

我在用戶加入和離開時發出了兩個事件（ user_joined和user_left ）。 它在服務器端工作，但不在客戶端工作。

服務器端代碼：（它正在工作，在每個連接上顯示 console.log）

io.on('connection', function (socket) {
    const id = socket.id;

    /**
     * User Join Function
     */
    socket.on('join', function ({ name, room }) {
        const { user } = addUser({id, name, room}); // add user to users array
        socket.join(user.room);
        socket.emit('user_joined', users); // emit event with modified users array
        console.log(id, 'joined')
    })

    /**
     * User Disconnect function
     */
    socket.on('disconnect', () => {
        removeUser(id); // remove user form users array
        socket.emit('user_left', users);  // emit event with modified users array
        console.log(id, 'left')
    })


})

客戶端代碼：（未在user_joined或user_left上觸發）

const [players, setPlayers] = useState([]);

const ENDPOINT = 'localhost:5000';
socket = io(ENDPOINT);

useEffect(() => {
    const name = faker.name.firstName() + ' ' + faker.name.lastName();
    socket.emit('join', {name, room: 'global'}); // it's working fine

    return () => {
        socket.emit('disconnect');
        socket.off();
    }

}, [])

useEffect(() => {

    socket.on('user_joined', (users) => {
        setPlayers(users);
    }); // >>> Not Working <<<

    socket.on('user_left', (users) => {
        setPlayers(users);
    }); // >>> Not Working <<<

    console.log(socket) // it's working fine

}, [players]);

Answer 1

socket實例只需要創建一次。 在您的情況下，它會在每次重新渲染時創建。 您也不需要 2 個useEffects 。

將socket實例的創建並將您的 2 個useEffects合並為 1 並提供一個空數組作為依賴項。 這樣，您的 useEffect 只執行一次，而不是在每次重新渲染時執行。

嘗試這個

const [players, setPlayers] = useState([]);

useEffect(() => {
    const ENDPOINT = 'localhost:5000';
    socket = io(ENDPOINT);

    const name = faker.name.firstName() + ' ' + faker.name.lastName();
    socket.emit('join', {name, room: 'global'});

    socket.on('user_joined', (users) => {
        setPlayers(users);
    });

    socket.on('user_left', (users) => {
        setPlayers(users);
    });

    console.log(socket);

    return () => {
        socket.emit('disconnect');
        socket.off();
    }

}, []);
...

如果您想在組件的其他位置使用套接字實例，請使用useRef 。 使用 useRef，除非您對其進行變異，否則您始終會獲得相同的實例。

使用refs創建套接字

...
const [players, setPlayers] = useState([]);
const ENDPOINT = 'localhost:5000';

const socketInstance = useRef(io(ENDPOINT));// in react, with useRef, you always get the same instance unless you mutate it.
useEffect(() => {
    // socketInstance.current = io(ENDPOINT);

    const name = faker.name.firstName() + ' ' + faker.name.lastName();
    socketInstance.current.emit('join', {name, room: 'global'});

    socketInstance.current.on('user_joined', (users) => {
        setPlayers(users);
    });

    socketInstance.current.on('user_left', (users) => {
        setPlayers(users);
    });

    console.log(socketInstance.current);

    return () => {
        socketInstance.current.emit('disconnect');
        socketInstance.current.off();
    }

}, []);
...