操作如下
可以在多個頁面多個組件中進(jìn)行監(jiān)聽/發(fā)送 代碼簡介 方便；文章來源：http://www.zghlxwxcb.cn/news/detail-679313.html
首先安裝 tools-javascript 以及 tools-vue3
npm i tools-vue3
npm i tools-javascript
import { WebSocketBean } from 'tools-vue3'
export default class WSUtil {
static ws: WebSocketBean
static async init() {
this.ws = new WebSocketBean({
url: '你的地址',
needReconnect: true,
reconnectGapTime: 3000,
onerror: () => { // 接收到錯誤
CEvent.emit('getData','斷開的~消息是從這里來的哦~')
},
sendSuffix:'',
messageSuffix: '',
heartSend: '44444444444~',
heartGet: '44444444444444444~',
heartGapTime: 3000,
onmessage: (data) => { // 接收到消息
CEvent.emit('getData',sp)
}
})
//建立連接
this.ws.start()
}
}
根據(jù)你的業(yè)務(wù)需求初始化 ws
// 從你業(yè)務(wù)需求的文件引入該方法后調(diào)用
WSUtil.init()
在你的任何文件中直接調(diào)用即可
// 監(jiān)聽消息 getData 相當(dāng)于KEY值 與 接收到的消息/錯誤 統(tǒng)一即可
const listenID = CEvent.on("getData",(data)=>{
//在onmessage觸發(fā)后，這里應(yīng)該打印test字符串
console.log('home1',data)
})
// 頁面銷毀記得清除監(jiān)聽器
onDeactivated(()=>{
// 銷毀
CEvent.off(listenID)
})
附加篇（也可不讀 直接看文檔 ）文章來源地址http://www.zghlxwxcb.cn/news/detail-679313.html
/**
*發(fā)送數(shù)據(jù)
* @param data 數(shù)據(jù)對象，Object、Array、String
*/
WSUtil.send
/**
* 銷毀需要重發(fā)的數(shù)據(jù)信息
* @param sendId
*/
WSUtil.offsend
/**
* 關(guān)閉socket，銷毀綁定事件、心跳事件、窗口關(guān)閉事件，修改狀態(tài)為已關(guān)閉
*/
WSUtil.close
// ws連接狀態(tài)
export enum WebSocketStatusEnum {
/**
* 創(chuàng)建中
*/
load,
/**
* 已連接
*/
open,
/**
* 已關(guān)閉
*/
close
}
到了這里，關(guān)于Vue3封裝全局WebSocket；全局可監(jiān)聽、可發(fā)送、心跳處理等；的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
