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();