uni-app中websocket的使用 斷開重連、心跳機制
2022-11-23 加入收藏
前言
最近關(guān)于H5和APP的開發(fā)中使用到了webSocket，由于web/app有時候會出現(xiàn)網(wǎng)絡(luò)不穩(wěn)定或者服務(wù)端主動斷開，這時候?qū)е孪⑼扑筒涣说那闆r，需要客戶端進行重連。查閱資料后發(fā)現(xiàn)了一個心跳機制，也就是客戶端間隔一段時間就向服務(wù)器發(fā)送一條消息，如果服務(wù)器收到消息就回復(fù)一條信息過來，如果一定時間內(nèi)沒有回復(fù)，則表示已經(jīng)與服務(wù)器斷開連接了，這個時候就需要進行重連。
被動斷開則進行重連，主動斷開的不重連。
說明：下圖針對兩個Tab項（Open Trades 和 Closed Trades），只希望在 tabIndex = 0 （Open Trades 高亮?xí)r）觸發(fā)webSocket , 如果點擊第二個欄目 , tabIndex = 1（Closed Trades高亮?xí)r）則主動關(guān)閉webSodket連接。
TabIndex = 0 時 ，被動斷開則自動重連
原文鏈接：uni-app中websocket的使用 斷開重連、心跳機制[1]
效果
1. webScoket連接并接收推送的消息
2. 將接收的消息轉(zhuǎn)換成目標數(shù)據(jù)，并渲染
3. 如果主動關(guān)閉，則不進行重連，監(jiān)聽關(guān)閉事件
4. 顯示已關(guān)閉，不重連
5. 監(jiān)聽錯誤事件，比如地址，協(xié)議錯誤等，則會自動重連五次，五次重連仍失敗后則需要進行手動重連
6. 如果服務(wù)端主動斷開，心跳機制會每隔一段時間發(fā)送一條數(shù)據(jù)給服務(wù)端，如果沒有回復(fù)則會進行webScoket重連。
代碼
1. 新建 socket.js ， 將以下代碼復(fù)制進去 ，向外暴露。
import api from '@/common/js/config.js' // 接口Api，圖片地址等等配置，可根據(jù)自身情況引入，也可以直接在下面url填入你的 webSocket連接地址
class socketIO {
constructor(data, time, url) {
this.socketTask = null
this.is_open_socket = false //避免重復(fù)連接
this.url = url ? url : api.websocketUrl //連接地址
this.data = data ? data : null
this.connectNum = 1 // 重連次數(shù)
this.traderDetailIndex = 100 // traderDetailIndex ==2 重連
this.accountStateIndex = 100 // accountStateIndex ==1 重連
this.followFlake = false // followFlake == true 重連
//心跳檢測
this.timeout = time ? time : 15000 //多少秒執(zhí)行檢測
this.heartbeatInterval = null //檢測服務(wù)器端是否還活著
this.reconnectTimeOut = null //重連之后多久再次重連
}
// 進入這個頁面的時候創(chuàng)建websocket連接【整個頁面隨時使用】
connectSocketInit(data) {
this.data = data
this.socketTask = uni.connectSocket({
url: this.url,
success: () => {
console.log("正準備建立websocket中...");
// 返回實例
return this.socketTask
},
});
this.socketTask.onOpen((res) => {
this.connectNum = 1
console.log("WebSocket連接正常！");
this.send(data)
clearInterval(this.reconnectTimeOut)
clearInterval(this.heartbeatInterval)
this.is_open_socket = true;
this.start();
// 注：只有連接正常打開中 ，才能正常收到消息
this.socketTask.onMessage((e) => {
// 字符串轉(zhuǎn)json
let res = JSON.parse(e.data);
console.log("res---------->", res) // 這里 查看 推送過來的消息
if (res.data) {
uni.$emit('getPositonsOrder', res);
}
});
})
// 監(jiān)聽連接失敗，這里代碼我注釋掉的原因是因為如果服務(wù)器關(guān)閉后，和下面的onclose方法一起發(fā)起重連操作，這樣會導(dǎo)致重復(fù)連接
uni.onSocketError((res) => {
console.log('WebSocket連接打開失敗，請檢查！');
this.socketTask = null
this.is_open_socket = false;
clearInterval(this.heartbeatInterval)
clearInterval(this.reconnectTimeOut)
uni.$off('getPositonsOrder')
if (this.connectNum < 6) {
uni.showToast({
title: `WebSocket連接失敗，正嘗試第${this.connectNum}次連接`,
icon: "none"
})
this.reconnect();
this.connectNum += 1
} else {
uni.$emit('connectError');
this.connectNum = 1
}
});
// 這里僅是事件監(jiān)聽【如果socket關(guān)閉了會執(zhí)行】
this.socketTask.onClose(() => {
console.log("已經(jīng)被關(guān)閉了-------")
clearInterval(this.heartbeatInterval)
clearInterval(this.reconnectTimeOut)
this.is_open_socket = false;
this.socketTask = null
uni.$off('getPositonsOrder')
if (this.connectNum < 6) {
this.reconnect();
} else {
uni.$emit('connectError');
this.connectNum = 1
}
})
}
// 主動關(guān)閉socket連接
Close() {
if (!this.is_open_socket) {
return
}
this.socketTask.close({
success() {
uni.showToast({
title: 'SocketTask 關(guān)閉成功',
icon: "none"
});
}
});
}
//發(fā)送消息
send(data) {
console.log("data---------->", data);
// 注：只有連接正常打開中 ，才能正常成功發(fā)送消息
if (this.socketTask) {
this.socketTask.send({
data: JSON.stringify(data),
async success() {
console.log("消息發(fā)送成功");
},
});
}
}
//開啟心跳檢測
start() {
this.heartbeatInterval = setInterval(() => {
this.send({
"traderid": 10260,
"type": "Ping"
});
}, this.timeout)
}
//重新連接
reconnect() {
//停止發(fā)送心跳
clearInterval(this.heartbeatInterval)
//如果不是人為關(guān)閉的話，進行重連
if (!this.is_open_socket && (this.traderDetailIndex == 2 || this.accountStateIndex == 0 || this
.followFlake)) {
this.reconnectTimeOut = setInterval(() => {
this.connectSocketInit(this.data);
}, 5000)
}
}
/**
* @description 將 scoket 數(shù)據(jù)進行過濾
* @param {array} array
* @param {string} type 區(qū)分 彈窗 openposition 分為跟隨和我的
*/
arrayFilter(array, type = 'normal', signalId = 0) {
let arr1 = []
let arr2 = []
let obj = {
arr1: [],
arr2: []
}
arr1 = array.filter(v => v.flwsig == true)
arr2 = array.filter(v => v.flwsig == false)
if (type == 'normal') {
if (signalId) {
arr1 = array.filter(v => v.flwsig == true && v.sigtraderid == signalId)
return arr1
} else {
return arr1.concat(arr2)
}
} else {
if (signalId > 0) {
arr1 = array.filter(v => v.flwsig == true && v.sigtraderid == signalId)
obj.arr1 = arr1
} else {
obj.arr1 = arr1
}
obj.arr2 = arr2
return obj
}
}
}
module.exports = socketIO2.在入口文件中 將 socketIO 掛載在 Vue 原型上 ， 也可以按需引入置頂頁面
import socketIO from '@/common/js/scoket.js'
Vue.prototype.socketIo = new socketIO()3.在需要用到webSocket的頁面中使用如下方法（可根據(jù)自身業(yè)務(wù)需求進行整改）
scoketClose() {
this.socketIo.connectNum = 1
const data = {
"value1": "demo1"
"value2": "demo2"
}
this.socketIo.send(data) // 這是給后端發(fā)送特定數(shù)據(jù) 關(guān)閉推送
this.socketIo.Close() // 主動 關(guān)閉連接 ， 不會重連
},
getWebsocketData() {
// 要發(fā)送的數(shù)據(jù)包
const data = {
"value": "value1",
"type": "type1"
}
// 打開連接
this.socketIo.connectSocketInit(data)
// 接收數(shù)據(jù)
uni.$on("getPositonsOrder", (res) => {
this.connect = true
const {
Code,
data
} = res
if (Code == xxxx) {
// 根據(jù)后端傳過來的數(shù)據(jù)進行 業(yè)務(wù)編寫。。。
} else {
}
})
// 錯誤時做些什么
uni.$on("connectError", () => {
this.connect = false
this.scoketError = true
})
}4.離開頁面，記得斷開連接。
onUnload() {
this.scoketClose()
this.socketIo.traderDetailIndex = 100 // 初始化 tabIndex
}