在react中使用websocket不需要引入其他库,只需要创建一个公共组件,封装一下websocket
创建公共组件
websocket.js
let websocket, lockReconnect = false;
let createWebSocket = (url) => {
websocket = new WebSocket(url);
websocket.onopen = function () {
heartCheck.reset().start();
}
websocket.onerror = function () {
reconnect(url);
};
websocket.onclose = function (e) {
console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
}
websocket.onmessage = function (event) {
lockReconnect=true;
//event 为服务端传输的消息,在这里可以处理
}
}
let reconnect = (url) => {
if (lockReconnect) return;
//没连接上会一直重连,设置延迟避免请求过多
setTimeout(function () {
createWebSocket(url);
lockReconnect = false;
}, 4000);
}
let heartCheck = {
timeout: 60000, //60秒
timeoutObj: null,
reset: function () {
clearInterval(this.timeoutObj);
return this;
},
start: function () {
this.timeoutObj = setInterval(function () {
//这里发送一个心跳,后端收到后,返回一个心跳消息,
//onmessage拿到返回的心跳就说明连接正常
websocket.send("HeartBeat");
}, this.timeout)
}
}
//关闭连接
let closeWebSocket=()=> {
websocket && websocket.close();
}
export {
websocket,
createWebSocket,
closeWebSocket
};
在react组件中的使用
1、react 函数组件的使用
import {createWebSocket,closeWebSocket} from './websocket';
const Element=(param)=>{
useEffect(()=>{
let url="";//服务端连接的url
createWebSocket(url)
//在组件卸载的时候,关闭连接
return ()=>{
closeWebSocket();
}
})
}
2、react 类组件中的使用
import {createWebSocket,closeWebSocket} from './websocket';
....
componentDidMount(){
let url="";//服务端连接的url
createWebSocket(url)
}
componentWillUnmount(){
closeWebSocket();
}
....
如果一个连接,推送不同的消息如何处理?
1、需要安装 pubsub-js
2、修改webscocket.js 获取消息的代码
import { PubSub } from 'pubsub-js';
...
websocket.onmessage = function (event) {
lockReconnect=true;
//event 为服务端传输的消息,在这里可以处理
let data=JSON.parse(event.data);//把获取到的消息处理成字典,方便后期使用
PubSub.publish('message',data); //发布接收到的消息 'message' 为发布消息的名称,data 为发布的消息
}
...
3、在组件中的使用
函数组件中的使用(在类组件中类似)
import { PubSub } from 'pubsub-js';
useEffect(()=>{
//订阅 'message' 发布的发布的消息
messageSocket = PubSub.subscribe('message', function (topic,message) {
//message 为接收到的消息 这里进行业务处理
})
//卸载组件 取消订阅
return ()=>{
PubSub.unsubscribe(messageSocket);
}
}