小程序websocket心跳庫——websocket-heartbeat-miniprogram

時間 2020-02-23

標籤程序 websocket 心跳 heartbeat miniprogram 欄目應用監控简体版

原文原文鏈接

前言

在16年的時候由於項目接觸到websocket，然後對心跳重連作了一次總結，寫了篇博客，然後18年對以前github上的demo代碼進行了再次開發和開源，最終封裝成庫。以下：javascript

在2020年也就是今年初，同事建議說能夠考慮兼容一下小程序，心想也挺好的。便有了今天的 websocket-heartbeat-miniprogram，此次基於之前的代碼新建了一個項目，只作小程序的版本，由於涉及到各類小程序以及相關框架的兼容，以爲仍是單獨出一個包，更專一一點。html

介紹

websocket-heartbeat-miniprogram基於小程序的websocket相關API進行封裝，主要目的是保障客戶端websocket與服務端鏈接狀態。該程序有心跳檢測及自動重連機制，當網絡斷開或者後端服務問題形成客戶端websocket斷開，程序會自動嘗試從新鏈接直到再次鏈接成功。兼容市面上大部分小程序微信，百度，支付寶等，只要都是統一的小程序weboscket-API規範。也支持小程序框架好比Taro等。不管如何，業務是須要一層心跳機制的，不然一些狀況下會丟失鏈接致使功能沒法使用。前端

用法

安裝

npm install --save websocket-heartbeat-miniprogram

引入使用

import WebsocketHeartbeat from 'websocket-heartbeat-miniprogram';
WebsocketHeartbeat({
    miniprogram: wx,
    connectSocketParams: {
        url: 'ws://xxx'
    }
})
    .then(task => {
        task.onOpen = () => {//鉤子函數
            console.log('open');
        };
        task.onClose = （） => {//鉤子函數
            console.log('close');
        };
        task.onError = e => {//鉤子函數
            console.log('onError：', e);
        };
        task.onMessage = data => {//鉤子函數
            console.log('onMessage', data);
        };
        task.onReconnect = () => {//鉤子函數
            console.log('reconnect...');
        };
        task.socketTask.onOpen(data => {//原生實例註冊函數，重連後丟失
            console.log('socketTask open');
        });
        task.socketTask.onMessage(data => {//原生實例註冊函數，重連後丟失
            console.log('socketTask data');
        });
    })

本程序內部老是使用小程序connectSocket方法進行socket鏈接，若是socket斷開，本程序內部會再次執行小程序的connectSocket方法，以此來從新創建鏈接，重連都會創建新的小程序socket實例。java

WebsocketHeartbeat方法返回一個promise，返回的task對象是本程序的一個實例,提供了onOpen,onClose,onError,onMessage,onReconnect等鉤子函數。也暴露了小程序自己的實例（socketTask），task.socketTask就是小程序connectSocket返回的實例，而task.socketTask是小程序的原生實例，它們經過onXXX方法傳遞函數進行監聽註冊，在socket重連之後，內部從新經過connectSocket新建實例，將會返回新的小程序原生實例，所以以前經過socketTask.onXXX註冊的這些函數將會丟失。而本程序內部提供的鉤子函數重連上之後依然有效。大部分狀況下推薦就使用本程序的鉤子函數。git

支付寶小程序差別

支付寶小程序只容許同時存在一個socket鏈接，原生的API也和其餘小程序有一點小差別，本程序已經作了兼容，可是仍是要注意支付寶只容許創建一個socket，若是創建多個socket，前面的socket都會被系統關閉，必定要經過本程序實例的task.close關閉舊的socket，不然程序會一直重連，致使全部socket相互衝突沒法使用。github

約定

1.只能經過前端主動關閉socket鏈接web

若是須要斷開socket，應該執行task.close()方法。若是後端想要關閉socket，應該下發一個消息，前端判斷此消息，前端再調用task.close()方法關閉。由於不管是後端調用close仍是由於其餘緣由形成的socket關閉，前端的socket都會觸發onClose事件，程序沒法判斷是什麼緣由致使的關閉。所以本程序會默認嘗試重連。npm

import WebsocketHeartbeat from 'websocket-heartbeat-miniprogram';
WebsocketHeartbeat({
    miniprogram: wx,
    connectSocketParams: {
        url: 'ws://xxxx'
    }
})
    .then(task => {
        task.onMessage = data => {
            if(data.data == 'close') task.close();//關閉socket而且，再也不重連
        };
    })

2.後端對前端心跳的反饋小程序

前端發送心跳消息，後端收到後，須要馬上返回響應消息，後端響應的消息能夠是任何值，由於本程序並不處理和判斷響應的心跳消息，而只是在收到任何消息後，重置心跳，由於收到任何消息就說明鏈接是正常的。所以本程序收到任何後端返回的消息都會重置心跳倒計時，以此來減小沒必要要的請求，減小服務器壓力。後端