Question

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

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()下我配置我的状态，在我的控制台中显示用户名/ conent，但这些信息无关紧要。

在段落标记内的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观察。然后在您的react组件中订阅它的更改。每次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
  }
}

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

使用React / Websockets渲染用户计数

1 个答案: