Vue3 инкапсулирует глобальный WebSocket, глобальную возможность прослушивания, отправки, обработки пульса и т. д.;

Операция заключается в следующем

Удобно отслеживать/отправлять код в нескольких компонентах на нескольких страницах;

Сначала установите инструменты-javascript и инструменты-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()
    }
}

Инициализируйте 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
}