使用 React / Websockets 渲染用户数

Question

我有一个服务器文件，它在这里使用 Websockets 发送数据。如您所见，我有一个计数器，我定义为clientCount，我想根据连接到我的主机的用户数量来增加/减少它。到目前为止，我能够在我的控制台中显示连接，但不能在我的 React 应用程序中显示。

const wss = new SocketServer({ server });

let clientCount = 0;

wss.on('connection', (ws) => {
  console.log('Client connected');
  clientCount++;

  console.log(clientCount);

  ws.on('message', (message) => {
    console.log('Message from client', message);

    let parsedMessage = JSON.parse(message);

    parsedMessage.id = uuid();
    console.log(message); 

    wss.clients.forEach(function each(client) { 
      if (client.readyState === ws.OPEN) {
        client.send(JSON.stringify(parsedMessage));
      }
    });
  });

  ws.on('close', () => {
    console.log('Client disconnected');
    clientCount--;
  });

}); 

在我的 React 应用程序中，在我的 componentDidMount() 下，我正在配置我的状态以使用用户名/内容显示在我的控制台中，但这是不相关的信息。

在我的render 在段落标记内调用中，我想在该字段中显示在线用户数量，并在每次连接到主机时更新，然后断开连接。如何显示这些信息？

componentDidMount() {

    this.socket = new WebSocket("ws://localhost:3001")

    this.socket.onmessage = (event) => {

      let message = JSON.parse(event.data)

      this.setState({
        messages: this.state.messages.concat([{
          username: message.username,
          content: message.content,
          id: message.id
        }])
      })

      console.log(JSON.parse(event.data));
    }
}

  render() {
    const {currentUser, messages} = this.state

    return (
      <div>
        <nav className="navbar">
          <a href="/" className="navbar-brand">Chatty</a>
          <p>RENDER USER COUNT HERE</p>
        </nav>

        <MessageList messages={messages} />      
        <ChatBar userProp={currentUser.name} messages={messages} submitMessage={this.newMessage}/>
      </div>
    );
  }
}

Answer 1

您可以使clientCount 可观察。然后在你的反应组件中订阅它的变化。每次clientCount 更改时，使用 setState 触发视图更新。

喜欢这个

class YourComp extends Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }    
  }

  onCountChange = (newCount) => {
    this.setState({ count: newCount})
  }

  componentDidMount() {
    clientCountObservable.subscribe(this.onCountChange)
  }

  componentWillUnmount() {
    clientCountObservable.unsubscribe(this.onCountChange)
  }
}

一个简单的 Observable 就像

class Observable {
  constructor(value) {
    this.value = value
    this.subscribers = []
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber)
  }

  unsubscribe(subscriber) {
    const index = this.subscribers.indexOf(subscriber)
    if (index > -1) {
      this.subscribers.splice(index, 1)
    }
  }

  setValue(value) {
    this.value = value

    this.subscribers.forEach(sb => sb(value))
  }

  getValue() {
    return this.value
  }
}

您可以创建自己的 observable 类，或使用其他一些 npm 包。