1、創(chuàng)建websocket.js，代碼如下：

let socket = null;
let heartbeatTimer = null;
let reconnectTimer = null;
let socketUrl = null; // 存儲(chǔ)初始的 WebSocket 服務(wù)器地址
let allowReconnect = true; // 新增標(biāo)志位，控制是否允許重連
let reconnectCount = 0; // 記錄重連次數(shù)
const MAX_RECONNECT_COUNT = 5; // 最大重連次數(shù)

const HEARTBEAT_INTERVAL = 20000; // 心跳間隔，20秒
const RECONNECT_INTERVAL = 5000; // 重連間隔，5秒

function createWebSocket(url) {
    socketUrl = url; // 存儲(chǔ) url
    console.log('封裝的websocket.js里的URL', url)
    socket = uni.connectSocket({
        url: url,
        success(res) {
            console.log('WebSocket 連接成功res', res);
            reconnectCount = 0; // 連接成功后重置重連次數(shù)
        },
        fail(err) {
            console.log('WebSocket 連接失敗err:', err);
            reconnectWebSocket();
        }
    });
    console.log('封裝的websocket里createWebSocket的socket', socket)

    socket.onOpen(() => {
        console.log('WebSocket 已打開');
        startHeartbeat();
    });

    socket.onMessage((res) => {
        console.log('收到消息:', res.data);
        // 處理接收到的消息，可根據(jù)具體業(yè)務(wù)邏輯添加代碼
        if (res.data == '在線播放') {
            playMusic(); // 收到消息后播放音樂
        }
    });

    socket.onClose(() => {
        console.log('WebSocket 已關(guān)閉');
        stopHeartbeat();
        reconnectWebSocket();
    });

    socket.onError((err) => {
        console.error('WebSocket 錯(cuò)誤:', err);
        stopHeartbeat();
        reconnectWebSocket();
    });
}

function startHeartbeat() {
    heartbeatTimer = setInterval(() => {
        console.log('發(fā)送心跳包', socket)
        if (socket && socket.readyState === 1) {
            // 發(fā)送心跳包，這里的心跳包內(nèi)容可自定義，比如發(fā)送一個(gè)簡(jiǎn)單的 JSON 字符串
            let data = {
                uid: uni.getStorageSync('Storage_UserID'),
                message: "心跳監(jiān)測(cè)"
            }
            // 注：只有連接正常打開中 ，才能正常成功發(fā)送消息
            socket.send({
                data: JSON.stringify(data),
                async success() {
                    console.log("消息發(fā)送成功", JSON.stringify(data));
                },
            });
        } else {
            stopHeartbeat();
            reconnectWebSocket();
        }
    }, HEARTBEAT_INTERVAL);
}

function stopHeartbeat() {
    if (heartbeatTimer) {
        clearInterval(heartbeatTimer);
        heartbeatTimer = null;
    }
}

function reconnectWebSocket() {
    if (allowReconnect && reconnectCount < MAX_RECONNECT_COUNT) { // 檢查是否允許重連以及重連次數(shù)是否達(dá)到上限
        if (reconnectTimer) {
            clearTimeout(reconnectTimer);
        }
        reconnectTimer = setTimeout(() => {
            console.log('重連時(shí)使用存儲(chǔ)的WebSocket地址', socketUrl)
            createWebSocket(socketUrl ? socketUrl : null); // 重連時(shí)使用之前的 URL
            reconnectCount++; // 重連次數(shù)加1
        }, RECONNECT_INTERVAL);
    } else if (reconnectCount >= MAX_RECONNECT_COUNT) {
        console.log('已達(dá)到最大重連次數(shù)，停止重連');
    }
}

function closeWebSocket() {
    console.log('開始關(guān)閉 WebSocket 連接');
    if (socket) {
        console.log('關(guān)閉 WebSocket 連接');
        socket.close();
        socket = null;
    }
    stopHeartbeat();
    if (reconnectTimer) {
        console.log('清除重連定時(shí)器');
        clearTimeout(reconnectTimer);
        reconnectTimer = null;
    }
    allowReconnect = false; // 退出登錄時(shí)禁止重連
    reconnectCount = 0; // 關(guān)閉連接時(shí)重置重連次數(shù)
    console.log('WebSocket 連接關(guān)閉完成');
}


function openReconnect() {
    allowReconnect = true; // 重新允許重連
    reconnectCount = 0; // 關(guān)閉連接時(shí)重置重連次數(shù)
}


function playMusic() {
    const innerAudioContext = uni.createInnerAudioContext();
    innerAudioContext.src = 'https://XXXXXX.com/service/static/video/1955307412.mp3';
    innerAudioContext.autoplay = true;
    innerAudioContext.onPlay(() => {
        console.log('開始播放音樂');
        // 播放 5 秒后關(guān)閉音樂
        setTimeout(() => {
            innerAudioContext.stop();
            console.log('音樂播放 5 秒后已關(guān)閉');
        }, 5000);
    });
    innerAudioContext.onError((err) => {
        console.error('播放音樂出錯(cuò):', err);
    });
}
export default {
    createWebSocket,
    closeWebSocket,
    openReconnect
};

在main.js里

// 掛載到全局
Vue.prototype.BASE_WebSocketURL = "wss://xxxxxxxxxxxxxxx/websocket/"

在App.vue里

import WebSocketService from '@/common/js/websocket.js'

onLaunch: function() {
    if (uni.getStorageSync('Storage_Token')) {
        let webSocketURL = this.BASE_WebSocketURL+uni.getStorageSync('Storage_Token')
        WebSocketService.createWebSocket(webSocketURL);
        console.log('APP頁(yè)面的wsRequest', WebSocketService)
    }
}

onHide() {
    // WebSocketService.closeWebSocket();
},

onShow() {
    if (uni.getStorageSync('Storage_Token')) {
        let webSocketURL = this.BASE_WebSocketURL + uni.getStorageSync('Storage_Token')
        console.log('onShow里的webSocketURL', webSocketURL)
        WebSocketService.createWebSocket(webSocketURL);
    } else {
        WebSocketService.closeWebSocket();
    }
},

在login.vue登錄成功

uni.setStorageSync('Storage_UserID','1846378319125213186');
const WebSocketService = require('@/common/js/websocket.js').default;
let webSocketURL = this.BASE_WebSocketURL + uni.getStorageSync('Storage_Token')
WebSocketService.createWebSocket(webSocketURL);

在退出登錄里

const WebSocketService = require('@/common/js/websocket.js').default;
WebSocketService.closeWebSocket();