微信小程序全局websocket

在微信小程序中,我们自己写的聊天室,用到websocket时在单页面创建ws ,重复与服务器创建连接占用资源的同时也影响效率,所以就是使用了全局websocket ,创建连接一次不出意外可以一直使用这个实例,废话就不多说了,直接上代码吧!

 

首先创建配置文件

在根目录的 utils(如果没有那就创建一个) 创建 setting.js 文件 ,文件内容如下

/utils/setting.js

module.exports = {
ws
: '', // ws 连接地址 wsDisconnectTime: 3000, // 每次断开连接时间 wsLikeTime: 3000, // ws 心脏包发送的时间 毫秒 }

接下来就是 webSocket主逻辑文件

在根目录的 utils(如果没有那就创建一个) 创建 webSocket.js 文件 ,文件内容如下

/utils/webSocket.js

 var  setting = require('setting.js' );
module.exports
= {
ws: {},
// 实例 wsHeartTime: {}, // 心脏的时间 is_log: 0, // 记录登录次数 eventMap: {}, // 事件字典 on(event,fn){ this .eventMap[event] = fn;
},
emit(event,data){
this .eventMap[event](data)
},
/* *
* 连接
* @param {boolean} count 连接次数
* @param {boolean} type 登录类型 user=用户,admin=admin
* @author: wmq
* @Time: 2022/8/18 13:54
*/ init() {
let that
= this ;
let ws
= wx.connectSocket({
url: setting.ws,
success:e
=> { }
})
ws.onOpen(data
=> {
that.emit(
'onOpen' ,{}) // 先发送一次心脏 ws.send({
data:
'{"controller":"worker","method":"heartbeat","data":""}' });
console.log(
'连接成功' );
that.wsHeart()
})
ws.onError((error)
=> {
console.log(error)
that.wsHeart(
false );
setTimeout(()
=> {
that.init();
}, setting.wsDisconnectTime)
})
ws.onClose((error)
=> {
that.wsHeart(
false );
setTimeout(()
=> {
that.init();
}, setting.wsDisconnectTime)
})
ws.onMessage(data
=> {
data
= JSON.parse(data.data);
console.log(data);
})
that.ws
= ws;
},
/* *
* 心跳检测
* @param boolean status 登录类型 ture开启心跳 false 关闭心跳
* @author: wmq
* @Time: 2022/8/18 13:54
*/ wsHeart(status = true ) {
let that
= this ; if (status) {
that.wsHeartTime
= setInterval( function () {
that.ws.send({
data:
'{"controller":"worker","method":"heartbeat","data":""}' });
}, setting.wsLikeTime)
}
else {
clearInterval(that.wsHeartTime);
}
},

}

接下来配置就是使用方法了

在app.js 中创建实例,并禁用断开事件,断开后重新赋值给全局变量

/app.js

 //  app.js 
 var  ws = require('./utils/webSocket' );
App({
onLaunch() {
ws.init()
// 初始化 ws // 监听断开时间,网咯断开,ws 断开都会执行这个回调 ws.on('onOpen', () => { this .globalData.ws = ws.ws })
},
globalData: {
ws: {},
// ws 实例 }
})

在页面种使用

//在页面最上面先
  const app = getApp()

//在方法中
let ws = app.globalData.ws; // 接受信息 ws.onMessage(data => {
data
= JSON.parse(data.data);
})
// 发送信息 ws.send()

 

标签: Javascript

添加新评论