如何反应js充当websocket客户端？

Question

我想创建一个基于Websocket的客户端 - 服务器应用程序.在那里我创建了节点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/
Demo(2018):http://jsfiddle.net/n8Lgq1jz/

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>;
  }
};