czg_team/cashier_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

聊天问题修复优化

Browse Source
This commit is contained in:
YeMingfei666
2025-12-05 19:19:44 +08:00
parent 9e275b0faf
commit a65b0e83b1
7 changed files with 438 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
http/api/market/chat.js
View File

@@ -43,3 +43,13 @@ export function chatCouponRecord(params) {
params,
});
}
export function deleteRecord(params) {
return request({
url: urlType + `/admin/coupon/deleteRecord?id=`+params.id,
method: "delete",
params,
});
}

7
http/php/chat.js
View File

@@ -84,4 +84,9 @@ export const messageSessionList = (data) => {
export const groupDoNotDisturb = (data) => {
return request(prveUrl + "group/do-not-disturb", "POST", data, true);
};
};
export const groupEditTitle = (data) => {
return request(prveUrl + "group/editTitle", "POST", data, true);
};

113
pageChat/chat.vue
View File

@@ -5,7 +5,7 @@
<text style="max-width: 286rpx" class="u-line-1 u-font-32">
{{ groupInfo.name }}
</text>
<text class="u-m-l-22">（{{membersRes.user_list.length}}人）</text>
<text class="u-m-l-22">（{{ membersRes.user_list.length }}人）</text>
</view>
<view class="" @click="toMore()">
<view class="u-flex u-row-center">
@@ -36,7 +36,11 @@
>
<!-- 发消息 -->
<template
v-if="item.operate_type == 'sendMsg' || item.is_user_send == 1"
v-if="
item.operate_type == 'sendMsg' ||
item.is_user_send == 1 ||
item.from_id == shopInfo.id
"
>
<view class="shop u-flex u-row-right">
<view class="u-p-r-18">
@@ -50,8 +54,11 @@
>
<chatItem :item="item"></chatItem>
</view>
<view class="text-center u-m-t-20" v-if="item.msg_type==4&&item.hasGet">
<text>{{item.hasGet||0}}人已领取</text>
<view
class="text-center u-m-t-20"
v-if="item.msg_type == 4 && item.hasGet"
>
<text>{{ item.hasGet || 0 }}人已领取</text>
<text class="color-main">优惠券</text>
</view>
</view>
@@ -73,7 +80,7 @@
bg-color="#fff"
></up-avatar>
<view class="u-p-l-18">
<view class="color-000 u-line-1">{{ item.nick_name }}</view>
<view class="color-000 u-line-1">{{ item.nick }}</view>
<view
class="u-m-t-14 msg u-p-l-30"
:class="['type' + item.msg_type]"
@@ -116,7 +123,7 @@
<up-icon
name="plus-circle"
color="#666"
size="40rpx"
size="60rpx"
@click="showMoreBtnToggle"
v-else
></up-icon>
@@ -149,6 +156,7 @@
v-model="modalData.form.title"
placeholder="请输入自定义文案"
:placeholderStyle="placeholderStyle"
maxlength="12"
></up-input>
<view class="font-bold u-m-b-16 u-m-t-32">发放数量(张)</view>
@@ -161,6 +169,7 @@
<view class="font-bold u-m-b-16 u-m-t-32">每人限领量(张)</view>
<up-number-box
v-model="modalData.form.getLimit"
:max="modalData.form.giveNum"
inputWidth="240rpx"
@change="valChange"
></up-number-box>
@@ -174,13 +183,15 @@
import {
onReady,
onReachBottom,
onLoad,onShow,
onLoad,
onShow,
onPageScroll,
} from "@dcloudio/uni-app";
import {
ref,
inject,
onMounted,
onUnmounted,
nextTick,
reactive,
watch,
@@ -205,7 +216,6 @@ function refresherrefresh() {
if (isLoading.value || isEnd.value) {
scrollView.refresherTriggered = false; // 立即关闭刷新状态
if (isEnd.value) {
uni.showToast({ title: "没有更多了", icon: "none" });
}
return; // 终止后续逻辑
}
@@ -236,13 +246,16 @@ const modalData = reactive({
},
});
const chatStore = useChatStore();
chatStore.onReceiveMsg = (msg) => {
const handleReceiveMsg = (msg) => {
nextTick(() => {
scrollView.intoView = "msg-0";
});
};
// 注册消息回调
chatStore.registerReceiveMsgCallback(handleReceiveMsg);
const msg = ref("");
const shopInfo = uni.getStorageSync("shopInfo");
@@ -280,7 +293,6 @@ function moreBtnsClick(item, index) {
function videoErrorCallback(e) {
console.error("视频播放失败", e);
}
// 图片选择与发送优化
async function sendImg() {
try {
// 1. 调用图片选择API，添加fail回调
@@ -290,7 +302,7 @@ async function sendImg() {
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
success: resolve,
fail: reject // 捕获选择失败（含权限拒绝）
fail: reject, // 捕获选择失败（含权限拒绝）
});
});
@@ -327,7 +339,7 @@ async function sendVideo() {
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
success: resolve,
fail: reject // 捕获选择失败（含权限拒绝）
fail: reject, // 捕获选择失败（含权限拒绝）
});
});
@@ -365,8 +377,8 @@ function handlePermissionError(err, mediaType) {
"auth deny",
"permission denied",
"auth denied",
"用户拒绝"
].some(keyword => errMsg.includes(keyword));
"用户拒绝",
].some((keyword) => errMsg.includes(keyword));
if (isAuthDenied) {
// 弹窗提示用户，并引导至设置页
@@ -382,17 +394,17 @@ function handlePermissionError(err, mediaType) {
success: (settingRes) => {
console.log("设置页返回结果", settingRes);
// 可根据需要添加权限开启后的回调逻辑
}
},
});
}
}
},
});
} else {
// 其他错误（如取消选择），仅轻提示
if (!errMsg.includes("cancel")) {
uni.showToast({
title: `${mediaType}选择失败`,
icon: "none"
icon: "none",
});
}
}
@@ -405,6 +417,14 @@ async function init() {
});
console.log(res);
groupInfo.value = res || {};
if (res) {
chatStore.connectSocket();
// 确保状态监听已初始化
if (!chatStore._listenersInitialized) {
chatStore.initStateListeners();
chatStore._listenersInitialized = true;
}
}
getMsgList();
}
const query = reactive({
@@ -458,36 +478,33 @@ async function getMsgList() {
}
const options = reactive({});
const membersRes=reactive({
user_list:[]
})
const membersRes = reactive({
user_list: [],
});
onLoad((opt) => {
Object.assign(options, opt);
init();
chatApi.messageMarkReadAll({
session_ids: options.session_id,
session_ids: options.group_id,
});
chatStore.group_id = options.group_id;
chatApi.groupMembers({ group_id: options.group_id }).then((res) => {
console.log(res);
membersRes.user_list=res.user_list||[]
})
membersRes.user_list = res.user_list || [];
});
// #ifdef H5
scrollView.safeAreaHeight = uni.getSystemInfoSync().safeArea.height;
// #endif
});
onMounted(() => {
chatStore.connectSocket();
// 确保状态监听已初始化
if (!chatStore._listenersInitialized) {
chatStore.initStateListeners();
chatStore._listenersInitialized = true;
onShow(() => {
// 页面显示时，检查连接状态
if (!chatStore.isConnect || !chatStore.socketTask) {
console.log("聊天页显示，检查Socket连接");
chatStore.forceReconnect();
}
});
onShow(() => {
});
function toMore() {
go.to("PAGES_CHAT_GROUP_INFO", {
group_id: groupInfo.value.id,
@@ -508,7 +525,7 @@ function sendMsg(msg) {
content: msg.value,
image_url: "",
order_id: "",
session_id: groupInfo.value.session_id||options.session_id,
session_id: groupInfo.value.session_id || options.session_id,
...msg,
});
}
@@ -522,13 +539,13 @@ function closeModal() {
}
function confirmCoupon() {
console.log(modalData.form);
if (!modalData.form.title) {
uni.showToast({
title: "请输入自定义文案",
icon: "none",
});
return;
}
// if (!modalData.form.title) {
// uni.showToast({
// title: "请输入自定义文案",
// icon: "none",
// });
// return;
// }
if (!modalData.form.couponId) {
uni.showToast({
title: "请选择优惠券",
@@ -556,10 +573,15 @@ function confirmCoupon() {
modalData.show = false;
const couponJson = JSON.parse(res.couponJson);
sendMsg({
coupon: { ...couponJson, title: modalData.form.title,activity_id:res.id },
chat_coupon_id:res.id,
coupon: {
...couponJson,
title: modalData.form.title,
activity_id: res.id,
},
chat_coupon_id: res.id,
msg_type: 4,
});
closeModal();
} else {
uni.showToast({
title: "发送失败",
@@ -607,6 +629,11 @@ const pageHeight = computed(() => {
}
return "";
});
onUnmounted(() => {
// 组件卸载时，移除消息回调
chatStore.removeReceiveMsgCallback(handleReceiveMsg);
});
</script>
<style lang="scss" scoped>
.top {

106
pageChat/coupon-activity/detail.vue
View File

@@ -41,20 +41,29 @@
</view>
<view class="u-m-t-32 table bg-fff">
<view class="header">
<view class="header">
<view class="user">用户</view>
<view class="gettime">领取时间</view>
<view class="usetime">使用时间</view>
<view class="status">状态</view>
<view class="operation">操作</view>
</view>
<view class="body">
<view class="item" v-for="(item,index) in 10" :key="index">
<view class="user">用户昵称（40239）</view>
<view class="gettime">2025/06/27 20:07:18）</view>
<view class="usetime">2025/01/15 08:02:38</view>
<view class="status">已使用</view>
<view class="operation status3">失效</view>
<view class="body">
<view class="item" v-for="(item, index) in list" :key="index">
<view class="user">
<view>
{{ item.nickName }}
</view>
<view> ({{ item.shopUserId }}) </view>
</view>
<view class="gettime">{{ item.createTime }}</view>
<view class="usetime">{{ item.useTime }}</view>
<view class="status">{{ returnStatus(item.status) }}</view>
<view class="operation status3">
<text v-if="item.status == 0" @click="deleteRecord(item)"
>失效</text
></view
>
</view>
</view>
</view>
@@ -70,12 +79,49 @@ import { reactive, ref, watch } from "vue";
import { onShow } from "@dcloudio/uni-app";
import go from "@/commons/utils/go.js";
import * as chatCouponApi from "@/http/api/market/chat";
function deleteRecord(item) {
uni
.showModal({
title: "提示",
content: "确定要让该记录失效吗？",
})
.then((res) => {
if (res.confirm) {
chatCouponApi
.deleteRecord({
id: item.id,
})
.then((res) => {
uni.showToast({
title: "操作成功",
icon: "none",
});
setTimeout(() => {
refresh();
}, 1000);
});
}
});
}
const statusOptions = ref([
{ label: "全部", value: "" },
{ label: "未使用", value: 0 },
{ label: "已使用", value: 1 },
{ label: "已过期", value: 2 },
]);
function returnStatus(status) {
if (status == 0) {
return "未使用";
}
if (status == 1) {
return "已使用";
}
if (status == 2) {
return "已过期";
}
}
const selStatus = ref("");
const query = reactive({
page: 1,
@@ -146,39 +192,39 @@ onLoad((opt) => {
display: flex;
justify-content: space-between;
}
.table{
.user{
.table {
.user {
width: 142rpx;
}
.gettime{
.gettime {
width: 172rpx;
}
.usetime{
.usetime {
width: 158rpx;
}
.status{
.status {
width: 84rpx;
}
.operation{
.operation {
width: 56rpx;
&.status3{
color: #FF383C;
&.status3 {
color: #ff383c;
}
}
.header{
display: flex;
justify-content: space-between;
padding: 32rpx 16rpx;
color: #666;
border-bottom: 1px solid #E5E5E5;
}
.body{
.item{
display: flex;
justify-content: space-between;
padding: 24rpx 16rpx;
border-bottom: 1px solid #E5E5E5;
}
.header {
display: flex;
justify-content: space-between;
padding: 32rpx 16rpx;
color: #666;
border-bottom: 1px solid #e5e5e5;
}
.body {
.item {
display: flex;
justify-content: space-between;
padding: 24rpx 16rpx;
border-bottom: 1px solid #e5e5e5;
}
}
}
</style>

74
pageChat/group-info/index.vue
View File

@@ -2,7 +2,7 @@
<view class="min-page bg-f7 u-font-28">
<view class="user-list bg-fff">
<view class="u-flex u-row-between u-col-center">
<text class="color-000">群成员（{{allUser.length}}人）</text>
<text class="color-000">群成员（{{ allUser.length }}人）</text>
<text class="color-red" @click="showRemove = !showRemove">移除</text>
</view>
<view class="list u-m-t-26">
@@ -17,7 +17,9 @@
:src="item.avatar"
round="8rpx"
></up-avatar>
<view class="u-m-t-8 color-000 u-line-1" style="max-width: 104rpx;">{{ item.nick_name }}</view>
<view class="u-m-t-8 color-000 u-line-1" style="max-width: 104rpx">{{
item.nick_name
}}</view>
<view
class="remove u-absolute"
v-if="showRemove && item.role != 1"
@@ -40,7 +42,10 @@
</view>
<view class="bottom">
<view class="u-flex u-row-between default-padding bg-fff border-bottom">
<view
class="u-flex u-row-between default-padding bg-fff border-bottom"
@click="toEditTitle"
>
<text>群聊名称</text>
<view class="u-flex color-666">
<text>{{ groupInfo.name }}</text>
@@ -77,6 +82,17 @@
</view>
</view>
</view>
<Modal v-model="modalData.show" title="修改群名称" @confirm="modalConfirm">
<view class="u-p-40">
<view class="font-bold u-m-b-16">群名称</view>
<up-input
v-model="modalData.form.title"
placeholder="请输入群名称"
maxlength="20"
></up-input>
</view>
</Modal>
</view>
</template>
<script setup>
@@ -84,10 +100,50 @@ import go from "@/commons/utils/go.js";
import * as chatApi from "@/http/php/chat";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { reactive, toRefs, computed, watch, onMounted, ref } from "vue";
import Modal from "@/pageChat/components/modal.vue";
const options = reactive({});
const groupInfo = ref({});
onLoad((opt) => {
Object.assign(options, opt);
const modalData = reactive({
show: false,
form: {
title: "",
},
key: "editTitle",
});
function toEditTitle() {
modalData.show = true;
modalData.form.title = groupInfo.value.name || "";
}
function modalConfirm(e) {
if (modalData.key == "editTitle") {
if (!modalData.form.title.trim().length) {
uni.showToast({
title: "请输入群名称",
icon: "none",
});
return;
}
chatApi
.groupEditTitle({
group_id: options.group_id,
title: modalData.form.title,
})
.then((res) => {
if (res) {
groupInfo.value.name = modalData.form.title;
modalData.show = false;
uni.showToast({
title: "修改成功",
icon: "none",
});
}
});
}
}
function getGroupInfo() {
chatApi
.groupInfo({
group_id: options.group_id,
@@ -95,6 +151,10 @@ onLoad((opt) => {
.then((res) => {
groupInfo.value = res || {};
});
}
onLoad((opt) => {
Object.assign(options, opt);
getGroupInfo();
});
function groupMuteChange(e) {
if (e) {
@@ -137,8 +197,8 @@ function getMembers() {
});
}
function loadMore() {
userLists.value=allUser.value
function loadMore() {
userLists.value = allUser.value;
}
onShow(() => {
getMembers();

131
pageChat/index.vue
View File

@@ -19,36 +19,37 @@
</up-sticky>
<view class="list">
<up-swipe-action>
<up-swipe-action-item
:options="options1"
v-for="(item, index) in list"
v-model:show="item.showOptions"
@click="optionsClick($event, item, index)"
:key="item.id"
>
<view class="item u-flex" @click="toDetail(item)">
<view class="u-flex avatar">
<up-avatar
size="118rpx"
:src="item.avatar"
shape="square"
round="8rpx"
></up-avatar>
<view class="bandage" v-if="item.unread_count > 0">{{
item.unread_count >= 99 ? "99" : item.unread_count
}}</view>
</view>
<view class="u-flex-1 u-flex u-row-between u-p-l-14">
<view style="max-width: 364rpx">
<view class="color-000 u-line-1">{{ item.name }}</view>
<view class="u-m-t-28 u-line-1 u-font-24 color-999">{{
item.msg
<template v-for="(item, index) in list" :key="item.id">
<up-swipe-action-item
:options="options1"
v-model:show="item.showOptions"
@click="optionsClick($event, item, index)"
>
<view class="item u-flex" @click="toDetail(item)">
<view class="u-flex avatar">
<up-avatar
size="118rpx"
:src="item.avatar"
shape="square"
round="8rpx"
></up-avatar>
<view class="bandage" v-if="item.unread_count > 0">{{
item.unread_count >= 99 ? "99" : item.unread_count
}}</view>
</view>
<view class="color-333 u-font-24">{{ item.send_time }}</view>
<view class="u-flex-1 u-flex u-row-between u-p-l-14">
<view style="max-width: 364rpx">
<view class="color-000 u-line-1">{{ item.name }}</view>
<view class="u-m-t-28 u-line-1 u-font-24 color-999">{{
item.msg
}}</view>
</view>
<view class="color-333 u-font-24">{{ item.send_time }}</view>
</view>
</view>
</view>
</up-swipe-action-item>
</up-swipe-action-item>
<view style="height: 16rpx" class="bg-f7"></view>
</template>
</up-swipe-action>
</view>
</view>
@@ -56,45 +57,49 @@
<script setup>
import * as chatApi from "@/http/php/chat";
import { ref, reactive, inject, onMounted,onUnmounted } from "vue";
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { useChatStore } from "@/store/chat";
import dayjs from "dayjs";
const chatStore = useChatStore();
onMounted(() => {
chatStore.connectSocket();
// 确保状态监听已初始化
if (!chatStore._listenersInitialized) {
chatStore.initStateListeners();
chatStore._listenersInitialized = true;
const originalOnReceiveMsg = chatStore.onReceiveMsg;
// 定义消息回调函数
const handleReceiveMsg = (msg) => {
// 先执行原始回调（如果有）
if (typeof originalOnReceiveMsg === "function") {
originalOnReceiveMsg(msg);
}
});
const startReciveMsg=ref(true)
onUnmounted(() => {
startReciveMsg.value=false
})
chatStore.onReceiveMsg = (msg) => {
if(!startReciveMsg.value){
return
}
if (msg.operate_type == "receive_msg" && msg.chat_type == 2) {
const index = allList.value.findIndex((v) => v.group_id == msg.group_id);
if (index != -1) {
allList.value[index].unread_count += 1;
allList.value[index].msg = returnMsg(msg);
allList.value[index].send_time = msg.send_time;
allList.value[index].send_time_origin = msg.send_time_origin;
allList.value = listSort(allList.value);
}
const index1 = list.value.findIndex((v) => v.group_id == msg.group_id);
if (index1 != -1) {
list.value[index1].unread_count += 1;
list.value[index1].msg = returnMsg(msg);
list.value[index1].send_time = msg.send_time;
list.value[index1].send_time_origin = msg.send_time_origin;
list.value = listSort(list.value);
}
}
};
onMounted(() => {
chatStore.registerReceiveMsgCallback(handleReceiveMsg);
});
onUnmounted(() => {
// 移除消息回调，避免内存泄漏
chatStore.removeReceiveMsgCallback(handleReceiveMsg);
});
function returnMsg(msg) {
if (msg.msg_type == 1) {
return msg.nick + "：" + msg.content;
@@ -168,7 +173,7 @@ function throttle(fn, delay) {
//使用节流函数
const throttleSearch = throttle(search, 500);
function search() {
list.value = allList.value
const arr = allList.value
.filter((v) => v.name.includes(query.key.trim()))
.map((v) => {
return {
@@ -176,10 +181,20 @@ function search() {
showOptions: false,
};
});
list.value = listSort(arr);
}
function listSort(arr) {
return arr.sort((a, b) => {
return dayjs(b.send_time_origin).unix() - dayjs(a.send_time_origin).unix();
});
}
async function getList() {
const res = await chatApi.messageSessionList({});
allList.value = (res.list || []).filter((v) => !v.is_del);
const arr = (res.list || []).filter((v) => !v.is_del);
allList.value = listSort(arr);
search();
}
@@ -190,7 +205,7 @@ async function clearAllmsg() {
success: async (res) => {
if (res.confirm) {
const res = await chatApi.messageMarkReadAll({
session_ids: list.value.map((v) => v.session_id).join(","),
session_ids: list.value.map((v) => v.group_id).join(","),
});
if (res) {
uni.showToast({
@@ -224,8 +239,16 @@ function toDetail(item) {
const messageUnreadCount = ref(0);
onShow(() => {
startReciveMsg.value=true
getList();
// 检查连接状态，确保连接活跃
if (!chatStore.isConnect || !chatStore.socketTask) {
console.log("列表页显示，检查Socket连接");
chatStore.forceReconnect();
} else {
chatStore.shop_id = "";
chatStore.init();
}
// 获取未读消息总数
chatApi.messageUnreadCount({}).then((res) => {
console.log(res);
@@ -245,13 +268,11 @@ onShow(() => {
}
.list {
padding: 36rpx 28rpx;
.item {
padding: 32rpx 28rpx;
background-color: #fff;
border-radius: 16rpx;
display: flex;
flex-direction: column;
gap: 16rpx;
.avatar {
position: relative;
.bandage {
@@ -273,4 +294,10 @@ onShow(() => {
}
}
}
:deep(.u-swipe-action-item__content) {
background-color: transparent;
}
:deep(.u-swipe-action-item) {
border-radius: 16rpx;
}
</style>

159
store/chat.js
View File

@@ -16,10 +16,13 @@ export const useChatStore = defineStore("chat", {
socketTask: null,
onReceiveMsg: () => {},
chatList: [],
shop_id: uni.getStorageSync("shopId"),
token: uni.getStorageSync("iToken").tokenValue || "",
group_id:'',
isManualClose: false, // 是否主动关闭（true：不重连；false：自动重连）
heartbeatTimer: null, // 心跳定时器
reconnectTimer: null, // 重连定时器
connectionMonitorTimer: null, // 连接状态监控定时器
reconnectCount: 0, // 当前重连次数
maxReconnectCount: 5, // 最大重连次数（避免无限重连）
reconnectDelay: 1000, // 初始重连延迟（ms）
@@ -28,6 +31,7 @@ export const useChatStore = defineStore("chat", {
isAppActive: true, // 应用是否在前台
lastHeartbeatTime: 0, // 上次心跳时间戳
lastConnectTime: 0, // 上次连接时间（防止短时间内频繁连接）
// ========== 新增：修复未定义的状态 ==========
_listenersInitialized: false, // 状态监听器是否已初始化
@@ -39,6 +43,9 @@ export const useChatStore = defineStore("chat", {
recentMessages: new Map(), // 最近处理的消息映射表：key=消息特征哈希，value=处理时间戳
deduplicationWindow: 5000, // 去重时间窗口（5秒内相同消息只处理一次）
maxRecentMessages: 100, // 最近消息缓存最大数量
// ========== 新增：多页面消息监听支持 ==========
receiveMsgCallbacks: [], // 消息接收回调队列，支持多页面同时监听
};
},
@@ -91,6 +98,7 @@ export const useChatStore = defineStore("chat", {
// 2. 重置重连状态
this.reconnectCount = 0;
this.stopHeartbeat();
this.stopConnectionMonitor();
// 3. 立即重新连接
setTimeout(() => {
@@ -128,13 +136,14 @@ export const useChatStore = defineStore("chat", {
{
type: "OnbocChat",
operate_type: "init",
shop_id: uni.getStorageSync("shopId"),
token: uni.getStorageSync("iToken").tokenValue || "",
shop_id: this.shop_id,
token: this.token,
},
false
);
},
// ========== 增强发送消息容错性 ==========
sendMessage(msg, isAutoAppend = true) {
// 1. 主动关闭状态：提示用户
if (this.isManualClose) {
@@ -144,13 +153,14 @@ export const useChatStore = defineStore("chat", {
});
}
// 2. 连接未建立：尝试重连后发送
if (!this.isConnect) {
// 2. 连接未建立或SocketTask失效：尝试重连后发送
if (!this.isConnect || !this.socketTask) {
console.warn("Socket连接未建立，尝试重连...");
this.reconnect();
// 延迟发送，确保重连成功
// 延长延迟时间，确保重连完成
setTimeout(() => {
this.sendMessage(msg, isAutoAppend);
}, this.reconnectDelay);
}, 1500);
return;
}
@@ -166,25 +176,41 @@ export const useChatStore = defineStore("chat", {
}
: msg;
this.socketTask.send({
data: JSON.stringify(message),
success: (res) => {
console.log("发送成功", res);
},
fail: (error) => {
console.log("发送失败", error);
// 发送失败可能是连接断开，触发重连
if (!this.isManualClose) {
this.reconnect();
}
},
});
try {
this.socketTask.send({
data: JSON.stringify(message),
success: (res) => {
console.log("发送成功", res);
},
fail: (error) => {
console.error("发送失败，触发重连", error);
// 发送失败可能是连接断开，触发重连
if (!this.isManualClose) {
this.forceReconnect();
// 重连后重试发送
setTimeout(() => {
this.sendMessage(msg, isAutoAppend);
}, 1500);
}
},
});
} catch (error) {
console.error("发送消息异常，触发重连", error);
// 捕获异常，立即重连
if (!this.isManualClose) {
this.forceReconnect();
// 重连后重试发送
setTimeout(() => {
this.sendMessage(msg, isAutoAppend);
}, 1500);
}
}
},
// ========== 发送心跳包 ==========
sendHeartbeat() {
// 应用在后台时可调整心跳策略（如降低频率）
if (!this.isConnect || this.isManualClose) return;
if (!this.isConnect || this.isManualClose || !this.socketTask) return;
const now = Date.now();
// 记录心跳时间
@@ -196,7 +222,7 @@ export const useChatStore = defineStore("chat", {
}),
fail: (error) => {
console.log("心跳发送失败，触发重连", error);
this.reconnect();
this.forceReconnect();
},
});
},
@@ -224,6 +250,31 @@ export const useChatStore = defineStore("chat", {
this.heartbeatTimer = null;
}
},
// ========== 新增：启动连接状态监控 ==========
startConnectionMonitor() {
// 清除旧定时器
if (this.connectionMonitorTimer) {
clearInterval(this.connectionMonitorTimer);
}
// 每30秒检查一次连接状态
this.connectionMonitorTimer = setInterval(() => {
// 如果应该连接但实际未连接，触发重连
if (!this.isManualClose && this.isConnect && !this.socketTask) {
console.warn("连接监控：发现连接状态异常，强制重置");
this.forceReconnect();
}
}, 30000);
},
// ========== 新增：停止连接状态监控 ==========
stopConnectionMonitor() {
if (this.connectionMonitorTimer) {
clearInterval(this.connectionMonitorTimer);
this.connectionMonitorTimer = null;
}
},
// ========== 智能重连逻辑 ==========
reconnect() {
@@ -235,19 +286,26 @@ export const useChatStore = defineStore("chat", {
console.log("正在建立连接中，跳过重连");
return;
}
// 3. 短时间内已尝试连接：不重连（防止频繁连接）
const now = Date.now();
if (now - this.lastConnectTime < 1000) {
console.log("短时间内已尝试连接，跳过重连");
return;
}
// 3. 超过最大重连次数：停止重连
// 4. 超过最大重连次数：停止重连
if (this.reconnectCount >= this.maxReconnectCount) {
console.log("已达最大重连次数，停止重连");
return;
}
// 4. 清除旧重连定时器
// 5. 清除旧重连定时器
if (this.reconnectTimer) {
clearTimeout(this.reconnectTimer);
}
// 5. 计算重连延迟（退避算法：1s → 2s → 4s → 8s → 8s...）
// 6. 计算重连延迟（退避算法：1s → 2s → 4s → 8s → 8s...）
const delay = Math.min(
this.reconnectDelay * Math.pow(2, this.reconnectCount),
this.maxReconnectDelay
@@ -255,7 +313,7 @@ export const useChatStore = defineStore("chat", {
console.log(`第${this.reconnectCount + 1}次重连，延迟${delay}ms`);
// 6. 延迟执行重连
// 7. 延迟执行重连
this.reconnectTimer = setTimeout(() => {
this.connectSocket();
this.reconnectCount++;
@@ -271,11 +329,18 @@ export const useChatStore = defineStore("chat", {
isConnecting: this.isConnecting,
isManualClose: this.isManualClose
});
// 关键：如果 socketTask 已失效但 isConnect 为 true，强制重置状态
if (this.isConnect && !this.socketTask) {
console.warn("Socket连接状态异常，强制重置");
this.isConnect = false;
this.forceReconnect();
}
return;
}
// 2. 设置连接中状态
this.isConnecting = true;
this.lastConnectTime = Date.now();
// 3. 重置主动关闭标记
this.isManualClose = false;
@@ -309,6 +374,7 @@ export const useChatStore = defineStore("chat", {
// 缩短心跳间隔到15s（更频繁的心跳维持连接活跃）
this.heartbeatInterval = 15000;
this.startHeartbeat();
this.startConnectionMonitor(); // 启动连接状态监控
// 初始化状态监听（仅在首次连接时执行）
if (!this._listenersInitialized) {
@@ -357,7 +423,7 @@ export const useChatStore = defineStore("chat", {
this.isConnect = false;
this.isConnecting = false;
// 错误触发重连
this.reconnect();
this.forceReconnect();
});
// 8. 连接关闭回调（区分主动/意外关闭）
@@ -367,6 +433,7 @@ export const useChatStore = defineStore("chat", {
this.isConnect = false;
this.isConnecting = false;
this.stopHeartbeat(); // 停止心跳
this.stopConnectionMonitor(); // 停止连接状态监控
// 只有非主动关闭时才重连
if (!this.isManualClose) {
@@ -410,8 +477,41 @@ export const useChatStore = defineStore("chat", {
}
// 5. 正常处理消息
this.chatList.unshift(msg);
this.onReceiveMsg(msg);
if(this.group_id==msg.to_id){
this.chatList.unshift(msg);
}
// 触发所有消息回调（支持多页面同时监听）
this.triggerReceiveMsgCallbacks(msg);
},
// ========== 新增：触发消息回调 ==========
triggerReceiveMsgCallbacks(msg) {
// 调用旧的单个回调（兼容原有代码）
if (typeof this.onReceiveMsg === 'function') {
this.onReceiveMsg(msg);
}
// 调用所有注册的回调
this.receiveMsgCallbacks.forEach(callback => {
if (typeof callback === 'function') {
callback(msg);
}
});
},
// ========== 新增：注册消息回调 ==========
registerReceiveMsgCallback(callback) {
if (typeof callback === 'function' && !this.receiveMsgCallbacks.includes(callback)) {
this.receiveMsgCallbacks.push(callback);
}
},
// ========== 新增：移除消息回调 ==========
removeReceiveMsgCallback(callback) {
const index = this.receiveMsgCallbacks.indexOf(callback);
if (index > -1) {
this.receiveMsgCallbacks.splice(index, 1);
}
},
// ========== 新增：生成消息特征哈希 ==========
@@ -468,6 +568,7 @@ export const useChatStore = defineStore("chat", {
// 2. 停止所有定时器，清理资源
this.stopHeartbeat();
this.stopConnectionMonitor();
if (this.reconnectTimer) {
clearTimeout(this.reconnectTimer);
this.reconnectTimer = null;