uniapp全局封装websocket触发音频

1、创建websocket.js，代码如下：

let socket = null;
let heartbeatTimer = null;
let reconnectTimer = null;
let socketUrl = null; // 存储初始的 WebSocket 服务器地址
let allowReconnect = true; // 新增标志位，控制是否允许重连
let reconnectCount = 0; // 记录重连次数
const MAX_RECONNECT_COUNT = 5; // 最大重连次数

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

function createWebSocket(url) {
    socketUrl = url; // 存储 url
    console.log('封装的websocket.js里的URL', url)
    socket = uni.connectSocket({
        url: url,
        success(res) {
            console.log('WebSocket 连接成功res', res);
            reconnectCount = 0; // 连接成功后重置重连次数
        },
        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);
        // 处理接收到的消息，可根据具体业务逻辑添加代码
        if (res.data == '在线播放') {
            playMusic(); // 收到消息后播放音乐
        }
    });

    socket.onClose(() => {
        console.log('WebSocket 已关闭');
        stopHeartbeat();
        reconnectWebSocket();
    });

    socket.onError((err) => {
        console.error('WebSocket 错误:', err);
        stopHeartbeat();
        reconnectWebSocket();
    });
}

function startHeartbeat() {
    heartbeatTimer = setInterval(() => {
        console.log('发送心跳包', socket)
        if (socket && socket.readyState === 1) {
            // 发送心跳包，这里的心跳包内容可自定义，比如发送一个简单的 JSON 字符串
            let data = {
                uid: uni.getStorageSync('Storage_UserID'),
                message: "心跳监测"
            }
            // 注：只有连接正常打开中 ，才能正常成功发送消息
            socket.send({
                data: JSON.stringify(data),
                async success() {
                    console.log("消息发送成功", JSON.stringify(data));
                },
            });
        } else {
            stopHeartbeat();
            reconnectWebSocket();
        }
    }, HEARTBEAT_INTERVAL);
}

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

function reconnectWebSocket() {
    if (allowReconnect && reconnectCount < MAX_RECONNECT_COUNT) { // 检查是否允许重连以及重连次数是否达到上限
        if (reconnectTimer) {
            clearTimeout(reconnectTimer);
        }
        reconnectTimer = setTimeout(() => {
            console.log('重连时使用存储的WebSocket地址', socketUrl)
            createWebSocket(socketUrl ? socketUrl : null); // 重连时使用之前的 URL
            reconnectCount++; // 重连次数加1
        }, RECONNECT_INTERVAL);
    } else if (reconnectCount >= MAX_RECONNECT_COUNT) {
        console.log('已达到最大重连次数，停止重连');
    }
}

function closeWebSocket() {
    console.log('开始关闭 WebSocket 连接');
    if (socket) {
        console.log('关闭 WebSocket 连接');
        socket.close();
        socket = null;
    }
    stopHeartbeat();
    if (reconnectTimer) {
        console.log('清除重连定时器');
        clearTimeout(reconnectTimer);
        reconnectTimer = null;
    }
    allowReconnect = false; // 退出登录时禁止重连
    reconnectCount = 0; // 关闭连接时重置重连次数
    console.log('WebSocket 连接关闭完成');
}


function openReconnect() {
    allowReconnect = true; // 重新允许重连
    reconnectCount = 0; // 关闭连接时重置重连次数
}


function playMusic() {
    const innerAudioContext = uni.createInnerAudioContext();
    innerAudioContext.src = 'https://XXXXXX.com/service/static/video/1955307412.mp3';
    innerAudioContext.autoplay = true;
    innerAudioContext.onPlay(() => {
        console.log('开始播放音乐');
        // 播放 5 秒后关闭音乐
        setTimeout(() => {
            innerAudioContext.stop();
            console.log('音乐播放 5 秒后已关闭');
        }, 5000);
    });
    innerAudioContext.onError((err) => {
        console.error('播放音乐出错:', 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页面的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();