React中使用react-websocket_家有睿少_react websocket

大大的周 02-07 1802

react-websocket 安装 npm install --save react-websocket 用法 ? import?Websocket?from?'react-websocket';

这里引入的是根目录下index.jsx，如果需要引入js文件可以使用

import Websocket from 'react-websocket/build/index';

render() { return ( …… <Websocket url={'ws://127.0.0.1:9995'} onMessage={this.onMessage.bind(this)} ref={Websocket => this.refWebSocket = Websocket} /> …… ) } /* * @desc:接收服务端数据时触发 */ onMessage = (data) => { console.log(data) }

?这样可以在页面加载向服务端建立连接，在向连接发送数据时，希望是已经建立连接，这就需要通过Socket.readyState属性判断连接状态。

react-websocket并没有提供很方便的方法或回调让我们判断该状态，通过this.refWebSocket.state.ws.readyState判断连接状态，如果没连接成功可以多次尝试或给出友好提示。

/* * @desc:读取身份证信息 */ readCard = () => { let readyState = this.getSocketReadyState(); if (readyState == 1) { console.log('【开始读取】') const params = { module: 'idcard', function: 'readcard', parameter: { dev: '1', repeat: '1', readtype: '1' } } this.refWebSocketIDCard.sendMessage(JSON.stringify(params)); } else { this.timeout = setTimeout(this.readCard, 2000); } } /* * @desc:webSocket链接状态 */ getSocketReadyState = () => { let readyState = this.refWebSocket.state.ws.readyState switch (readyState) { case 0: console.log('【身份证服务链接状态】', '连接尚未建立'); break; case 1: console.log('【身份证服务链接状态】', '连接已建立，可以进行通信'); break; case 2: console.log('【身份证服务链接状态】', '正在进行关闭'); break; case 3: console.log('【身份证服务链接状态】', '连接已经关闭或者连接不能打开'); //这里可以处理一些连接失败的业务片段 break; } return readyState; }

GitHub - mehmetkose/react-websocket: Easy-to-use React component for websocket communications.https://github.com/mehmetkose/react-websocketreact-websocket - npmhttps://·/package/react-websocket

WebSocket属性、事件、方法如下：

?截图来自：HTML5 WebSocket | 菜鸟教程