时间戳

首页 > 解决方案 > React 组件未在 socket.io 事件上更新

node.js - React 组件未在 socket.io 事件上更新

问题描述

我无法弄清楚为什么我的 React 组件在查看者数量发生变化后没有更新。当页面首次呈现时，金额会正确显示。套接字事件也可以记录到我的终端。

可能有一个简单的解决方法。我究竟做错了什么？

服务器

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const port = process.env.PORT || 4001;
const index = require('./index');

const app = express();
app.use(index);

const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
  console.log('+ client connected');
  getApiAndEmit(socket);

  socket.on('disconnect', () => {
    console.log('- Client disconnected');
    getApiAndEmit(socket);
  });
});

const getApiAndEmit = (socket) => {
  socket.emit('event', io.engine.clientsCount);
};

server.listen(port, () => console.log(`Listening on port ${port}`));

反应

import React from 'react';
import socketIOClient from 'socket.io-client';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      response: false,
      endpoint: 'http://localhost:4001',
    };
  }

  componentDidMount() {
    const { endpoint } = this.state;

    const socket = socketIOClient(endpoint);

    socket.on('event', (data) => this.setState({ response: data }));
  }

  render() {
    const { response } = this.state;

    return (
      <p>{response ? <p>Active Users {response}</p> : <p>Loading...</p>}</p>
    );
  }
}

export default App;

标签： node.jsreactjssocket.io

解决方案

我认为问题在于您使用了错误的发射类型。看看这个备忘单：https ://socket.io/docs/emit-cheatsheet/

如果使用socket.emit()，socketio 仅将事件发送到单个连接的客户端，如果使用socket.broadcast.emit()，它将向除发送者之外的每个客户端发出事件，如果使用io.emit()，它将向每个客户端发出事件。

所以我认为你的代码应该是这样的：

io.on('connection', (socket) => {
  io.emit('event', io.engine.clientsCount);

  socket.on('disconnect', () => {
    socket.broadcast.emit('event', io.engine.clientsCount);
  });
});

推荐阅读