操作如下
可以在多个页面多个组件中进行监听/发送 代码简介 方便;
首先安装 tools-javascript 以及 tools-vue3
npm i tools-vue3
npm i tools-javascript
import { WebSocketBean } from 'tools-vue3'
export default class WSUtil {static ws: WebSocketBeanstatic 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()}
}
根据你的业务需求初始化 ws
// 从你业务需求的文件引入该方法后调用
WSUtil.init()
在你的任何文件中直接调用即可
// 监听消息 getData 相当于KEY值 与 接收到的消息/错误 统一即可const listenID = CEvent.on("getData",(data)=>{//在onmessage触发后,这里应该打印test字符串 console.log('home1',data)})// 页面销毁记得清除监听器onDeactivated(()=>{// 销毁CEvent.off(listenID)})
附加篇(也可不读 直接看文档 )
/***发送数据* @param data 数据对象,Object、Array、String*/WSUtil.send/*** 销毁需要重发的数据信息* @param sendId*/WSUtil.offsend/*** 关闭socket,销毁绑定事件、心跳事件、窗口关闭事件,修改状态为已关闭*/WSUtil.close// ws连接状态
export enum WebSocketStatusEnum {/*** 创建中*/load,/*** 已连接*/open,/*** 已关闭*/close
}