231 lines
5.9 KiB
JavaScript
231 lines
5.9 KiB
JavaScript
class webSocketUtils {
|
||
constructor(url, time, params) {
|
||
this.socketTask = null;
|
||
this.is_open_socket = false; //避免重复连接
|
||
this.url = url;
|
||
this.params = params ? params : null; ////是否初始化请求
|
||
this.connectNum = 1; // 重连次数
|
||
//这个参数是防止重连失败之后onClose方法会重复执行reconnect方法，导致重连定时器出问题
|
||
//连接并打开之后可重连，且只执行重连方法一次
|
||
this.canReconnect = false; // 是否可以重连
|
||
//心跳检测
|
||
this.timeout = time ? time : 5000; //多少秒执行检测
|
||
this.heartbeatInterval = null; //检测服务器端是否还活着
|
||
this.reconnectTimeOut = null; //重连之后多久再次重连
|
||
try {
|
||
|
||
return this.connectSocketInit({
|
||
data: this.params,
|
||
type: 'connectSocketInit',
|
||
});
|
||
} catch (e) {
|
||
// console.log('catch');
|
||
this.reconnect();
|
||
}
|
||
}
|
||
// 进入这个页面的时候创建websocket连接【整个页面随时使用】
|
||
connectSocketInit(data) {
|
||
let _this = this;
|
||
this.data = data;
|
||
// #ifdef MP-WEIXIN
|
||
this.socketTask = uni.connectSocket({
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
my.connectSocket({
|
||
// #endif
|
||
url: this.url,
|
||
success: (res) => {
|
||
console.log('创建websocketc成功...');
|
||
// uni.hideLoading();
|
||
// 返回实例
|
||
return this.socketTask;
|
||
},
|
||
fail: (res) => {
|
||
}
|
||
});
|
||
|
||
// #ifdef MP-WEIXIN
|
||
this.socketTask.onOpen((res) => {
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
my.onSocketOpen((res) => {
|
||
// #endif
|
||
uni.hideLoading()
|
||
this.connectNum = 1;
|
||
console.log('WebSocket连接正常！==',res);
|
||
if (this.params) { //是否初始化请求
|
||
this.send(this.params);
|
||
}
|
||
clearInterval(this.reconnectTimeOut);
|
||
clearInterval(this.heartbeatInterval);
|
||
this.is_open_socket = true;
|
||
this.canReconnect = true;
|
||
this.start();
|
||
// 注：只有连接正常打开中 ，才能正常收到消息
|
||
// #ifdef MP-WEIXIN
|
||
this.socketTask.onMessage((e) => {
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
my.onSocketMessage((e)=>{
|
||
// #endif
|
||
// 字符串转json
|
||
let res = JSON.parse(e.data);
|
||
uni.$emit('message', res)
|
||
// 普通socket信息处理 TODO
|
||
});
|
||
});
|
||
|
||
// 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接
|
||
// #ifdef MP-WEIXIN
|
||
uni.onSocketError((res) => {
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
my.onSocketError((res) => {
|
||
// #endif
|
||
console.log('网络断开，请检查！');
|
||
this.socketTask = null;
|
||
this.is_open_socket = false;
|
||
// this.Close()
|
||
this.canReconnect = true;
|
||
clearInterval(this.heartbeatInterval);
|
||
clearInterval(this.reconnectTimeOut);
|
||
try {
|
||
if (this.connectNum <= 10) {
|
||
// uni.showLoading({
|
||
// title: `网络连接失败，正尝试第${this.connectNum}次连接`,
|
||
// mask: true
|
||
// })
|
||
uni.$emit('message', 1) //进行重连
|
||
uni.showToast({
|
||
title: `网络连接失败，正尝试第${this.connectNum}次连接`,
|
||
icon: 'none',
|
||
});
|
||
this.reconnect();
|
||
this.connectNum += 1;
|
||
} else {
|
||
// uni.$emit('connectError');
|
||
uni.showToast({
|
||
title: `网络连接失败，请检查网络！`,
|
||
icon: 'none',
|
||
});
|
||
this.connectNum = 1;
|
||
this.canReconnect = false;
|
||
this.Close()
|
||
setTimeout(res => {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
uni.hideLoading()
|
||
}, 1000)
|
||
}
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
});
|
||
// 这里仅是事件监听【如果socket关闭了会执行】
|
||
// #ifdef MP-WEIXIN
|
||
this.socketTask.onClose(() => {
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
my.onSocketClose((res) => {
|
||
// #endif
|
||
console.log("socket关闭了")
|
||
this.socketTask = null;
|
||
clearInterval(this.heartbeatInterval);
|
||
clearInterval(this.reconnectTimeOut);
|
||
// #ifdef MP-ALIPAY
|
||
// 支付宝小程序的ws连接问题，关闭连接时需关闭对于接受，防止关闭失败
|
||
my.offSocketMessage();
|
||
my.offSocketError();
|
||
my.offSocketOpen();
|
||
my.offSocketClose();
|
||
// #endif
|
||
this.is_open_socket = false;
|
||
if (this.canReconnect) {
|
||
this.reconnect();
|
||
this.canReconnect = false;
|
||
}
|
||
});
|
||
}
|
||
// 主动关闭socket连接
|
||
Close() {
|
||
this.is_open_socket = true;
|
||
this.canReconnect = false;
|
||
|
||
// #ifdef MP-WEIXIN
|
||
if (this.socketTask) {
|
||
this.socketTask.close({
|
||
success(res) {
|
||
console.log('手动关闭成功');
|
||
},
|
||
});
|
||
}
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
my.closeSocket({
|
||
success(res) {
|
||
console.log('手动关闭成功');
|
||
// #ifdef MP-ALIPAY
|
||
// 支付宝小程序的ws连接问题，关闭连接时需关闭对于接受，防止关闭失败
|
||
my.offSocketMessage();
|
||
my.offSocketError();
|
||
my.offSocketOpen();
|
||
my.offSocketClose();
|
||
// #endif
|
||
|
||
},
|
||
fail: (res) => {
|
||
console.log('手动关闭失败==',res);
|
||
}
|
||
});
|
||
// #endif
|
||
}
|
||
//发送消息
|
||
send(data) {
|
||
// console.log("发送消息---------->", data);
|
||
// 注：只有连接正常打开中 ，才能正常成功发送消息
|
||
|
||
// #ifdef MP-WEIXIN
|
||
if (this.socketTask) {
|
||
this.socketTask.send({
|
||
data: JSON.stringify(data),
|
||
async success() {
|
||
// console.log("消息发送成功");
|
||
},
|
||
});
|
||
}
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
my.sendSocketMessage({
|
||
data: JSON.stringify(data),
|
||
success(res) {
|
||
// console.log("消息发送成功");
|
||
},
|
||
});
|
||
// #endif
|
||
}
|
||
//开启心跳检测
|
||
start(data) {
|
||
// console.log('开启心跳检测', data)
|
||
this.heartbeatInterval = setInterval(() => {
|
||
this.send({
|
||
data: '心跳检测',
|
||
type: 'heartbeat',
|
||
});
|
||
}, this.timeout);
|
||
}
|
||
//重新连接
|
||
reconnect() {
|
||
//停止发送心跳
|
||
clearInterval(this.heartbeatInterval);
|
||
//如果不是人为关闭的话，进行重连
|
||
if (!this.is_open_socket) {
|
||
console.log('进行重连');
|
||
this.canReconnect = true;
|
||
this.reconnectTimeOut = setInterval(() => {
|
||
this.connectSocketInit(this.data);
|
||
}, this.timeout);
|
||
}
|
||
}
|
||
}
|
||
module.exports = webSocketUtils; |