uniapp中websokcet封裝和使用

1.  websocket.js   封裝代碼

//是否已經連接上ws
let isOpenSocket = false
//心跳間隔，單位毫秒
let heartBeatDelay = 3000
let heartBeatInterval = null
//心跳時發送的消息文本
let heartBeatText = "PING"
//最大重連次數
let reconnectTimes = 10
let reconnectInterval = null
//重連間隔，單位毫秒
let reconnectDelay = 3000

let wsUrl = "ws://xxxxxxxxxxxx" //ws請求  或者  wss
let socketTask = null

//這個參數是防止重連失敗之后onClose方法會重復執行reconnect方法，導致重連定時器出問題
//連接並打開之后可重連，且只執行重連方法一次
let canReconnect = false

//封裝的對象，最后以模塊化向外暴露，
//init方法 初始化socketTask對象
//completeClose方法 完全將socketTask關閉（不重連）
//其他關於socketTask的方法與uniapp的socketTask api一致
let ws = {
    socketTask: null,
    init,
    completeClose,
    send
}

function init() {
    socketTask = uni.connectSocket({
        url: wsUrl,
        complete: (res)=> {console.log("WebSocket連接成功",res)}
    })
    socketTask.onOpen((res) => {
        console.log("WebSocket連接已打開",res)
        clearInterval(heartBeatInterval)
        clearInterval(reconnectInterval)
        isOpenSocket = true
        canReconnect = true
        //開啟心跳機制  向websocket發送數據，json格式，參數：sceneId
        heartBeat()
    })
    socketTask.onMessage((res) => {
        // 每次返回的數據不一樣,需要加入判斷
        console.log('收到服務器內容',JSON.parse(res.data))
        let result = JSON.parse(res.data)
　　　　 //這邊可以根據推送的數據, 做相應的 do somethings, 根據自己需求, 下面只是例子..
        // token存在,說明,小程序用戶點擊了授權(比如推送的數據有token,那就做什么事xxxx if(result.token){ uni.setStorageSync('token', result.token) uni.setStorageSync('userInfo', JSON.stringify(result.userInfo)) } // client_id存在,說明連websocket接成功 if(result.msg=="連接成功"){ uni.setStorageSync('client_id', result.data.client_id); } // JSON.parse(res.data).msg=="已歸還導覽機", 已歸還導覽機,清空用戶緩存 if(result.msg=="已歸還導覽機"){ // 返回首頁,清空數據 uni.clearStorageSync(); uni.navigateBack({ delta: 100 }) }

    })
    socketTask.onClose(() => {
        if(isOpenSocket){
            console.log("ws與服務器斷開")
        }else{
            console.log("連接失敗")
        }
        isOpenSocket = false
        if(canReconnect){
            reconnect()
            canReconnect = false
        }
    })
    ws.socketTask = socketTask
}

function heartBeat() {
    heartBeatInterval = setInterval(() => {
        // console.log(heartBeatText)
        uni.getSystemInfo({
            success: function (res) {
                console.log('設備id----',res.deviceId);//設備id
                uni.setStorageSync('deviceId', res.deviceId)
                let obj = {
                    sceneId:res.deviceId
                }
                send(JSON.stringify(obj));
            }
        });
        
    }, heartBeatDelay)
}

// 發送消息
function send(value) {
    ws.socketTask.send({
        data: value,
        async success(res) {
            console.log("消息發送成功",res)
        }
    });
}
function reconnect() {
    //停止發送心跳
    clearInterval(heartBeatInterval)
    //如果不是人為關閉的話，進行重連
    if (!isOpenSocket) {
        let count = 0;
        reconnectInterval = setInterval(() => {
            console.log("正在嘗試重連")
            init();
            count++
            //重連一定次數后就不再重連
            if(count >= reconnectTimes){
                clearInterval(reconnectInterval)
                console.log("網絡異常或服務器錯誤")
            }
        }, reconnectDelay)
    }
}
function completeClose(){
    //先將心跳與重連的定時器清除
    clearInterval(heartBeatInterval)
    clearInterval(reconnectInterval)
    canReconnect = false
    ws.socketTask.close()
}

module.exports = ws

2. 使用時在main.js引入並綁定在Vue的prototype上，這樣就可以做到全局變量了
main.js

 

import ws from 'ws.js' //找好自己的路徑
Vue.prototype.$ws = ws

 

3. 頁面調用

比如在 A頁面調用

onLoad() {
        let _this = this;
        _this.$ws.init()//初始化websocket
}

4. 里面封裝的  send方法等也都可以用  // this.$ws.send(JSON.stringify(obj))

 

更多參考鏈接