- A+
所属分类：Web前端
在微信小程序中，我们自己写的聊天室，用到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()
