uniapp全局封裝websocket觸發(fā)音頻

1蔚龙、創(chuàng)建websocket.js官份,代碼如下:

let socket = null;
let heartbeatTimer = null;
let reconnectTimer = null;
let socketUrl = null; // 存儲初始的 WebSocket 服務器地址
let allowReconnect = true; // 新增標志位,控制是否允許重連
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; // 存儲 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è)務邏輯添加代碼
        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('發(fā)送心跳包', socket)
        if (socket && socket.readyState === 1) {
            // 發(fā)送心跳包晕粪,這里的心跳包內(nèi)容可自定義,比如發(fā)送一個簡單的 JSON 字符串
            let data = {
                uid: uni.getStorageSync('Storage_UserID'),
                message: "心跳監(jiān)測"
            }
            // 注:只有連接正常打開中 渐裸,才能正常成功發(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ù)是否達到上限
        if (reconnectTimer) {
            clearTimeout(reconnectTimer);
        }
        reconnectTimer = setTimeout(() => {
            console.log('重連時使用存儲的WebSocket地址', socketUrl)
            createWebSocket(socketUrl ? socketUrl : null); // 重連時使用之前的 URL
            reconnectCount++; // 重連次數(shù)加1
        }, RECONNECT_INTERVAL);
    } else if (reconnectCount >= MAX_RECONNECT_COUNT) {
        console.log('已達到最大重連次數(shù)巫湘,停止重連');
    }
}

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; // 關閉連接時重置重連次數(shù)
    console.log('WebSocket 連接關閉完成');
}


function openReconnect() {
    allowReconnect = true; // 重新允許重連
    reconnectCount = 0; // 關閉連接時重置重連次數(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 秒后關閉音樂
        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();
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市昏鹃,隨后出現(xiàn)的幾起案子尚氛,更是在濱河造成了極大的恐慌,老刑警劉巖洞渤,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件阅嘶,死亡現(xiàn)場離奇詭異,居然都是意外死亡您宪,警方通過查閱死者的電腦和手機奈懒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門奠涌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來宪巨,“玉大人,你說我怎么就攤上這事溜畅∧笞浚” “怎么了?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵慈格,是天一觀的道長怠晴。 經(jīng)常有香客問我,道長浴捆,這世上最難降的妖魔是什么蒜田? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮选泻,結(jié)果婚禮上冲粤,老公的妹妹穿的比我還像新娘。我一直安慰自己页眯,他們只是感情好梯捕,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著窝撵,像睡著了一般傀顾。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上碌奉,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天短曾,我揣著相機與錄音寒砖,去河邊找鬼。 笑死错英,一個胖子當著我的面吹牛入撒,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播椭岩,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼茅逮,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了判哥?” 一聲冷哼從身側(cè)響起献雅,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎塌计,沒想到半個月后挺身,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡锌仅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年章钾,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片热芹。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡贱傀,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出伊脓,到底是詐尸還是另有隱情府寒,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布报腔,位于F島的核電站株搔,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏纯蛾。R本人自食惡果不足惜纤房,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望翻诉。 院中可真熱鬧炮姨,春花似錦、人聲如沸米丘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拄查。三九已至吁津,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背碍脏。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工怜瞒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留准潭,地道東北人虱痕。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓惩阶,卻偏偏與公主長得像,于是被迫代替她去往敵國和親钾埂。 傳聞我的和親對象是個殘疾皇子河闰,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容