1.创建一个wxsocket.js
import {
connectSocket,
onSocketOpen,
onSocketClose,
sendSocketMessage,
onSocketMessage,
getNetworkType,
closeSocket,
onNetworkStatusChange
} from 'remax/wechat';
class Websocket {
constructor({ heartCheck, isReconnection }) {
this.init = false;
// 是否连接
this.isConnect = false;
// 当前网络状态
this.netWork = true;
// 是否人为退出
this.isClosed = false;
// 心跳检测频率
this.timeout = 3000;
this.timeoutObj = null;
// 当前重连次数
this.connectNum = 0;
// 心跳检测和断线重连开关,true为启用,false为关闭
this.heartCheck = heartCheck;
this.isReconnection = isReconnection;
this.wsUrl = "";
this.onSocketOpened();
}
// 心跳重置
reset () {
clearTimeout(this.timeoutObj);
return this;
}
// 心跳开始
start () {
let self = this;
this.timeoutObj = setInterval(() => {
sendSocketMessage({
// 心跳发送的信息应由前后端商量后决定
data: JSON.stringify({
"beat": 'dj'
}),
success (res) {
// console.log(res)
// console.log("发送心跳成功");
},
fail (err) {
console.log(err);
// this.reConnect(options)
console.log('连接失败');
self.reset();
}
}).then();
}, this.timeout);
}
// 监听websocket连接关闭
onSocketClosed (options) {
onSocketClose(err => {
console.log('当前websocket连接已关闭,错误信息为:' + JSON.stringify(err));
// 停止心跳连接
if (this.heartCheck) {
this.reset();
}
// 关闭已登录开关
this.isConnect = false;
// 检测是否是用户自己退出小程序
if (!this.isClosed) {
// 进行重连
if (this.isReconnection) {
this.reConnect(options);
}
}
});
}
// 检测网络变化
onNetworkChange (options) {
onNetworkStatusChange(res => {
console.log('当前网络状态:' + res.isConnected);
if (!this.netWork) {
this.isConnect = false;
// 进行重连
if (this.isReconnection) {
this.reConnect(options);
}
}
});
}
onSocketOpened (callBack) {
onSocketOpen(res => {
console.log('websocket已打开');
// 打开已登录开关
this.isConnect = true;
// 发送心跳
if (this.heartCheck) {
this.reset().start();
}
// 发送登录信息
sendSocketMessage({
// 这里是第一次建立连接所发送的信息,应由前后端商量后决定
data: JSON.stringify({
"beat": 'dj'
})
}).then();
// 打开网络开关
this.netWork = true;
if (typeof callBack == "function") {
callBack(res);
}
});
}
// 接收服务器返回的消息
onReceivedMsg (callBack) {
onSocketMessage(msg => {
if (typeof callBack == "function") {
callBack(msg);
}
});
}
// 建立websocket连接
initWebSocket (options) {
let self = this;
this.wsUrl = options.url ? options.url : this.wsUrl;
if (this.isConnect) {
console.log("您已连接了");
} else {
// 检查网络
getNetworkType({
success (res) {
if (res.networkType !== 'none') {
// 开始建立连接
connectSocket({
url: self.wsUrl,
success (res) {
if (typeof options.success == "function") {
options.success(res);
}
},
fail (err) {
if (typeof options.fail == "function") {
options.fail(err);
console.log('连接失败');
}
}
});
} else {
console.log('网络已断开');
self.netWork = false;
}
}
}).then();
}
}
// 发送websocket消息
sendWebSocketMsg (options) {
// console.log("send参数:", options)
sendSocketMessage({
data: options.data,
success (res) {
if (options.success && typeof options.success == "function") {
options.success(res);
}
},
fail (err) {
if (options.fail && typeof options.fail == "function") {
options.fail(err);
}
}
}).then();
}
// 重连方法,会根据时间频率越来越慢
reConnect (options) {
let timer, self = this;
if (this.connectNum < 3) {
timer = setTimeout(() => {
this.initWebSocket(options);
}, 3000);
this.connectNum += 1;
} else if (this.connectNum < 10) {
timer = setTimeout(() => {
this.initWebSocket(options);
}, 10000);
this.connectNum += 1;
} else {
timer = setTimeout(() => {
this.initWebSocket(options);
}, 450000);
this.connectNum += 1;
}
}
// 关闭websocket连接
closeWebSocket () {
closeSocket().then();
this.isClosed = true;
this.isConnect = false;
}
}
const websocket = new Websocket({
// true代表启用心跳检测和断线重连
heartCheck: true,
isReconnection: true
});
export default websocket;
2.使用
import websocket from "../../utils/wxsocket";
React.useEffect(() => {
if (token) {
const wsUrl = process.env.NODE_ENV === 'development' ? `wss://test.onemorecar.cn/ws/notify?token=${token}` : `wss://tt.onemorecar.cn/ws/notify?token=${token}`;
if (!websocket.init) {
websocket.initWebSocket({ url: wsUrl });
websocket.onSocketClosed({
url: wsUrl
})
websocket.onNetworkChange({
url: wsUrl
})
websocket.onReceivedMsg(res => {
console.log('app.js收到服务器内容:' + res.data);
const { msg, count, status } = JSON.parse(res.data);
if (count) {
notify.setNotify(count);
}
});
}
}
},[])