如何在react中使用websocket

一.如何引用websocket

npm install –save react-websocket

二.在组件中如何使用

1.先封装一个websocket组件

import React from 'react';
import Websocket from 'react-websocket';

class ReactWebsocket extends React.Component {

  handleData(data) {
    this.props.onMessage(data)
  }

  handleOpen(value){
    this.props.onOpen(value);
    // this.refWebSocket.sendMessage(value);
  }

  handleClose() {
    this.props.onClose()
  }

  sendMessage(message){
    this.refWebSocket.sendMessage(message);
  }

  render() {
    const {url,reconnect,debug} =this.props;
    return (
      <Websocket 
        url={url}
        onMessage={this.handleData.bind(this)}
        onOpen={this.handleOpen.bind(this)} 
        onClose={this.handleClose.bind(this)}
        reconnect={reconnect} 
        debug={debug}
        ref={Websocket => {
          this.refWebSocket = Websocket;
        }}/>
    );
  }
}

export default ReactWebsocket;

2.在js文件中导入组件

<ReactWebsocket 
  url='ws://192.168.200.202:9999' 
  onMessage={this.onMessage} //接受信息的回调
  onOpen={this.onOpen} //websocket打开
  onClose={this.onClose} //websocket关闭
  reconnect={true} 
  debug={true}
  ref={Websocket => {
  this.refWebSocket = Websocket;
  }}
/>