我把小程序WebSocket的一些功能封裝成一個類坦喘，里面包括建立連接盲再、監(jiān)聽消息、發(fā)送消息瓣铣、心跳檢測答朋、斷線重連等等常用的功能。
export default class websocket {
constructor({ heartCheck, isReconnection }) {
// 是否連接
this._isLogin = false;
// 當前網(wǎng)絡(luò)狀態(tài)
this._netWork = true;
// 是否人為退出
this._isClosed = false;
// 心跳檢測頻率
this._timeout = 3000;
this._timeoutObj = null;
// 當前重連次數(shù)
this._connectNum = 0;
// 心跳檢測和斷線重連開關(guān)棠笑，true為啟用梦碗，false為關(guān)閉
this._heartCheck = heartCheck;
this._isReconnection = isReconnection;
this._onSocketOpened();
}
// 心跳重置
_reset() {
clearTimeout(this._timeoutObj);
return this;
}
// 心跳開始
_start() {
let _this = this;
this._timeoutObj = setInterval(() => {
wx.sendSocketMessage({
// 心跳發(fā)送的信息應(yīng)由前后端商量后決定
data: JSON.stringify({
"key": 'value'
}),
success(res) {
console.log(res)
console.log("發(fā)送心跳成功");
},
fail(err) {
console.log(err)
_this._reset()
}
});
}, this._timeout);
}
// 監(jiān)聽websocket連接關(guān)閉
onSocketClosed(options) {
wx.onSocketClose(err => {
console.log('當前websocket連接已關(guān)閉,錯誤信息為:' + JSON.stringify(err));
// 停止心跳連接
if (this._heartCheck) {
this._reset();
}
// 關(guān)閉已登錄開關(guān)
this._isLogin = false;
// 檢測是否是用戶自己退出小程序
if (!this._isClosed) {
// 進行重連
if (this._isReconnection) {
this._reConnect(options)
}
}
})
}
// 檢測網(wǎng)絡(luò)變化
onNetworkChange(options) {
wx.onNetworkStatusChange(res => {
console.log('當前網(wǎng)絡(luò)狀態(tài):' + res.isConnected);
if (!this._netWork) {
this._isLogin = false;
// 進行重連
if (this._isReconnection) {
this._reConnect(options)
}
}
})
}
_onSocketOpened() {
wx.onSocketOpen(res => {
console.log('websocket已打開');
// 打開已登錄開關(guān)
this._isLogin = true;
// 發(fā)送心跳
if (this._heartCheck) {
this._reset()._start();
}
// 發(fā)送登錄信息
wx.sendSocketMessage({
// 這里是第一次建立連接所發(fā)送的信息，應(yīng)由前后端商量后決定
data: JSON.stringify({
"key": 'value'
})
})
// 打開網(wǎng)絡(luò)開關(guān)
this._netWork = true;
})
}
// 接收服務(wù)器返回的消息
onReceivedMsg(callBack) {
wx.onSocketMessage(msg => {
if (typeof callBack == "function") {
callBack(msg)
} else {
console.log('參數(shù)的類型必須為函數(shù)')
}
})
}
// 建立websocket連接
initWebSocket(options) {
let _this = this;
if (this._isLogin) {
console.log("您已經(jīng)登錄了");
} else {
// 檢查網(wǎng)絡(luò)
wx.getNetworkType({
success(result) {
if (result.networkType != 'none') {
// 開始建立連接
wx.connectSocket({
url: options.url,
success(res) {
if (typeof options.success == "function") {
options.success(res)
} else {
console.log('參數(shù)的類型必須為函數(shù)')
}
},
fail(err) {
if (typeof options.fail == "function") {
options.fail(err)
} else {
console.log('參數(shù)的類型必須為函數(shù)')
}
}
})
} else {
console.log('網(wǎng)絡(luò)已斷開');
_this._netWork = false;
// 網(wǎng)絡(luò)斷開后顯示model
wx.showModal({
title: '網(wǎng)絡(luò)錯誤',
content: '請重新打開網(wǎng)絡(luò)',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用戶點擊確定')
}
}
})
}
}
})
}
}
// 發(fā)送websocket消息
sendWebSocketMsg(options) {
wx.sendSocketMessage({
data: options.data,
success(res) {
if (typeof options.success == "function") {
options.success(res)
} else {
console.log('參數(shù)的類型必須為函數(shù)')
}
},
fail(err) {
if (typeof options.fail == "function") {
options.fail(err)
} else {
console.log('參數(shù)的類型必須為函數(shù)')
}
}
})
}
// 重連方法蓖救，會根據(jù)時間頻率越來越慢
_reConnect(options) {
let timer, _this = this;
if (this._connectNum < 20) {
timer = setTimeout(() => {
this.initWebSocket(options)
}, 3000)
this._connectNum += 1;
} else if (this._connectNum < 50) {
timer = setTimeout(() => {
this.initWebSocket(options)
}, 10000)
this._connectNum += 1;
} else {
timer = setTimeout(() => {
this.initWebSocket(options)
}, 450000)
this._connectNum += 1;
}
}
// 關(guān)閉websocket連接
closeWebSocket(){
wx.closeSocket();
this._isClosed = true;
}
}
使用方法
在app.js里面引入洪规，然后在onLaunch里面創(chuàng)建
import websocket from './utils/wechat-websocket.js'
//app.js
App({
onLaunch() {
let _this = this;
// 創(chuàng)建websocket對象
this.websocket = new websocket({
// true代表啟用心跳檢測和斷線重連
heartCheck: true,
isReconnection: true
});
// 建立連接
this.linkWebsocket();
// 監(jiān)聽websocket狀態(tài)
this.websocket.onSocketClosed({
url: this.globalData.websocketUrl,
success(res) { console.log(res) },
fail(err) { console.log(err) }
})
// 監(jiān)聽網(wǎng)絡(luò)變化
this.websocket.onNetworkChange({
url: this.globalData.websocketUrl,
success(res) { console.log(res) },
fail(err) { console.log(err) }
})
// 監(jiān)聽服務(wù)器返回
this.websocket.onReceivedMsg(result => {
console.log('app.js收到服務(wù)器內(nèi)容：' + result.data);
// 要進行的操作
})
},
onHide(){
// 程序后臺后的操作--關(guān)閉websocket連接
this.websocket.closeWebSocket();
},
onShow(){
// 程序從后臺到前臺的操作--建立連接
this.linkWebsocket();
}.
linkWebsocket() {
// 建立連接
this.websocket.initWebSocket({
url: this.globalData.websocketUrl,
success(res) { console.log(res) },
fail(err) { console.log(err) }
})
},
getWebSocket() {
// 向其他頁面暴露當前websocket連接
return this.websocket;
},
globalData: {
websocketUrl: 'wss://xxx.com/websocket'
}
})
