使用 React / Websockets 渲染用户数

Posted 2023-02-16

【中文标题】使用 React / Websockets 渲染用户数

【英文标题】：Render User Count With React / Websockets

【发布时间】：2018-02-21 02:50:05

【问题描述】：

我有一个服务器文件，它在这里使用 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>
    );
  

【问题讨论】：

使用的是什么SocketServer 类？

@Aaron 考虑使用connection 类

【参考方案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 包。

【讨论】：

感谢您的回答。 clientCountObservable 究竟来自哪里？我必须自己做吗？

您可以创建自己的 Observable 类。有很多方法可以创建它。