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