一.如何引用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;
}}
/>