创建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);
});