完善 websocket 封装

pull/56/head
puhui999 2024-07-12 17:43:08 +08:00
parent 9399a3e223
commit 7baec78c02
4 changed files with 111 additions and 76 deletions

View File

@ -217,7 +217,6 @@
//
const includePage = index => {
console.log(visiblePagesList.value, index);
return visiblePagesList.value.indexOf(index) > -1;
};

View File

@ -12,3 +12,8 @@ export const UserTypeEnum = {
MEMBER: 1, // 会员 面向 c 端,普通用户
ADMIN: 2, // 管理员 面向 b 端,管理后台
};
// Promotion 的 WebSocket 消息类型枚举类
export const WebSocketMessageTypeConstants = {
KEFU_MESSAGE_TYPE: 'kefu_message_type', // 客服消息类型
KEFU_MESSAGE_ADMIN_READ: 'kefu_message_read_status_change' // 客服消息管理员已读
}

View File

@ -2,7 +2,7 @@
<s-layout class="chat-wrap" title="客服" navbar="inner">
<!-- 头部连接状态展示 -->
<div class="status">
<!-- {{ socketState.isConnect ? "连接客服成功" : '网络已断开,请检查网络后刷新重试' }}-->
{{ !isReconnecting ? "连接客服成功" : '会话重连中!!!' }}
</div>
<!-- 覆盖头部导航栏背景颜色 -->
<div class="page-bg" :style="{ height: sys_navBar + 'px' }"></div>
@ -29,13 +29,12 @@
<script setup>
import ChatBox from './components/chatBox.vue';
import { nextTick, reactive, ref } from 'vue';
import { reactive, ref, toRefs } from 'vue';
import sheep from '@/sheep';
import ToolsPopup from '@/pages/chat/components/toolsPopup.vue';
import MessageInput from '@/pages/chat/components/messageInput.vue';
import { onLoad } from '@dcloudio/uni-app';
import SelectPopup from '@/pages/chat/components/select-popup.vue';
import { KeFuMessageContentTypeEnum } from '@/pages/chat/components/constants';
import { KeFuMessageContentTypeEnum, WebSocketMessageTypeConstants } from '@/pages/chat/components/constants';
import FileApi from '@/sheep/api/infra/file';
import KeFuApi from '@/sheep/api/promotion/kefu';
import { useWebSocket } from '@/sheep/hooks/useWebSocket';
@ -85,11 +84,10 @@
//
function onTools(mode) {
// TODO puhui999: socket
// if (!socketState.value.isConnect) {
// sheep.$helper.toast(socketState.value.tip || '线');
// return;
// }
if (isReconnecting.value) {
sheep.$helper.toast( '您已掉线!请返回重试');
return;
}
if (!chat.toolsMode || chat.toolsMode === mode) {
chat.showTools = !chat.showTools;
@ -141,25 +139,32 @@
}
//======================= end =======================
useWebSocket({
const {options} = useWebSocket({
//
onConnected:()=>{
},
//
onClosed:()=>{
onConnected:async () => {
await getMessageList()
},
//
onMessage:(data)=>{
onMessage:async (data) => {
console.log(data);
const type = data.type
if (!type) {
console.error('未知的消息类型:' + data.value)
return
}
// 2.2 KEFU_MESSAGE_TYPE
if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
//
await getMessageList()
return
}
// 2.3 KEFU_MESSAGE_ADMIN_READ
if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
console.log("管理员已读消息");
}
}
});
onLoad(async () => {
await nextTick()
//
await getMessageList()
});
const isReconnecting = toRefs(options).isReconnecting
</script>
<style scoped lang="scss">

View File

@ -1,9 +1,13 @@
import { reactive, ref, onBeforeUnmount } from 'vue';
import { onBeforeUnmount, reactive, ref } from 'vue';
import { baseUrl, websocketPath } from '@/sheep/config';
import { copyValueToTarget } from '@/sheep/util';
/**
* WebSocket 创建 hook
* @param opt 连接配置
* @return {{options: *}}
*/
export function useWebSocket(opt) {
// 获取token
const getAccessToken = () => {
return uni.getStorageSync('token');
};
@ -16,6 +20,8 @@ export function useWebSocket(opt) {
pingTimeoutDuration: 1000, // 超过这个时间后端没有返回pong则判定后端断线了。
heartBeatTimer: null, // 心跳计时器
destroy: false, // 是否销毁
pingTimeout: null, // 心跳检测定时器
reconnectTimeout: null, // 重连定时器ID的属性
onConnected: () => {
}, // 连接成功时触发
onClosed: () => {
@ -23,109 +29,129 @@ export function useWebSocket(opt) {
onMessage: (data) => {
}, // 收到消息
});
const Socket = ref(null); // Socket 链接实例
const SocketTask = ref(null); // SocketTask 由 uni.connectSocket() 接口创建
const initEventListeners = () => {
Socket.value.onOpen(() => {
// WebSocket连接已打开
// 监听 WebSocket 连接打开事件
SocketTask.value.onOpen(() => {
console.log('WebSocket 连接成功');
// 连接成功时触发
options.onConnected();
// 开启心跳检查
startHeartBeat();
});
Socket.value.onMessage((res) => {
// 监听 WebSocket 接受到服务器的消息事件
SocketTask.value.onMessage((res) => {
try {
const obj = JSON.parse(res.data);
if (obj.type === 'pong') {
// 收到pong消息心跳正常无需处理
resetPingTimeout(); // 重置计时
if (res.data === 'pong') {
// 收到心跳重置心跳超时检查
resetPingTimeout();
} else {
// 处理其他消息
options.onMessage(obj);
options.onMessage(JSON.parse(res.data));
}
} catch {
console.error(res.data);
} catch (error) {
console.error(error);
}
});
Socket.value.onClose((res) => {
// WebSocket连接已关闭
// 监听 WebSocket 连接关闭事件
SocketTask.value.onClose((event) => {
// 情况一:实例销毁
if (options.destroy) {
options.onClosed();
return;
}
stopHeartBeat();
if (!options.isReconnecting) {
} else { // 情况二:连接失败重连
// 停止心跳检查
stopHeartBeat();
// 重连
reconnect();
}
});
};
// 发送消息
const sendMessage = (message) => {
if (Socket.value) {
Socket.value.send({
data: message,
});
if (SocketTask.value && !options.destroy) {
SocketTask.value.send({ data: message });
}
};
// 开始心跳检查
const startHeartBeat = () => {
options.heartBeatTimer = setInterval(() => {
sendMessage(JSON.stringify({
type: 'ping',
})); // 发送ping消息
sendMessage('ping');
options.pingTimeout = setTimeout(() => {
// 未收到pong消息尝试重连...
// 如果在超时时间内没有收到 pong则认为连接断开
reconnect();
}, options.pingTimeoutDuration);
}, options.heartBeatInterval);
};
// 停止心跳检查
const stopHeartBeat = () => {
if (options.heartBeatTimer) {
clearInterval(options.heartBeatTimer);
}
clearInterval(options.heartBeatTimer);
resetPingTimeout();
};
// WebSocket 重连
const reconnect = () => {
if (options.destroy || !SocketTask.value) {
// 如果WebSocket已被销毁或尚未完全关闭不进行重连
return;
}
// 重连中
options.isReconnecting = true;
setTimeout(() => {
onReconnect();
initSocket();
options.isReconnecting = false;
// 清除现有的重连标志,以避免多次重连
if (options.reconnectTimeout) {
clearTimeout(options.reconnectTimeout);
}
// 设置重连延迟
options.reconnectTimeout = setTimeout(() => {
// 检查组件是否仍在运行和WebSocket是否关闭
if (!options.destroy) {
// 重置重连标志
options.isReconnecting = false;
// 初始化新的WebSocket连接
initSocket();
}
}, options.reconnectInterval);
};
const resetPingTimeout = () => {
clearTimeout(options.pingTimeout); // 重置计时
if (options.pingTimeout) {
clearTimeout(options.pingTimeout);
options.pingTimeout = null; // 清除超时ID
}
};
const close = () => {
options.destroy = true;
stopHeartBeat();
if (Socket.value) {
Socket.value.close();
Socket.value = null;
if (options.reconnectTimeout) {
clearTimeout(options.reconnectTimeout);
}
if (SocketTask.value) {
SocketTask.value.close();
SocketTask.value = null;
}
};
/**
* 重连时触发
*/
const onReconnect = () => {
console.log('尝试重连...');
};
const initSocket = () => {
options.destroy = false;
copyValueToTarget(options, opt);
Socket.value = uni.connectSocket({
SocketTask.value = uni.connectSocket({
url: options.url,
complete: () => {
},
success: () => {
},
});
initEventListeners();
};
initSocket();
onBeforeUnmount(()=>{
close()
})
onBeforeUnmount(() => {
close();
});
return { options };
}