微信小程序全局websocket

  • 微信小程序全局websocket已关闭评论
  • 18 次浏览
  • A+
所属分类:Web前端
摘要

在微信小程序中,我们自己写的聊天室,用到websocket时在单页面创建ws ,重复与服务器创建连接占用资源的同时也影响效率,所以就是使用了全局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()