reactjs - React js 如何充当 websocket 客户端？

Question

我想创建一个基于 Websocket 的客户端-服务器应用程序。我创建了正在等待客户端的 Node js WebSocket 服务器。现在我想创建react js websocket客户端。我使用 React js 作为 websocket，因为我必须连续渲染服务器作为简单文本消息发送的元素。

我对将 React js 作为 websocket 客户端实现感到震惊。它应该如何作为 websocket 客户端工作以及如何将请求发送到 websocket 服务器，如下所示:

'ws://localhost:1234'

我想了解更多有关 websocket 客户端的信息，也想解决这个问题？

Answer 1

因此，一个没有太多开销的非常基本的示例需要两件事:

1. 引用 websocket 连接的组件

2. 连接上更新组件状态的事件监听器当消息到达时

演示: http://jsfiddle.net/69z2wepo/47360/
演示(2019): http://jsfiddle.net/643atLce/

class Echo extends React.Component {
    constructor(props){
    super(props);
    this.state = { messages : [] }
  }

  componentDidMount(){
    // this is an "echo" websocket service
    this.connection = new WebSocket('wss://echo.websocket.org');
    // listen to onmessage event
    this.connection.onmessage = evt => { 
      // add the new message to state
        this.setState({
        messages : this.state.messages.concat([ evt.data ])
      })
    };

    // for testing purposes: sending to the echo service which will send it back back
    setInterval( _ =>{
        this.connection.send( Math.random() )
    }, 2000 )
  }

  render() {
    // slice(-5) gives us the five most recent messages
    return <ul>{ this.state.messages.slice(-5).map( (msg, idx) => <li key={'msg-' + idx }>{ msg }</li> )}</ul>;
  }
};