reactjs populating components with my socket dates

问题

Hello I would like to know how I fill in html components (h1, div etc etc) in react with data coming from my socket on nodejs

here is my front - end code:

  render() {
        return (
            <div>

                <h1 id="resultado"></h1>
                <div id="player-1" class="user-panel">
                    <p>Nome: <span class="nome"></span></p>
                    <p>Pontos: <span class="pontos">0</span></p>
                    <div class="botoes">
                        <button>Pedra</button>
                        <button>Papel</button>
                        <button>Tesoura</button>
                    </div>
                    <div class="jogada"></div>
                </div>

                <br />
                <br />
                <br />

                <div id="player-2" class="user-panel">
                    <p>Nome: <span class="nome"></span></p>
                    <p>Pontos: <span class="pontos">0</span></p>
                    <div class="botoes">
                        <button>Pedra</button>
                        <button>Papel</button>
                        <button>Tesoura</button>
                    </div>
                    <div class="jogada"></div>
                </div>

                <p id="espera"></p>
            </div>
        );
    }

I wanted to pass data from my socket to my components with class ids

I know that in html I would call my script and solve the problem, but what would it look like in nodejs?

回答1:

Consuming data is no different from any other API call. Simply get the results in your socket event handler and manipulate it as needed.

Below is an example of getting user data and updating the state which will render the list of users.

let socket = null;

function App() {
    const [users, setUsers] = useState([]);

    function updateUsers(users) {
        setUsers(users);
    }

    useEffect(() => {

        function connect() {
            socket = io('http://localhost:3000', {
                autoConnect: false
            });

            socket.on('connect', () => {
                socket
                    .emit('authenticate', {token: window.sessionStorage.getItem('token')})
                    .on('authenticated', () => {

                        socket.on('chat:users-get', (message) => {
                            updateUsers(message.data);
                        });

                        socket.emit('chat:users-get');
                    })
                    .on('unauthorized', (msg) => {
                        console.error(`socket not authenticated ${msg}`);
                    });
            });

            socket.open();
        }

        connect();

    }, []);

    return (
        <div className="App">
            <fieldset id="users-container">
                <legend>Users Online</legend>
                <div>{users.length} Online</div>
                <ul>
                    {users.map(user => (
                        <li key={user.username}>{user.username}</li>
                    ))}
                </ul>
            </fieldset>
        </div>
    );
}

来源：https://stackoverflow.com/questions/58985981/reactjs-populating-components-with-my-socket-dates