There is no nonsense in the whole article.
Realize the global websocket of the WeChat applet,
including disconnection reconnection, heartbeat keep alive and other mechanisms, which can be used as reference examples
app.js
// websocket连接地址
let wsUrl = "ws://192.168.100.20:8080/websocket";
App({
"globalData": {
"userInfo": wx.getStorageSync('userInfo'),
// websocket
websocket: null, // 连接对象
connectStatus: null, // 连接状态
heartbeatInterval: null, // 心跳定时器
dropReconnectInterval: null, // 掉线重连定时器
messageCallback: function() {
}, // 接收到消息函数
},
// ------------------------------- websocket -------------------------------
/* 打开小程序 */
onShow() {
// TODO 自行校验业务逻辑，验证登录等
// ......
// 连接socket
this.connectSocket();
},
/* 关闭小程序 */
onHide() {
const websocket = this.globalData.websocket,
heartbeatInterval = this.globalData.heartbeatInterval,
dropReconnectInterval = this.globalData.dropReconnectInterval;
// 关闭全局定时器
if (heartbeatInterval) clearInterval(heartbeatInterval);
if (dropReconnectInterval) clearInterval(dropReconnectInterval);
// 关闭socket
if (websocket) websocket.close();
this.globalData.websocket = null;
this.globalData.connectStatus = "quit";
this.globalData.heartbeatInterval = null;
this.globalData.dropReconnectInterval = null;
},
/* 连接socket */
connectSocket() {
const that = this, userInfo = this.globalData.userInfo;
this.globalData.connectStatus = null;
const websocket = wx.connectSocket({
url: wsUrl, timeout: 20000, header: {
'authorization': userInfo.token} });
websocket.onOpen(() => {
that.globalData.connectStatus = "success";
// 保活心跳
wx.hideLoading(); that.connectHeatbeat(); });
websocket.onClose(() => {
if (that.globalData.connectStatus != "quit")
that.globalData.connectStatus = "close"; });
websocket.onError(() => {
if (that.globalData.connectStatus != "quit")
that.globalData.connectStatus = "error"; });
// 接收消息事件
websocket.onMessage((res) => that.globalData.messageCallback(res));
this.globalData.websocket = websocket;
// 掉线重连检测
this.dropReconnect();
},
/* websocket掉线重连 */
dropReconnect: function() {
const dropReconnectInterval = this.globalData.dropReconnectInterval;
if (dropReconnectInterval) clearInterval(dropReconnectInterval);
this.globalData.dropReconnectInterval = setInterval((that) => {
const connectStatus = that.globalData.connectStatus;
if (connectStatus == null || connectStatus == "success") return;
// 掉线重连
wx.showLoading({
title: '掉线重连中...' });
clearInterval(that.globalData.dropReconnectInterval);
that.connectSocket();
}, 1000, this);
},
/* websocket心跳 */
connectHeatbeat() {
const heartbeatInterval = this.globalData.heartbeatInterval;
if (heartbeatInterval) clearInterval(heartbeatInterval);
// 保活，每3秒ping一次
this.globalData.heartbeatInterval = setInterval((that) => {
if (that.globalData.connectStatus == "quit")
clearInterval(that.globalData.heartbeatInterval);
else if (that.globalData.connectStatus == "success")
that.globalData.websocket.send({
data: 'ping' });
}, 3000, this);
},
/* 发送websocket消息 */
sendWebsocket(msg) {
const websocket = this.globalData.websocket,
connectStatus = this.globalData.websocket;
if (!websocket || connectStatus != 'success') return false;
websocket.send({
data: msg }); return true;
},
// ------------------------------- websocket -------------------------------
})
calling method
send a message
app.sendWebsocket('我是消息内容');
receive message
app.globalData.messageCallback = (res) => {
console.log("接收到websocket消息", res.data);
// TODO 执行后续业务逻辑
// ......
}