reactjs - 使用 socketio 将 Action 发射到不同的 react 组件中

Question

我正在尝试将 msg 发送到不同的 react 组件中，并使用新值更新所有组件。
服务器:

const express = require('express');
const socketio = require('socket.io');
const http = require('http');
const {addPlayer, removePlayer, getPlayer, getPlayerssInRoom, addRoom} = require('./players');
const cors = require('cors');

const PORT = process.env.PORT || 5000;

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

const app = express();
const server = http.createServer(app);
const io = socketio(server);

app.use(cors());
app.use(router);
io.on('connection', (socket) => {
    socket.on('question', (question) => {
        socket.emit('setQuestion', question);
        socket.broadcast.to('rtd').emit('setQuestion', question);
        io.sockets.in('rtd').emit('setQuestion', question);
    });

    socket.on('disconnect', () => {
        console.log('User had left');
    });
});

app.use(router);

server.listen(PORT, () => console.log(`Server has started on port ${PORT}`));

我向服务器发出操作的第一个组件:

import React, {useEffect, useState} from 'react';
import Button from 'react-bootstrap/Button';
import io from 'socket.io-client';
let socket;

const Admin = () => {
    const [currentQuestion, setCurrentQuestion] = useState('');
    const ENDPOINT = 'localhost:5000';
    socket = io(ENDPOINT);

    const publishQuestion = () => {
        console.log('trying');
        socket.emit('question', currentQuestion);
    }
    
    useEffect(() => {
        socket = io(ENDPOINT);
        socket.on('connect', function (data) {
            console.log('socket: ', socket.id);
            socket.on('answer', (answer) => {
                console.log('do i get here');
            })
            socket.on('setQuestion', (newQuestion) => {
                setCurrentQuestion(newQuestion);
                console.log(newQuestion);

            })

        });
    }, [currentQuestion]);
    return (
        <div className="justify-content-center">
            <h1>Admin</h1>
            <input onChange={(event)=>setCurrentQuestion(event.target.value)}/>
            <Button onClick={()=> publishQuestion()}>Publish word</Button>
        </div>
    )
}

export default Admin;

我在监听来自服务器的发射时遇到问题的第二个组件:

import React, {useState} from 'react';
import io from 'socket.io-client';
let socket;

const Player = () => {
    const [currentQuestion, setCurrentQuestion] = useState('');
    const ENDPOINT = 'localhost:5000';
    socket = io(ENDPOINT);

    socket.on('connect', function (data) {
        console.log('socket: ', socket.id);
        socket.on('answer', (answer) => {
            console.log('do i get here');
        })
        socket.on('setQuestion', (newQuestion) => {
            setCurrentQuestion(newQuestion);
            console.log(newQuestion);

        })

    });
    return (
        <h1>player</h1>
    )
}

export default Player;

任何人都知道为什么 Player 组件不在服务器上选择发出 ( socket.on('setQuestion', (newQuestion) )？

Answer 1

我建议您将套接字客户端引用保留在一处。这样，您的组件中有相同的套接字引用，并且组件状态更新不会影响它:
套接字客户端.js

import io from "socket.io-client";
const ENDPOINT = "localhost:5000";

export const socket = io(ENDPOINT);

管理.js

import { socket } from "./socket-client";

const Admin = () => {
    const [currentQuestion, setCurrentQuestion] = useState('');

    const publishQuestion = () => {
        socket.emit('question', currentQuestion);
    }
    
    useEffect(() => {
        socket.on('connect', function (data) {
            console.log('socket: ', socket.id);
            socket.on('answer', (answer) => {
                console.log('do i get here');
            })
            socket.on('setQuestion', (newQuestion) => {
                setCurrentQuestion(newQuestion);
                console.log(newQuestion);

            })

        });
    }, []); //--> empty dependency
}

播放器.js

import { socket } from "./socket-client";

const Player = () => {
    const [currentQuestion, setCurrentQuestion] = useState('');

    useEffect(()=> {
     socket.on('connect', function (data) {
        console.log('socket: ', socket.id);
        socket.on('answer', (answer) => {
            console.log('do i get here');
        })
        socket.on('setQuestion', (newQuestion) => {
            setCurrentQuestion(newQuestion);
            console.log(newQuestion);

        })

    });
    }, [])

}

编辑/
使用 io.sockets.in如果你想发射到那个房间的所有 socket 。
使用 socket.broadcast.to发射到该房间中除它之外的所有 socket 。
服务器.js

io.on("connection", (socket) => {
  socket.join('rtd'); //--> join to rtd room;
  socket.on("question", (question) => {
    // socket.broadcast.to("rtd").emit("setQuestion", question);
    io.sockets.in("rtd").emit("setQuestion", question);
  });

  socket.on("disconnect", () => {
    console.log("User had left");
  });
});