sockjs前端WebSocket二次封裝示例詳解

更新時間：2023年08月24日 11:17:44 作者：點墨

這篇文章主要為大家介紹了sockjs前端WebSocket二次封裝示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

業(yè)務需求

因業(yè)務需要，與后端進行websocket長連接通信，經過研究，決定使用sockjs-client和stompjs庫，并進行了二次封裝。

package.json版本:

"sockjs-client": "^1.5.1",
"stompjs": "^2.3.3",

socketManager.js

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import lodash from 'lodash';
function subscribeCallBack(data, subscribes) {
    if (data) {
        let topic = data.headers.destination;
        let funces = subscribes.get(topic);
        funces.forEach((func) => {
            func(data);
        });
    }
}
let clientManager = {
    client: null,
    connecting: false,//是否正在連接
    subscribes: new Map(),//訂閱列表
    subscribe(topic, onMessage) {
        if (this.client != null && this.client.connected == true) {
            //已連接狀態(tài)
            console.log('增加訂閱 已連接狀態(tài)');
            if (!this.subscribes.has(topic)) {
                this.client.subscribe(topic, (data) => subscribeCallBack(data, this.subscribes));
                this.subscribes.set(topic, [onMessage]);
            } else {
                let funces = this.subscribes.get(topic);
                funces.push(onMessage);
            }
        } else {
            //未連接狀態(tài)
            console.log('增加訂閱 未連接狀態(tài)');
            if (!this.subscribes.has(topic)) {
                this.subscribes.set(topic, [onMessage]);
            } else {
                let funces = this.subscribes.get(topic);
                funces.push(onMessage);
            }
        }
    },
    subscribesAll() {
        console.log('訂閱全部');
        if (lodash.isEmpty(this.client) || this.client.connected != true) {
            return;
        }
        let subscribes = this.subscribes;
        for (let topic of subscribes.keys()) {
            this.client.subscribe(topic, (data) => subscribeCallBack(data, subscribes));
        }
    },
    disconnect() {
        console.log('斷開連接');
        if (lodash.isEmpty(this.client) || this.client.connected != true) {
            return;
        }
        this.client.disconnect();
        this.subscribes = new Map();
    },
    connect(onSuccess, onDisconnect) {
        try {
            if (this.connecting == true) {
                console.log('正在連接中');
                return;
            }
            this.connecting = true;
            if (lodash.isEmpty(this.client) || this.client.connected != true) {//未連接狀態(tài)
                let socket = new SockJS('/bond/notification', null, { timeout: 6000 });
                let stompClient = Stomp.over(socket);
                stompClient.debug = null;
                console.log('開始連接');
                stompClient.connect
                    ({},
                        () => {
                            this.client = stompClient;
                            console.log('連接成功');
                            this.subscribesAll();//連接成功后開始訂閱所有內容
                            if (onSuccess != null && onSuccess != undefined) {
                                onSuccess();
                            };
                        },
                        (error) => this.errorCallBack(error, onSuccess, onDisconnect)
                    );
            } else if (this.client != null && this.client.connected == true) {//已連接狀態(tài)直接調用回調
                onSuccess();
            }
        }
        catch (err) {
            console.log('連接異常', err);
        }
        finally {
            this.connecting = false;
        }
    },
    errorCallBack(error, onSuccess, onDisconnect) {
        console.log('連接失敗');
        if (onDisconnect != null && onDisconnect != undefined) {
            onDisconnect();
        }
        setTimeout(() => {//自動重連
            console.log('重新連接中');
            this.connect(onSuccess, onDisconnect);
        }, 10000);
    },
};
export default clientManager;

連接方式

useEffect(()=>{
    socketmanager.connect();
    return () => {
         socketmanager.disconnect();
    };
})

訂閱方式

useEffect(() => {
        let topic = `/topic/notification`;
        socketmanager.subscribe(topic, (data) => {
            if (data) {
                //do something
            }
        })
    }, [])

如果有發(fā)現(xiàn)程序啟動的時候報這個錯誤: