时间戳

首页 > 解决方案 > reactjs用我的套接字日期填充组件

reactjs - reactjs用我的套接字日期填充组件

问题描述

您好，我想知道我如何填写 html 组件（h1、div 等）以对来自我在 nodejs 上的套接字的数据做出反应

这是我的前端代码：

  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>
        );
    }

我想用类 id 将数据从我的套接字传递到我的组件

我知道在 html 中我会调用我的脚本并解决问题，但是在 nodejs 中会是什么样子？

标签： reactjssocket.io

解决方案

使用数据与任何其他 API 调用没有什么不同。只需在您的套接字事件处理程序中获取结果并根据需要对其进行操作。

下面是获取用户数据和更新将呈现用户列表的状态的示例。

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>
    );
}

推荐阅读