微信小程式全域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 實體
      
    }
})

在頁面種使用

//在頁面最上面先

//在方法中
let ws = app.globalData.ws;
//接受資訊
ws.onMessage(data =https://www.cnblogs.com/quan846951943/p/> {
    data = JSON.parse(data.data);
})
//發送資訊
ws.send()

標籤：JavaScript

上一篇：Typora設定代碼塊Mac風格三個圓點

下一篇：手動實作call、apply、bind