websocket vue3 全局连接（二）

websocket  全局连接（一）

https://blog.csdn.net/GoodLuck_yyh/article/details/137112266

websocket.js文件封装

//websocket.js
let socket
let reconnectInterval = null
const listeners = []
// 心跳定时器的句柄
let heartbeatTimer
// 创建WebSocket连接
export const createWebSocketConnection = (url, Token) => {
    socket = new WebSocket(url)
    socket.onopen = () => {
        console.log('WebSocket连接已建立')
        // 1.设置心跳定时器，在连接打开后立即发送第一次心跳
        // 2.发送WebSocket初始化消息socket.send() 
        //3.重连

    }
    socket.onmessage = (event) => {
        //收到心跳回消息
        listeners.forEach((listener) => {
            listener(event.data)
        })
    }

    socket.onclose = (type) => {
        console.log('WebSocket连接已关闭')
        if (type !== 'stop') {
            reconnect()
        }
        // 关闭心跳定时器
        stopHeartbeat()
    }
}
// 关闭WebSocket连接
export const closeWebSocketConnection = () => {
    if (socket) {
        socket.onclose('stop')
        // 关闭心跳定时器
        stopHeartbeat()
    }
}

// 发送消息
export const sendMessage = (message) => {
    if (socket.readyState && socket.readyState === WebSocket.OPEN) {
        // 发送WebSocket消息socket.send()
    } else {
        resetReconnectInterval()
    }
}

// 监听收到的消息
export const appendMessage = (listener) => {
    listeners.push(listener)
}
// 发送心跳消息
function sendHeartbeat() {
    //清除心跳
    socket.send(XXXX)//心跳的消息体
}
//websocket  建立连接成功后发送心跳，每个10秒发一次消息
// 开始心跳
export const startHeartbeat = () => {
    // 首先尝试发送一次心跳
    sendHeartbeat()
    // 定时发送心跳

}
const clearqueueUpTimer = () => {
    //清除定时心跳
}
// 停止心跳
const stopHeartbeat = () => {
    // 关闭心跳定时器
    clearqueueUpTimer(heartbeatTimer)
}

// 断线重连
const reconnect = () => {
    clearInterval(reconnectInterval)
    // 在这里根据需要实现自定义的断线重连逻辑
    reconnectInterval = setInterval(() => {
        createWebSocketConnection()
    }, 10000) // 3秒后尝试重新连接
}

// 重置断线重连定时器
const resetReconnectInterval = () => {
    clearInterval(reconnectInterval)
}

// 将模块导出
export default {
    createWebSocketConnection,
    closeWebSocketConnection,
    sendMessage,
    appendMessage,
    startHeartbeat
}