5 Commits

Author SHA1 Message Date
06ec029555 feat:重连调整 2026-01-08 17:01:47 +08:00
af615f666c feat: 消息与socket的优化调整 2026-01-08 16:26:10 +08:00
fb15b8aec1 feat: 发送消息的优化 2026-01-08 15:03:43 +08:00
7239313f0f feat: 优化发送消息的中断重连问题 2026-01-08 14:46:44 +08:00
5d98b76fd1 feat: 日期选择的调整 2026-01-07 12:12:01 +08:00
6 changed files with 531 additions and 169 deletions

View File

@@ -27,6 +27,18 @@
</view> </view>
<uni-icons type="calendar" size="20" color="#1890ff"></uni-icons> <uni-icons type="calendar" size="20" color="#1890ff"></uni-icons>
</view> </view>
<!-- 价格区间选择示例 -->
<view class="date-input" @tap="openPriceRangeCalendar">
<view class="input-content">
<text class="input-label">选择有价格的日期范围</text>
<text class="input-value" v-if="selectedRange.start && selectedRange.end">
{{ selectedRange.start }} {{ selectedRange.end }}
</text>
<text class="input-placeholder" v-else>请选择价格区间仅含有价夜晚</text>
</view>
<uni-icons type="calendar" size="20" color="#1890ff"></uni-icons>
</view>
</view> </view>
<!-- 结果显示区域 --> <!-- 结果显示区域 -->
@@ -35,11 +47,13 @@
<view class="result-item" v-if="selectedDate"> <view class="result-item" v-if="selectedDate">
<text class="result-label">单选日期</text> <text class="result-label">单选日期</text>
<text class="result-value">{{ selectedDate }}</text> <text class="result-value">{{ selectedDate }}</text>
<text class="result-value" v-if="selectedDatePrice"> ¥{{ selectedDatePrice }} </text>
</view> </view>
<view class="result-item" v-if="selectedRange.start && selectedRange.end"> <view class="result-item" v-if="selectedRange.start && selectedRange.end">
<text class="result-label">日期范围</text> <text class="result-label">日期范围</text>
<text class="result-value">{{ selectedRange.start }} {{ selectedRange.end }}</text> <text class="result-value">{{ selectedRange.start }} {{ selectedRange.end }}</text>
<text class="result-days">{{ rangeDays }}</text> <text class="result-days">{{ rangeDays }}</text>
<text class="result-value" v-if="selectedRangeTotal"> 总价¥{{ selectedRangeTotal }} </text>
</view> </view>
</view> </view>
@@ -62,6 +76,17 @@
@close="handleRangeCalendarClose" @close="handleRangeCalendarClose"
@range-select="handleRangeSelect" @range-select="handleRangeSelect"
/> />
<!-- 日历组件 - 价格区间选择模式必须有价格的夜晚 -->
<Calendar
:visible="priceRangeCalendarVisible"
:price-data="priceData"
mode="range"
:range-require-price="true"
:default-value="[selectedRange.start, selectedRange.end]"
@close="handleRangeCalendarClose"
@range-select="handlePriceRangeSelect"
/>
</view> </view>
</template> </template>
@@ -72,11 +97,14 @@ import Calendar from './index.vue'
// 响应式数据 // 响应式数据
const calendarVisible = ref(false) const calendarVisible = ref(false)
const rangeCalendarVisible = ref(false) const rangeCalendarVisible = ref(false)
const priceRangeCalendarVisible = ref(false)
const selectedDate = ref('') const selectedDate = ref('')
const selectedDatePrice = ref(null)
const selectedRange = ref({ const selectedRange = ref({
start: '', start: '',
end: '' end: ''
}) })
const selectedRangeTotal = ref(null)
// 模拟价格数据 // 模拟价格数据
const priceData = ref({ const priceData = ref({
@@ -116,6 +144,11 @@ const openRangeCalendar = () => {
rangeCalendarVisible.value = true rangeCalendarVisible.value = true
} }
// 打开价格区间选择器(必须以价格为准)
const openPriceRangeCalendar = () => {
priceRangeCalendarVisible.value = true
}
// 处理单选日历关闭 // 处理单选日历关闭
const handleCalendarClose = () => { const handleCalendarClose = () => {
calendarVisible.value = false calendarVisible.value = false
@@ -129,6 +162,7 @@ const handleRangeCalendarClose = () => {
// 处理日期选择 // 处理日期选择
const handleDateSelect = (data) => { const handleDateSelect = (data) => {
selectedDate.value = data.date selectedDate.value = data.date
selectedDatePrice.value = (data.price !== undefined && data.price !== null && data.price !== '-') ? data.price : null
calendarVisible.value = false calendarVisible.value = false
console.log('选择的日期:', data) console.log('选择的日期:', data)
} }
@@ -139,9 +173,37 @@ const handleRangeSelect = (data) => {
start: data.startDate, start: data.startDate,
end: data.endDate end: data.endDate
} }
if (data.dateRange && Array.isArray(data.dateRange)) {
const total = data.dateRange.reduce((sum, d) => {
const p = d.price
return sum + (typeof p === 'number' ? p : 0)
}, 0)
selectedRangeTotal.value = total || null
} else {
selectedRangeTotal.value = null
}
rangeCalendarVisible.value = false rangeCalendarVisible.value = false
console.log('选择的日期范围:', data) console.log('选择的日期范围:', data)
} }
// 处理价格区间选择
const handlePriceRangeSelect = (data) => {
selectedRange.value = {
start: data.startDate,
end: data.endDate
}
if (data.dateRange && Array.isArray(data.dateRange)) {
const total = data.dateRange.reduce((sum, d) => {
const p = d.price
return sum + (typeof p === 'number' ? p : 0)
}, 0)
selectedRangeTotal.value = total || null
} else {
selectedRangeTotal.value = null
}
priceRangeCalendarVisible.value = false
console.log('价格区间选择:', data)
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@@ -11,7 +11,7 @@
<view class="calendar-header"> <view class="calendar-header">
<view class="header-content"> <view class="header-content">
<text class="header-title">日历选择</text> <text class="header-title">日历选择</text>
<text class="header-subtitle" <text v-if="props.rangeRequirePrice" class="header-subtitle"
>选择住宿日期以下价格为单晚参考价</text >选择住宿日期以下价格为单晚参考价</text
> >
</view> </view>
@@ -50,9 +50,7 @@
{{ dateInfo.label }} {{ dateInfo.label }}
</text> </text>
<text class="date-number">{{ dateInfo.day }}</text> <text class="date-number">{{ dateInfo.day }}</text>
<text class="date-price" v-if="dateInfo.price" <text class="date-price" v-if="dateInfo.price !== null && dateInfo.price !== undefined">¥{{ dateInfo.price }}</text>
>¥{{ dateInfo.price }}</text
>
</template> </template>
</view> </view>
</view> </view>
@@ -91,9 +89,10 @@ const props = defineProps({
}, },
// 价格数据数组 // 价格数据数组
// 格式: [{ date: '2024-05-17', price: 449, stock: 3 }, ...]
priceData: { priceData: {
type: Array, type: [Object, Array],
default: () => [{ date: "", price: "-", stock: "0" }], default: () => ({}),
}, },
// 默认选中日期 // 默认选中日期
@@ -109,6 +108,12 @@ const props = defineProps({
validator: (value) => ["single", "range"].includes(value), validator: (value) => ["single", "range"].includes(value),
}, },
// 范围选择时是否必须有价格(作为价格区间选择器)
rangeRequirePrice: {
type: Boolean,
default: false,
},
// 最小可选日期 // 最小可选日期
minDate: { minDate: {
type: String, type: String,
@@ -202,14 +207,36 @@ const getFirstDayOfMonth = (year, month) => {
return day === 0 ? 6 : day - 1; // 转换为周一开始 (0=周一, 6=周日) return day === 0 ? 6 : day - 1; // 转换为周一开始 (0=周一, 6=周日)
}; };
// 获取指定日期的价格 // 获取指定日期的价格项(兼容对象或者数组)
const getPriceForDate = (dateStr) => { const getPriceItem = (dateStr) => {
if (!props.priceData || !Array.isArray(props.priceData)) { if (!props.priceData) return null;
// 对象映射格式:{ '2024-05-17': 449 }
if (!Array.isArray(props.priceData) && typeof props.priceData === "object") {
if (Object.prototype.hasOwnProperty.call(props.priceData, dateStr)) {
const val = props.priceData[dateStr];
// 可能只是数字价格,也可能是对象
if (val !== null && typeof val === "object") {
return { date: dateStr, price: val.price, stock: val.stock };
}
return { date: dateStr, price: val };
}
return null; return null;
} }
const priceItem = props.priceData.find((item) => item.date === dateStr); // 数组格式:[{date, price, stock}, ...]
return priceItem ? priceItem.price : null; if (Array.isArray(props.priceData)) {
const item = props.priceData.find((it) => it.date === dateStr);
return item || null;
}
return null;
};
// 获取价格值便捷函数
const getPriceForDate = (dateStr) => {
const item = getPriceItem(dateStr);
return item ? item.price : null;
}; };
// 生成日历网格数据 // 生成日历网格数据
@@ -228,10 +255,12 @@ const generateCalendarGrid = (year, month) => {
const dateStr = `${year}-${String(month).padStart(2, "0")}-${String( const dateStr = `${year}-${String(month).padStart(2, "0")}-${String(
day day
).padStart(2, "0")}`; ).padStart(2, "0")}`;
const priceItem = getPriceItem(dateStr);
grid.push({ grid.push({
date: dateStr, date: dateStr,
day: day, day: day,
price: getPriceForDate(dateStr), price: priceItem ? priceItem.price : null,
stock: priceItem ? priceItem.stock : undefined,
disabled: isDateDisabled(dateStr), disabled: isDateDisabled(dateStr),
selected: isDateSelected(dateStr), selected: isDateSelected(dateStr),
inRange: isDateInRange(dateStr), inRange: isDateInRange(dateStr),
@@ -248,10 +277,14 @@ const isDateDisabled = (dateStr) => {
const minDate = new Date(props.minDate); const minDate = new Date(props.minDate);
const maxDate = props.maxDate ? new Date(props.maxDate) : null; const maxDate = props.maxDate ? new Date(props.maxDate) : null;
// 过去或超出范围
if (date < minDate) return true; if (date < minDate) return true;
if (maxDate && date > maxDate) return true; if (maxDate && date > maxDate) return true;
if (props.disabledDates.includes(dateStr)) return true; if (props.disabledDates.includes(dateStr)) return true;
// 注意:不在此处基于价格全局禁用日期,
// 允许未定价的日期被点击作为离店日(结束日),
// 价格校验在范围完成时对夜晚(不含离店日)进行。
return false; return false;
}; };
@@ -310,13 +343,28 @@ const getDateCellClass = (dateInfo) => {
if (dateInfo.disabled) classes.push("date-cell-disabled"); if (dateInfo.disabled) classes.push("date-cell-disabled");
if (dateInfo.selected) classes.push("date-cell-selected"); if (dateInfo.selected) classes.push("date-cell-selected");
if (dateInfo.inRange) classes.push("date-cell-in-range"); if (dateInfo.inRange) classes.push("date-cell-in-range");
// 标注无价格但可选的日期(用于视觉区分)
if (dateInfo.price === null || dateInfo.price === undefined || dateInfo.price === "-") {
classes.push("date-cell-no-price");
}
return classes.join(" "); return classes.join(" ");
}; };
// 处理日期点击 // 处理日期点击
const handleDateClick = (dateInfo) => { const handleDateClick = (dateInfo) => {
if (!dateInfo || dateInfo.disabled) return; if (!dateInfo) return;
if (dateInfo.disabled) {
uni.showToast({ title: "该日期不可选", icon: "none" });
// 仍然触发点击事件,供上层参考
emit("date-click", {
date: dateInfo.date,
price: dateInfo.price,
disabled: dateInfo.disabled,
selected: dateInfo.selected,
});
return;
}
// 防抖处理 // 防抖处理
if (clickTimer.value) { if (clickTimer.value) {
@@ -352,59 +400,79 @@ const handleSingleSelect = (dateInfo) => {
// 处理范围选择 // 处理范围选择
const handleRangeSelection = (dateInfo) => { const handleRangeSelection = (dateInfo) => {
if (dateInfo.price === undefined || dateInfo.price === null || dateInfo.stock === '' || dateInfo.price === '-') { // 如果当前没有开始日期或已经完成一次选择,则此次点击作为开始日期
uni.showToast({
title: "所选日期不可预订,请重新选择",
icon: "none",
});
return;
}
if (!rangeStart.value || (rangeStart.value && rangeEnd.value)) { if (!rangeStart.value || (rangeStart.value && rangeEnd.value)) {
// 开始新的范围选择 // 开始新的范围选择:当作为价格区间选择器时,开始日必须有价格且有库存
if (props.rangeRequirePrice) {
const hasPrice = dateInfo.price !== null && dateInfo.price !== undefined && dateInfo.price !== "-";
if (!hasPrice) {
uni.showToast({ title: "所选日期不可预订,请重新选择", icon: "none" });
return;
}
if (dateInfo.stock !== undefined && Number(dateInfo.stock) <= 0) {
uni.showToast({ title: "所选日期库存不足,请选择其他日期", icon: "none" });
return;
}
}
rangeStart.value = dateInfo.date; rangeStart.value = dateInfo.date;
rangeEnd.value = null; rangeEnd.value = null;
isRangeSelecting.value = true; isRangeSelecting.value = true;
} else { return;
// 完成范围选择 }
rangeEnd.value = dateInfo.date;
// 否则为结束日期(完成选择)——结束日允许无价格(如为紧接有价日的下一天),但区间内的夜晚必须有价格
rangeEnd.value = dateInfo.date;
isRangeSelecting.value = false;
// 允许选择相同日期,但确保开始日期不大于结束日期
if (new Date(rangeStart.value) > new Date(rangeEnd.value)) {
[rangeStart.value, rangeEnd.value] = [rangeEnd.value, rangeStart.value];
}
// 检查日期跨度是否超过28天
const daysBetween = calculateDaysBetween(rangeStart.value, rangeEnd.value);
if (daysBetween > 28) {
uni.showToast({ title: "预定时间不能超过28天", icon: "none", duration: 3000 });
rangeStart.value = null;
rangeEnd.value = null;
isRangeSelecting.value = false; isRangeSelecting.value = false;
return;
}
// 允许选择相同日期,但确保开始日期不大于结束日期 // 如果作为价格区间选择器,验证夜晚(不包含离店日)是否都有价格/库存
if (new Date(rangeStart.value) > new Date(rangeEnd.value)) { if (props.rangeRequirePrice) {
[rangeStart.value, rangeEnd.value] = [rangeEnd.value, rangeStart.value]; const nights = generateNightsRange(rangeStart.value, rangeEnd.value);
} const missing = nights.find((d) => d.price === null || d.price === undefined || d.price === "-");
if (missing) {
// 检查日期跨度是否超过28天相同日期跨度为0天允许通过 uni.showToast({ title: "所选区间包含无价格日期,请重新选择", icon: "none" });
const daysBetween = calculateDaysBetween(rangeStart.value, rangeEnd.value);
if (daysBetween > 28) {
// 使用uni.showToast显示错误提示
uni.showToast({
title: "预定时间不能超过28天",
icon: "none",
duration: 3000,
});
// 重置选择状态
rangeStart.value = null; rangeStart.value = null;
rangeEnd.value = null; rangeEnd.value = null;
isRangeSelecting.value = false;
return; return;
} }
// 生成范围内所有日期的数组 const badStock = nights.find((d) => {
const dateRange = generateDateRange(rangeStart.value, rangeEnd.value); const item = getPriceItem(d.date);
return item && item.stock !== undefined && Number(item.stock) <= 0;
emit("range-select", {
startDate: rangeStart.value,
endDate: rangeEnd.value,
startPrice: getPriceForDate(rangeStart.value),
endPrice: getPriceForDate(rangeEnd.value),
totalDays: daysBetween,
dateRange: dateRange, // 新增:范围内所有日期的数组
}); });
if (badStock) {
uni.showToast({ title: "所选区间包含库存不足的日期,请重新选择", icon: "none" });
rangeStart.value = null;
rangeEnd.value = null;
return;
}
} }
const dateRange = generateDateRange(rangeStart.value, rangeEnd.value);
emit("range-select", {
startDate: rangeStart.value,
startPrice: getPriceForDate(rangeStart.value),
endDate: rangeEnd.value,
endPrice: getPriceForDate(rangeEnd.value),
totalDays: daysBetween,
dateRange: dateRange,
});
}; };
// 生成日期范围内所有日期的数组 // 生成日期范围内所有日期的数组
@@ -437,6 +505,32 @@ const generateDateRange = (startDate, endDate) => {
return dateRange; return dateRange;
}; };
// 生成以入住日期为开始、离店日期为结束(离店日不计入夜)的夜晚数组
const generateNightsRange = (startDate, endDate) => {
const nights = [];
const start = new Date(startDate);
const end = new Date(endDate);
// 若相同日期,视为单晚(保留原有兼容行为)
if (startDate === endDate) {
return [
{
date: startDate,
price: getPriceForDate(startDate),
},
];
}
const current = new Date(start);
while (current < end) {
const dateStr = current.toISOString().split("T")[0];
nights.push({ date: dateStr, price: getPriceForDate(dateStr) });
current.setDate(current.getDate() + 1);
}
return nights;
};
// 计算两个日期之间的天数 // 计算两个日期之间的天数
const calculateDaysBetween = (startDate, endDate) => { const calculateDaysBetween = (startDate, endDate) => {
const start = new Date(startDate); const start = new Date(startDate);

View File

@@ -251,6 +251,24 @@ $font-size-label: 10px;
min-height: 14px; min-height: 14px;
} }
// 无价格占位样式
.date-cell-no-price {
.date-number {
color: $text-primary;
opacity: 0.9;
}
.date-price {
color: $text-disabled;
font-style: italic;
}
.date-price--empty {
color: $text-disabled;
font-style: normal;
}
}
// 自定义标签 // 自定义标签
.date-label { .date-label {
font-size: $font-size-label; font-size: $font-size-label;

View File

@@ -65,8 +65,9 @@
<!-- 日历组件 --> <!-- 日历组件 -->
<Calender <Calender
:visible="calendarVisible" :visible="calendarVisible"
:price-data="priceData"
mode="range" mode="range"
:range-require-price="true"
:price-data="priceData"
@close="handleCalendarClose" @close="handleCalendarClose"
@range-select="handleDateSelect" @range-select="handleDateSelect"
/> />
@@ -107,7 +108,8 @@ const selectedDate = ref({
endDate: DateUtils.formatDate(new Date(Date.now() + 24 * 60 * 60 * 1000)), // 第二天日期 endDate: DateUtils.formatDate(new Date(Date.now() + 24 * 60 * 60 * 1000)), // 第二天日期
totalDays: 1, totalDays: 1,
}); });
const priceData = ref([]);
const priceData = ref([])
// 计算的总价格 // 计算的总价格
const calculatedTotalPrice = ref(0); const calculatedTotalPrice = ref(0);

View File

@@ -148,8 +148,21 @@ let commonType = "";
// WebSocket 相关 // WebSocket 相关
let webSocketManager = null; let webSocketManager = null;
/// WebSocket 连接状态 /// 使用统一的连接状态判断函数,避免状态不同步
let webSocketConnectStatus = false; const isWsConnected = () => !!(webSocketManager && typeof webSocketManager.isConnected === "function" && webSocketManager.isConnected());
// pendingMap: messageId -> msgIndex
const pendingMap = new Map();
// pendingTimeouts: messageId -> timeoutId
const pendingTimeouts = new Map();
// 超时时间ms
const MESSAGE_TIMEOUT = 30000;
// 防止并发初始化 websocket
let isInitializing = false;
let pendingInitPromise = null;
// sleep helper
const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
// 当前会话的消息ID用于保持发送和终止的messageId一致 // 当前会话的消息ID用于保持发送和终止的messageId一致
let currentSessionMessageId = null; let currentSessionMessageId = null;
@@ -251,7 +264,7 @@ const sendMessageAction = (inputText) => {
/// 添加通知 /// 添加通知
const addNoticeListener = () => { const addNoticeListener = () => {
uni.$on(NOTICE_EVENT_LOGIN_SUCCESS, () => { uni.$on(NOTICE_EVENT_LOGIN_SUCCESS, () => {
if (!webSocketConnectStatus) { if (!isWsConnected()) {
initHandler(); initHandler();
} }
}); });
@@ -355,90 +368,136 @@ const getMainPageData = async () => {
/// =============对话↓================ /// =============对话↓================
// 初始化WebSocket // 初始化WebSocket
const initWebSocket = async () => { const initWebSocket = async () => {
// 清理旧实例 // 防止并发初始化
if (webSocketManager) { if (isInitializing) {
webSocketManager.destroy(); return pendingInitPromise;
} }
// 使用配置的WebSocket服务器地址 isInitializing = true;
const token = getAccessToken(); pendingInitPromise = (async () => {
const wsUrl = `${appStore.serverConfig.wssUrl}?access_token=${token}`; // 清理旧实例
if (webSocketManager) {
try {
webSocketManager.destroy();
} catch (e) {
console.warn("destroy old webSocketManager failed:", e);
}
webSocketManager = null;
}
// 初始化WebSocket管理器 // 使用配置的WebSocket服务器地址
webSocketManager = new WebSocketManager({ const token = getAccessToken();
wsUrl: wsUrl, const wsUrl = `${appStore.serverConfig.wssUrl}?access_token=${token}`;
reconnectInterval: 3000, // 重连间隔
maxReconnectAttempts: 5, // 最大重连次数
heartbeatInterval: 30000, // 心跳间隔
// 连接成功回调 // 初始化WebSocket管理器
onOpen: (event) => { webSocketManager = new WebSocketManager({
console.log("WebSocket连接成功"); wsUrl: wsUrl,
// 重置会话状态 reconnectInterval: 3000, // 重连间隔
webSocketConnectStatus = true; maxReconnectAttempts: 5, // 最大重连次数
isSessionActive.value = false; // 连接成功时重置会话状态,避免影响新消息发送 heartbeatInterval: 30000, // 心跳间隔
},
// 连接断开回调 // 连接成功回调
onClose: (event) => { onOpen: (event) => {
console.error("WebSocket连接断开:", event); console.log("WebSocket连接成功");
webSocketConnectStatus = false; // 重置会话状态
// 停止当前会话 isSessionActive.value = false; // 连接成功时重置会话状态,避免影响新消息发送
isSessionActive.value = false; },
},
// 错误回调 // 连接断开回调
onError: (error) => { onClose: (event) => {
console.error("WebSocket错误:", error); console.error("WebSocket连接断开:", event);
webSocketConnectStatus = false; // 停止当前会话
isSessionActive.value = false; isSessionActive.value = false;
}, },
// 消息回调 // 错误回调
onMessage: (data) => { onError: (error) => {
handleWebSocketMessage(data); console.error("WebSocket错误:", error);
}, isSessionActive.value = false;
},
// 获取会话ID回调 (用于心跳检测) // 消息回调
getConversationId: () => conversationId.value, onMessage: (data) => {
handleWebSocketMessage(data);
},
// 获取代理ID回调 (用于心跳检测) // 获取会话ID回调 (用于心跳检测)
getAgentId: () => agentId.value, getConversationId: () => conversationId.value,
});
try { // 获取代理ID回调 (用于心跳检测)
// 初始化连接 getAgentId: () => agentId.value,
await webSocketManager.connect(); });
console.log("WebSocket连接初始化成功");
webSocketConnectStatus = true; try {
return true; // 初始化连接
} catch (error) { await webSocketManager.connect();
console.error("WebSocket连接失败:", error); console.log("WebSocket连接初始化成功");
webSocketConnectStatus = false; return true;
return false; } catch (error) {
} console.error("WebSocket连接失败:", error);
return false;
} finally {
isInitializing = false;
pendingInitPromise = null;
}
})();
return pendingInitPromise;
}; };
// 处理WebSocket消息 // 处理WebSocket消息
const handleWebSocketMessage = (data) => { const handleWebSocketMessage = (data) => {
const aiMsgIndex = chatMsgList.value.length - 1; // 验证关键字段(若服务端传回 conversationId/agentId则校验是否属于当前会话
if (!chatMsgList.value[aiMsgIndex] || aiMsgIndex < 0) { if (data.conversationId && data.conversationId !== conversationId.value) {
console.error("处理WebSocket消息时找不到对应的AI消息项"); console.warn("收到不属于当前会话的消息,忽略", data.conversationId);
return;
}
if (data.agentId && data.agentId !== agentId.value) {
console.warn("收到不属于当前 agent 的消息,忽略", data.agentId);
return; return;
} }
// 确保消息内容是字符串类型 // 确保消息内容是字符串类型
if (data.content && typeof data.content !== "string") { if (data.content && typeof data.content !== "string") {
data.content = String(data.content); try {
data.content = JSON.stringify(data.content);
} catch (e) {
data.content = String(data.content);
}
} }
// 直接拼接内容到AI消息 // 优先使用 messageId 进行匹配
const msgId = data.messageId || data.id || data.msgId;
let aiMsgIndex = -1;
if (msgId && pendingMap.has(msgId)) {
aiMsgIndex = pendingMap.get(msgId);
} else if (!msgId && currentSessionMessageId && pendingMap.has(currentSessionMessageId)) {
// 服务端未返回 messageId 的场景:优先使用当前会话的 messageId 映射
aiMsgIndex = pendingMap.get(currentSessionMessageId);
} else {
// 向后搜索最近的 AI 消息
for (let i = chatMsgList.value.length - 1; i >= 0; i--) {
if (chatMsgList.value[i] && chatMsgList.value[i].msgType === MessageRole.AI) {
aiMsgIndex = i;
break;
}
}
if (aiMsgIndex === -1) {
console.error("处理WebSocket消息时找不到对应的AI消息项");
return;
}
}
// 直接拼接内容到对应 AI 消息
if (data.content) { if (data.content) {
if (chatMsgList.value[aiMsgIndex].isLoading) { if (chatMsgList.value[aiMsgIndex].isLoading) {
chatMsgList.value[aiMsgIndex].msg = ""; // 首次收到内容:替换“加载中”文案并取消 loading 状态(恢复原始渲染逻辑)
chatMsgList.value[aiMsgIndex].msg = data.content;
chatMsgList.value[aiMsgIndex].isLoading = false;
} else {
// 后续流式内容追加
chatMsgList.value[aiMsgIndex].msg += data.content;
} }
chatMsgList.value[aiMsgIndex].msg += data.content;
chatMsgList.value[aiMsgIndex].isLoading = false;
nextTick(() => scrollToBottom()); nextTick(() => scrollToBottom());
} }
@@ -463,8 +522,20 @@ const handleWebSocketMessage = (data) => {
chatMsgList.value[aiMsgIndex].question = data.question; chatMsgList.value[aiMsgIndex].question = data.question;
} }
// 清理 pendingMap / timeout
const ownedMessageId = chatMsgList.value[aiMsgIndex].messageId || msgId;
if (ownedMessageId) {
if (pendingTimeouts.has(ownedMessageId)) {
clearTimeout(pendingTimeouts.get(ownedMessageId));
pendingTimeouts.delete(ownedMessageId);
}
pendingMap.delete(ownedMessageId);
}
// 重置会话状态 // 重置会话状态
isSessionActive.value = false; isSessionActive.value = false;
// 清理当前会话的 messageId避免保留陈旧 id
resetMessageState();
} }
}; };
@@ -491,7 +562,7 @@ const sendMessage = async (message, isInstruct = false) => {
await checkToken(); await checkToken();
// 检查WebSocket连接状态如果未连接尝试重新连接 // 检查WebSocket连接状态如果未连接尝试重新连接
if (!webSocketConnectStatus) { if (!isWsConnected()) {
console.log("WebSocket未连接尝试重新连接..."); console.log("WebSocket未连接尝试重新连接...");
// 显示加载提示 // 显示加载提示
uni.showLoading({ uni.showLoading({
@@ -505,7 +576,7 @@ const sendMessage = async (message, isInstruct = false) => {
await new Promise(resolve => setTimeout(resolve, 1000)); await new Promise(resolve => setTimeout(resolve, 1000));
// 检查连接是否成功建立 // 检查连接是否成功建立
if (!webSocketConnectStatus) { if (!isWsConnected()) {
uni.hideLoading(); uni.hideLoading();
uni.showToast({ uni.showToast({
title: "连接服务器失败,请稍后重试", title: "连接服务器失败,请稍后重试",
@@ -550,49 +621,113 @@ const sendMessage = async (message, isInstruct = false) => {
console.log("发送的新消息:", JSON.stringify(newMsg)); console.log("发送的新消息:", JSON.stringify(newMsg));
}; };
// 通用WebSocket消息发送函数 // 通用WebSocket消息发送函数 -> 返回 Promise<boolean>
const sendWebSocketMessage = (messageType, messageContent, options = {}) => { const sendWebSocketMessage = async (messageType, messageContent, options = {}) => {
const args = { const args = {
conversationId: conversationId.value, conversationId: conversationId.value,
agentId: agentId.value, agentId: agentId.value,
messageType: String(messageType), // 消息类型 0-对话 1-指令 2-中断停止 3-心跳检测 messageType: String(messageType), // 消息类型 0-对话 1-指令 2-中断停止 3-心跳检测
messageContent: messageContent, messageContent: messageContent,
messageId: currentSessionMessageId, messageId: options.messageId || currentSessionMessageId,
}; };
try { const maxRetries = typeof options.retries === 'number' ? options.retries : 3;
// 直接调用webSocketManager的sendMessage方法利用其内部的消息队列机制 const baseDelay = typeof options.baseDelay === 'number' ? options.baseDelay : 300; // ms
// 即使当前连接断开,消息也会被加入队列,等待连接恢复后发送 const maxDelay = typeof options.maxDelay === 'number' ? options.maxDelay : 5000; // ms
const result = webSocketManager.sendMessage(args);
console.log(`WebSocket消息已发送 [类型:${messageType}]:`, args); for (let attempt = 0; attempt <= maxRetries; attempt++) {
return result; // 确保连接
} catch (error) { if (!isWsConnected()) {
console.error("发送WebSocket消息失败:", error); if (options.tryReconnect) {
try {
await initWebSocket();
} catch (e) {
console.error('reconnect failed in sendWebSocketMessage:', e);
}
}
}
if (!isWsConnected()) {
if (!options.silent) console.warn('WebSocket 未连接,无法发送消息', args);
// 如果还有重试机会,进行等待后重试
if (attempt < maxRetries) {
const delay = Math.min(maxDelay, baseDelay * Math.pow(2, attempt));
await sleep(delay);
continue;
}
isSessionActive.value = false;
return false;
}
try {
const raw = webSocketManager.sendMessage(args);
// 兼容可能返回同步布尔或 Promise 的实现
const result = await Promise.resolve(raw);
if (result) {
console.log(`WebSocket消息已发送 [类型:${messageType}]:`, args);
return true;
}
// 若返回 false消息可能已经被 manager 入队并触发连接流程。
// 在这种情况下避免立即当作失败处理,而是等待短暂时间以观察连接是否建立并由 manager 发送队列。
console.warn('webSocketManager.sendMessage 返回 false等待连接或队列发送...', { attempt, args });
const waitForConnectMs = typeof options.waitForConnectMs === 'number' ? options.waitForConnectMs : 5000;
if (webSocketManager && typeof webSocketManager.isConnected === 'function' && !webSocketManager.isConnected()) {
const startTs = Date.now();
while (Date.now() - startTs < waitForConnectMs) {
await sleep(200);
if (webSocketManager.isConnected()) {
// 给 manager 一点时间处理队列并发送
await sleep(150);
console.log('检测到 manager 已连接,假定队列消息已发送', args);
return true;
}
}
console.warn('等待 manager 建连超时,进入重试逻辑', { waitForConnectMs, args });
} else {
console.warn('sendMessage 返回 false 但 manager 看起来已连接或不可用,继续重试', { args });
}
} catch (error) {
console.error('发送WebSocket消息异常:', error, args);
}
// 失败且还有重试机会,等待指数退避
if (attempt < maxRetries) {
const delay = Math.min(maxDelay, baseDelay * Math.pow(2, attempt));
await sleep(delay + Math.floor(Math.random() * 100));
continue;
}
// 最后一次失败
isSessionActive.value = false; isSessionActive.value = false;
return false; return false;
} }
// 不可达,但为了类型安全
isSessionActive.value = false;
return false;
}; };
// 发送获取AI聊天消息 // 发送获取AI聊天消息
const sendChat = (message, isInstruct = false) => { const sendChat = async (message, isInstruct = false) => {
// 检查WebSocket管理器是否存在如果不存在尝试重新初始化 // 检查WebSocket管理器是否存在如果不存在尝试重新初始化
if (!webSocketManager) { if (!webSocketManager) {
console.error("WebSocket管理器不存在尝试重新初始化..."); console.error("WebSocket管理器不存在尝试重新初始化...");
initWebSocket(); initWebSocket();
// 短暂延迟后再次检查连接状态 // 短暂延迟后再次检查连接状态
setTimeout(() => { setTimeout(() => {
if (webSocketManager && webSocketManager.isConnected()) { const connected = webSocketManager && webSocketManager.isConnected();
isSessionActive.value = connected;
// 更新AI消息状态
const aiMsgIndex = chatMsgList.value.length - 1;
if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex].msgType === MessageRole.AI) {
chatMsgList.value[aiMsgIndex].msg = connected ? "" : "发送消息失败,请重试";
chatMsgList.value[aiMsgIndex].isLoading = connected;
}
if (connected) {
// 连接成功后重新发送消息 // 连接成功后重新发送消息
sendChat(message, isInstruct); sendChat(message, isInstruct);
} else { } else {
console.error("WebSocket重新初始化失败"); console.error("WebSocket重新初始化失败");
isSessionActive.value = false;
// 更新AI消息状态为失败
const aiMsgIndex = chatMsgList.value.length - 1;
if (aiMsgIndex >= 0 && chatMsgList.value[aiMsgIndex].msgType === MessageRole.AI) {
chatMsgList.value[aiMsgIndex].msg = "发送消息失败,请重试";
chatMsgList.value[aiMsgIndex].isLoading = false;
}
} }
}, 1000); }, 1000);
return; return;
@@ -600,9 +735,10 @@ const sendChat = (message, isInstruct = false) => {
const messageType = isInstruct ? 1 : 0; const messageType = isInstruct ? 1 : 0;
const messageContent = isInstruct ? commonType : message; const messageContent = isInstruct ? commonType : message;
// 生成 messageId 并保存到当前会话变量stopRequest 可能使用)
currentSessionMessageId = IdUtils.generateMessageId(); currentSessionMessageId = IdUtils.generateMessageId();
// 插入AI消息 // 插入AI消息,并在 pendingMap 中记录
const aiMsg = { const aiMsg = {
msgId: `msg_${chatMsgList.value.length}`, msgId: `msg_${chatMsgList.value.length}`,
msgType: MessageRole.AI, msgType: MessageRole.AI,
@@ -612,49 +748,88 @@ const sendChat = (message, isInstruct = false) => {
type: MessageType.TEXT, type: MessageType.TEXT,
url: "", url: "",
}, },
messageId: currentSessionMessageId,
}; };
chatMsgList.value.push(aiMsg); chatMsgList.value.push(aiMsg);
// 添加AI消息后滚动到底部 // 添加AI消息后滚动到底部
setTimeoutScrollToBottom(); setTimeoutScrollToBottom();
const aiMsgIndex = chatMsgList.value.length - 1; const aiMsgIndex = chatMsgList.value.length - 1;
// 发送消息 // 记录 pendingMap
const success = sendWebSocketMessage(messageType, messageContent); pendingMap.set(currentSessionMessageId, aiMsgIndex);
// 启动超时回退
const timeoutId = setTimeout(() => {
const idx = pendingMap.get(currentSessionMessageId);
if (idx != null && chatMsgList.value[idx] && chatMsgList.value[idx].isLoading) {
chatMsgList.value[idx].msg = "请求超时,请重试";
chatMsgList.value[idx].isLoading = false;
pendingMap.delete(currentSessionMessageId);
pendingTimeouts.delete(currentSessionMessageId);
isSessionActive.value = false;
setTimeoutScrollToBottom();
}
}, MESSAGE_TIMEOUT);
pendingTimeouts.set(currentSessionMessageId, timeoutId);
// 发送消息,支持重连尝试
const success = await sendWebSocketMessage(messageType, messageContent, { messageId: currentSessionMessageId, tryReconnect: true });
if (!success) { if (!success) {
chatMsgList.value[aiMsgIndex].msg = "发送消息失败,请重试"; const idx = pendingMap.get(currentSessionMessageId);
chatMsgList.value[aiMsgIndex].isLoading = false; if (idx != null && chatMsgList.value[idx]) {
chatMsgList.value[idx].msg = "发送消息失败,请重试";
chatMsgList.value[idx].isLoading = false;
}
// 清理 pending
if (pendingTimeouts.has(currentSessionMessageId)) {
clearTimeout(pendingTimeouts.get(currentSessionMessageId));
pendingTimeouts.delete(currentSessionMessageId);
}
pendingMap.delete(currentSessionMessageId);
isSessionActive.value = false; isSessionActive.value = false;
} }
// 重置消息状态,为新消息做准备
resetMessageState();
}; };
// 停止请求函数 // 停止请求函数
const stopRequest = () => { const stopRequest = async () => {
console.log("停止请求"); console.log("停止请求");
// 发送中断消息给服务器 (messageType=2) // 发送中断消息给服务器 (messageType=2),带上当前 messageId
sendWebSocketMessage(2, "stop_request", { silent: true }); try {
await sendWebSocketMessage(2, "stop_request", { messageId: currentSessionMessageId, silent: true });
} catch (e) {
console.warn("stopRequest send failed:", e);
}
// 直接将AI消息状态设为停止 // 直接将AI消息状态设为停止(优先使用 pendingMap 映射)
const aiMsgIndex = chatMsgList.value.length - 1; let aiMsgIndex = -1;
if ( if (currentSessionMessageId && pendingMap.has(currentSessionMessageId)) {
chatMsgList.value[aiMsgIndex] && aiMsgIndex = pendingMap.get(currentSessionMessageId);
chatMsgList.value[aiMsgIndex].msgType === MessageRole.AI } else {
) { aiMsgIndex = chatMsgList.value.length - 1;
}
if (chatMsgList.value[aiMsgIndex] &&
chatMsgList.value[aiMsgIndex].msgType === MessageRole.AI) {
chatMsgList.value[aiMsgIndex].isLoading = false; chatMsgList.value[aiMsgIndex].isLoading = false;
if ( if (chatMsgList.value[aiMsgIndex].msg &&
chatMsgList.value[aiMsgIndex].msg && chatMsgList.value[aiMsgIndex].msg.trim() &&
chatMsgList.value[aiMsgIndex].msg.trim() && !chatMsgList.value[aiMsgIndex].msg.startsWith("加载中")) {
!chatMsgList.value[aiMsgIndex].msg.startsWith("加载中")
) {
// 保留已显示内容 // 保留已显示内容
} else { } else {
chatMsgList.value[aiMsgIndex].msg = "请求已停止"; chatMsgList.value[aiMsgIndex].msg = "请求已停止";
} }
} }
// 清理 pending
if (currentSessionMessageId) {
if (pendingTimeouts.has(currentSessionMessageId)) {
clearTimeout(pendingTimeouts.get(currentSessionMessageId));
pendingTimeouts.delete(currentSessionMessageId);
}
pendingMap.delete(currentSessionMessageId);
}
// 重置会话状态 // 重置会话状态
isSessionActive.value = false; isSessionActive.value = false;
setTimeoutScrollToBottom(); setTimeoutScrollToBottom();
@@ -676,13 +851,23 @@ const resetConfig = () => {
if (webSocketManager) { if (webSocketManager) {
webSocketManager.destroy(); webSocketManager.destroy();
webSocketManager = null; webSocketManager = null;
webSocketConnectStatus = false;
} }
// 重置消息状态 // 重置消息状态
resetMessageState(); resetMessageState();
isSessionActive.value = false; isSessionActive.value = false;
// 清理 pendingMap / pendingTimeouts
try {
for (const t of pendingTimeouts.values()) {
clearTimeout(t);
}
} catch (e) {
// ignore
}
pendingTimeouts.clear();
pendingMap.clear();
// 清理定时器 // 清理定时器
if (holdKeyboardTimer.value) { if (holdKeyboardTimer.value) {
clearTimeout(holdKeyboardTimer.value); clearTimeout(holdKeyboardTimer.value);

View File

@@ -28,10 +28,11 @@ export class WebSocketManager {
// 回调函数 // 回调函数
this.callbacks = { this.callbacks = {
onConnect: options.onConnect || (() => {}), // 支持两套回调命名onConnect/onDisconnect 与 onOpen/onClose兼容调用方
onDisconnect: options.onDisconnect || (() => {}), onConnect: options.onConnect || options.onOpen || (() => { }),
onError: options.onError || (() => {}), onDisconnect: options.onDisconnect || options.onClose || (() => { }),
onMessage: options.onMessage || (() => {}), onError: options.onError || (() => { }),
onMessage: options.onMessage || (() => { }),
getConversationId: options.getConversationId || (() => ""), getConversationId: options.getConversationId || (() => ""),
getAgentId: options.getAgentId || (() => ""), getAgentId: options.getAgentId || (() => ""),
}; };
@@ -327,7 +328,7 @@ export class WebSocketManager {
const messageData = { const messageData = {
...message, ...message,
timestamp: Date.now(), timestamp: Date.now(),
retryCount: 0, retryCount: typeof message.retryCount === 'number' ? message.retryCount : 0,
}; };
if (this.connectionState) { if (this.connectionState) {
@@ -392,7 +393,7 @@ export class WebSocketManager {
agentId: this.callbacks.getAgentId agentId: this.callbacks.getAgentId
? this.callbacks.getAgentId() ? this.callbacks.getAgentId()
: "", : "",
messageType: 3, // 心跳检测 messageType: '3', // 心跳检测
messageContent: "heartbeat", messageContent: "heartbeat",
messageId: IdUtils.generateMessageId(), messageId: IdUtils.generateMessageId(),
}; };