websoket订阅消息

最新推荐文章于 2024-06-29 13:58:51 发布

m0_63701303

最新推荐文章于 2024-06-29 13:58:51 发布

阅读量326

点赞数

分类专栏： websoket 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_63701303/article/details/130739615

版权

websoket 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

创建websoket

wsDataPubSub.js //创建weibsoket

eventEmitter.js //封装消息订阅，发布订阅，取消订阅

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

eventEmitter.js

const Publisher = (function () {
    // 存储订阅者
    const _subsMap = {};
    return {
        // 消息订阅
        subscribe(type, cb) {
            if (_subsMap[type]) {
                if (!_subsMap[type].includes(cb)) {
                    // 注册一个函数
                    _subsMap[type].push(cb)
                }
            } else {
                // 初始化一个数组
                _subsMap[type] = [cb]
            }
        },
        // 消息退订
        unsubscribe(type, cb) {
            console.log(_subsMap[type]);
            if (!_subsMap[type] || !_subsMap[type].includes(cb)) {
                return
            }
            const idx = _subsMap[type].indexOf(cb)
            _subsMap[type].splice(idx, 1)
        },
        // 取消所有订阅
        unsubscribeAll(key) {
            _subsMap[key] = [];
        },
        // 消息发布
        notify(type, ...payload) {
            if (!_subsMap[type]) {
                return
            }
            _subsMap[type].forEach(cb => cb(...payload))
        }
    }
})()
export default Publisher

wsDataPubSub.js

/*
 * @Author: pengxingjie 980133894@qq.com
 * @Date: 2023-05-17 09:03:50
 * @LastEditors: pengxingjie 980133894@qq.com
 * @LastEditTime: 2023-05-18 09:07:50
 * @FilePath: \hmb\src\utils\ws\wsDataPubSub.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
/**
 * websocket数据发布订阅
 *
 */
import Publisher from "./eventEmitter"
import IPconfig from "../../../config"


let wsUrl = null;
if (process.env.NODE_ENV == "development") {//开发模式
    wsUrl = IPconfig.WS_URL;
} else {//生产模式
    wsUrl = IPconfig.WS_URL;
}
let sysWsIsConnect = "";
let reconnectTimeout = "";

// WebSocket
function createSysWs() {
    let sysWs = new WebSocket(wsUrl);
    sysWs.onopen = function () {
        console.log("sysWs onopen...");
        // 保存到wsyWs
        sysWsIsConnect = true;
        if (reconnectTimeout) clearTimeout(reconnectTimeout);
    };
    sysWs.onclose = function () {
        console.log("sysWs onclose...");
        sysWsIsConnect = false;
        reconnectSysWs();
    };
    sysWs.onerror = function () {
        sysWsIsConnect = false;
        reconnectSysWs();
        console.log("sysWs onerror...");
    };

    sysWs.onmessage = function ({ data }) {
        if (data.includes("加入连接")) return
        let datt = JSON.parse(data);
        console.log(datt, "dattdattdatt");
        Publisher.notify(datt.type, datt.data)
    }
}
// 自动重连
function reconnectSysWs() {
    if (sysWsIsConnect) return;
    if (reconnectTimeout) clearTimeout(reconnectTimeout);
    reconnectTimeout = setTimeout(() => {
        createSysWs();
    }, 500);
}
export default createSysWs;

组件内使用：

import Publisher from "@/utils/ws/eventEmitter"; //封装的soket订阅

 //监听type为xxxx的数据的回调函数
let type_xxx = (data) => {
     console.log(data) //soket接收到的数据
};
// 监听type为xxx的数据
Publisher.subscribe("soket的type", type_xxx);

//消息退订
onUnmounted(() => {
  Publisher.unsubscribe("soket的type", type_xxx);
});