Vue3封装全局WebSocket;全局可监听、可发送、心跳处理等;

操作如下

可以在多个页面多个组件中进行监听/发送 代码简介 方便;

首先安装 tools-javascript 以及 tools-vue3

javascript 复制代码
npm i tools-vue3
npm i tools-javascript 
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()
    }
}

根据你的业务需求初始化 ws

javascript 复制代码
// 从你业务需求的文件引入该方法后调用
WSUtil.init()  

在你的任何文件中直接调用即可

javascript 复制代码
	// 监听消息 getData 相当于KEY值 与 接收到的消息/错误 统一即可
	const listenID = CEvent.on("getData",(data)=>{
		//在onmessage触发后,这里应该打印test字符串 
		console.log('home1',data)
	})
	// 页面销毁记得清除监听器
	onDeactivated(()=>{
        // 销毁
        CEvent.off(listenID)
	})

附加篇(也可不读 直接看文档 )

javascript 复制代码
 /**
  *发送数据
  * @param data 数据对象,Object、Array、String
  */
	WSUtil.send
	
 /**
  * 销毁需要重发的数据信息
  * @param sendId
  */
  WSUtil.offsend
 /**
  * 关闭socket,销毁绑定事件、心跳事件、窗口关闭事件,修改状态为已关闭
  */
  WSUtil.close
  
// ws连接状态
export enum WebSocketStatusEnum {
    /**
     * 创建中
     */
    load,
    /**
     * 已连接
     */
    open,
    /**
     * 已关闭
     */
    close
}
相关推荐
面朝大海,春不暖,花不开16 分钟前
Java网络编程:TCP/UDP套接字通信详解
java·网络·tcp/ip
ChicagoTypewriter22 分钟前
计算机网络中的常用表项梳理
网络·计算机网络·智能路由器
DemonAvenger1 小时前
高性能 TCP 服务器的 Go 语言实现技巧:从原理到实践
网络协议·架构·go
Bruce_Liuxiaowei3 小时前
常见高危端口风险分析与防护指南
网络·网络安全·端口·信息搜集
tmacfrank4 小时前
Android 网络全栈攻略(四)—— TCPIP 协议族与 HTTPS 协议
android·网络·https
liulilittle4 小时前
深度剖析:OPENPPP2 libtcpip 实现原理与架构设计
开发语言·网络·c++·tcp/ip·智能路由器·tcp·通信
cui_win4 小时前
【内存】Linux 内核优化实战 - net.ipv4.tcp_tw_reuse
linux·网络·tcp/ip
2501_916013744 小时前
iOS 多线程导致接口乱序?抓包还原 + 请求调度优化实战
websocket·网络协议·tcp/ip·http·网络安全·https·udp
M1A14 小时前
TCP/IP协议精解:IP协议——互联网世界的邮政编码系统
后端·网络协议·tcp/ip
夏天想5 小时前
优化 WebSocket 实现单例连接用于打印【待测试 】
网络·websocket·网络协议