Question

我想创建一个基于Websocket的客户端 - 服务器应用程序。在那里，我创建了节点js websocket服务器，它等待客户端。现在我想创建react js websocket客户端。我使用react js作为websocket，因为我必须连续渲染哪些服务器作为简单的文本消息发送。

我很擅长将react js作为websocket客户端实现。它应该如何作为websocket客户端以及如何将请求发送到websocket服务器，如下所示：

'ws://localhost:1234'

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

Answer 1

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

引用websocket连接的组件
连接上的事件侦听器，用于更新组件的状态消息到达时

~~演示：http://jsfiddle.net/69z2wepo/47360/~~
演示（2018年）：http://jsfiddle.net/n8Lgq1jz/

const Echo = React.createClass({
  getInitialState(){
    return { messages : [] }
  },
  componentDidMount(){
    // this is an "echo" websocket service for testing pusposes
    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: sending a message to the echo service every 2 seconds, 
    // the service sends it right back
    setInterval( _ =>{
        this.connection.send( Math.random() )
    }, 2000 )
  },
  render: function() {
    // render the messages from state:
    return <ul>{ this.state.messages.map( (msg, idx) => <li key={'msg-' + idx }>{ msg }</li> )}</ul>;
  }
});

Answer 2

只需从服务器端创建休息程序并在网页上创建连接。

var connection = new WebSocket('ws://localhost/echo', ['soap', 'xmpp']);

opening the connection 
connection.onopen = function () {
  connection.send('Ping'); // 
};


connection.onerror = function (error) {
  console.log('WebSocket Error ' + error);
};

//to receive the message from server
connection.onmessage = function (e) {
  console.log('Server: ' + e.data);
};

// Sending String  
connection.send('your message');

在服务器端，您将获得会话和消息，因此您可以与N个会话进行通信。

Answer 3

在App.js的react Project文件夹中添加一个websocket连接并监听来自websocket服务器的消息。

__cxx11

}

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

3 个答案: