前端微服务 websocket的简易封装，以及iframe如
一、功能解读
- 主应用封装 ws, 子应用共享；
- 心跳检测、自动重连；
iframe子应用 订阅、推送（onPubSocket 、onSubSocket）；
二、代码片段
类型自行忽略
import _ from 'lodash'
import store from '../store'
// import { Notice } from 'view-design'
import Notification from '../components/Notification'
import { Callback, eventsMessageItem, wsOptions, resultType } from '../model/websocket'
class Websocket {
private websocket: any // ws 实体
private timer: any // 心跳检测定时器
private socketUrl: string // ws url
private timeout: number // 心跳检测时间间隔
private serverPort: number // ws 端口号
private isConnect: boolean = false // ws 是否连接
private eventsQueue: Record<string, Callback[]> = {} // pud sub 消息订阅推送队列
public eventsMessage: eventsMessageItem[] = [] // 保存的消息 只保存最新的20条
constructor (wsOpt: wsOptions) {
const { socketUrl, serverPort, timeout } = wsOpt
this.socketUrl = socketUrl
if (serverPort) this.serverPort = serverPort
if (timeout) this.timeout = timeout
}
private createWebSocket = () => {
if( typeof WebSocket === 'undefined' ) return console.error("您的浏览器不支持Websocket通信协议！")
if (this.websocket) return
this.initWebSocket()
}
// 初始化websocket
public initWebSocket = () => {
// noticeOpen()
this.websocket = new WebSocket(this.socketUrl)
// 连接成功
this.websocket.onopen = (e) => {
this.isConnect = true
this.openStatus(e)
}
// 连接关闭
this.websocket.onclose = (e) => {
this.closeStatus(e)
}
// 接收信息
this.websocket.onmessage = (e) => {
this.onmessage(e)
}
// 连接发生错误的回调方法
this.websocket.onerror = (e) => {
console.log(`ws 连接错误:${e}`)
}
}
// 重连
private reconnect = () => {
let cTimer: any = null
cTimer && clearTimeout(cTimer)
cTimer = setTimeout(() => {
this.initWebSocket()
}, 5000)
}
// 心跳检测
private socketHeartbeat = () => {
if (!this.isConnect) return
this.timer && clearTimeout(this.timer)
this.timer = setTimeout(() => {
if (this.websocket.readyState === 1) { // 连接正常 发送心跳包
console.log(`ws: 开启心跳检测 --- 发送心跳包`)
this.websocket.send(JSON.stringify({
type: 'heartbeat',
msg: 'heartbeat message'
}));
} else { // 否则重连
this.isConnect = false
this.reconnect();
}
}, this.timeout)
}
// 重置心跳
private onReset = () => {
console.log(`ws: 重置心跳`)
clearTimeout(this.timer)
// 重启心跳
this.socketHeartbeat()
}
// 数据接收
private onmessage = (e) => {
_.debounce(() => this.socketHeartbeat(), 2000)()
this.handleMessage(e)
}
// 消息处理
private handleMessage = (e) => {
const res = JSON.parse(e.data)
const { type, data } = res
switch (type) {
case 'heartbeat': // 心跳
console.info(`ws: 心跳正常`)
break;
case 'resource': // 资源数据
setDashboard(data)
break;
case 'new-message': // 消息通知
store.commit(`Launcher/updateNemMsg`, data)
break;
case 'task-total': // 任务
store.commit(`Launcher/updateIsTask`, data)
break;
case 'app-update-total': // 应用数据
this.onSubSocket('app-update-total', 'ws: message')
break;
default: // 其他通知
const length = this.eventsMessage.length
if (length >= 20) {
this.eventsMessage.shift()
this.eventsMessage.push(res)
}
// this.onSubSocket('notify', 'ws: message')
}
}
// 发布
public onPubSocket = (eventName: string, cb: Callback) => {
const query: Callback[] = this.eventsQueue[eventName] || [] // 获取原队列
query.push(cb) // 队列中追加cb
this.eventsQueue[eventName] = query // 重新赋值事件队列
}
// 订阅
public onSubSocket = (eventName: string, ...args: any[]) => {
const query: Callback[] = this.eventsQueue[eventName] || [] // 获取事件队列
if (query.length < 1) return
query.forEach((t: Callback) => { t(...args) }) // 执行事件队列中的回调函数数组
}
// 打开状态
private openStatus = (e) => {
console.log(`ws 连接成功:${e}`)
}
// 数据发送
public websocketSend = (data) => {
this.websocket.send(data)
}
// 关闭状态
private closeStatus = (e) => {
console.log(`ws 连接关闭:${e}`)
}
// 关闭
public onClose = () => {
this.isConnect = false
clearTimeout(this.timer)
this.timer = null
this.websocket.close()
}
}
const setDashboard = (data: resultType) => {
switch (data.name) {
case 'memory': // 内存 使用率
store.commit(`Launcher/updateDegRam`, data.usage * 1.8)
break;
case 'cpu': // cpu 使用率
store.commit(`Launcher/updateDegCpu`, data.usage * 1.8)
break;
case 'network': // 上传下载速率
store.commit(`Launcher/updateReceive`, data.receive)
store.commit(`Launcher/updateTransmit`, data.transmit)
break;
default:
break;
}
}
export default new Websocket({
socketUrl: 'ws://192.168.24.26:9999/ugreen/v1/desktop/ws',
serverPort: 80,
timeout: 25000
})
三、示例
3.1 主应用初始化
// ws 相关
initWebSocket () {
Websocket.initWebSocket()
Websocket.onPubSocket('state', (data) => {
console.log(`这是监听到 ws 的消息：${data}`)
})
this.$once('hook:beforeDestroy', function () {
Websocket.onClose()
window.removeEventListener("message", () => {})
})
},
3.2 子应用监听看下方使用文档
四、使用文档
#### websocket 使用说明
##### 1. 介绍
- 1.1 ws 的心跳检测时间是 25s, 可自定义
- 1.2 ws 意外断开重连时间是心跳检测时间的基础上 + 5s
- 1.3 launcher 桌面端会实时接收 server 端推送的消息， 并全部记录在 eventsMessage 内
- 1.4 接收消息后会主动调用 onSubSocket 方法通知订阅者
- 1.5 接收者通过 注册 onPubSocket 方法接收
##### 2. 使用
挂在到window: window.customWebsocket = websocket
- 2.1 通知订阅者示例
```js
Websocket.onSubSocket(msgType, 'ws: message')
```
* 2.1 接收者示例
```js
Websocket.onPubSocket(msgType, (msg) => {})
```
##### 3. 其他模块使用
* 3.1 当挂在在全局 window 上 属性为 customWebsocket; msgType需一致
```js
// launcher 应用
Websocket.onSubSocket(msgType, 'ws: message')
// 子应用接收示例
(window.top as any).customWebsocket.onPubSocket(msgType, (msg) => {})
```
* 3.1 当 通过 postMessage 方式接收时
```js
// launcher 应用 msgObj 会包含type 消息类型， 子应用自行过滤
window.top.postMessage(msgObj, '*')
// 子应用接收示例
(top as any).addEventListener('message', (msgObj) => {})
```
查看8道真题和解析
