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();
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,884评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,212评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,351评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,412评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,438评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,127评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,714评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,636评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,173评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,264评论 3 339
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,402评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,073评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,763评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,253评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,382评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,749评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,403评论 2 358

推荐阅读更多精彩内容