【重构】站内信消息SSE彻底更改为ws方案

snowy-admin-web/package.json

@@ -24,7 +24,6 @@
 		"@chenfengyuan/vue-qrcode": "2.0.0",
 		"@highlightjs/vue-plugin": "2.1.0",
 		"@kangc/v-md-editor": "2.3.18",
-		"@microsoft/fetch-event-source": "2.0.1",
 		"@wangeditor/editor": "5.1.23",
 		"@wangeditor/editor-for-vue": "5.1.12",
 		"@vue-office/docx": "1.6.2",
@@ -37,7 +36,6 @@
 		"echarts": "5.5.1",
 		"echarts-stat": "1.2.0",
 		"enquire.js": "2.1.6",
-		"event-source-polyfill": "1.0.31",
 		"fuse.js": "7.0.0",
 		"highlight.js": "11.10.0",
 		"hotkeys-js": "3.13.7",

snowy-admin-web/src/layout/components/message.vue

@@ -1,55 +1,84 @@
 <template>
 	<div class="msg panel-item" @click="showMsg">
 		<a-badge :count="unreadMessageNum" class="badge">
-			<comment-outlined />
+			<bell-outlined class="msg-icon-trigger" />
 		</a-badge>
-		<a-drawer v-model:open="msgVisible" title="新消息" placement="right" :width="500">
-			<a-list :data-source="messageList" size="small" class="mb-3" :loading="miniMessageLoading">
-				<template #renderItem="{ item }">
-					<a-list-item>
-						<a-list-item-meta :description="item.createTime">
-							<template #title>
-								<a @click="messageDetail(item)">{{ item.subject }}</a>
-							</template>
-						</a-list-item-meta>
-					</a-list-item>
-				</template>
-			</a-list>
-			<a-space class="xn-fdr">
-				<a-button v-if="unreadMessageNum > 0" @click="markRead">全部设为已读</a-button>
-				<a-button type="primary" @click="leaveFor('/usercenter')">消息中心</a-button>
-			</a-space>
+		<a-drawer
+			v-model:open="msgVisible"
+			title="站内消息"
+			placement="right"
+			:width="500"
+			:body-style="{ padding: '0' }"
+			:footer-style="{ textAlign: 'right', borderTop: '1px solid #f0f0f0' }"
+		>
+			<div class="msg-list-container">
+				<a-list :data-source="messageList" :loading="miniMessageLoading" item-layout="horizontal">
+					<template #renderItem="{ item }">
+						<a-list-item class="msg-item" :class="{ unread: !item.read }" @click="messageDetail(item)">
+							<a-list-item-meta>
+								<template #avatar>
+									<a-avatar
+										shape="square"
+										class="msg-avatar"
+										:style="{ backgroundColor: item.read ? '#d9d9d9' : '#1890ff' }"
+									>
+										<template #icon><BellOutlined /></template>
+									</a-avatar>
+								</template>
+								<template #title>
+									<div class="msg-title-row">
+										<span class="msg-title text-ellipsis">{{ item.subject }}</span>
+										<span class="msg-time">{{ item.createTime }}</span>
+									</div>
+								</template>
+								<template #description>
+									<div class="msg-desc text-ellipsis">{{ item.content || '暂无摘要' }}</div>
+								</template>
+							</a-list-item-meta>
+						</a-list-item>
+					</template>
+					<template #empty>
+						<a-empty description="暂无新消息" style="margin-top: 50px" />
+					</template>
+				</a-list>
+			</div>
+
+			<template #footer>
+				<a-space>
+					<a-button v-if="unreadMessageNum > 0" @click="markRead">全部已读</a-button>
+					<a-button type="primary" @click="leaveFor('/usercenter')">消息中心</a-button>
+				</a-space>
+			</template>
 		</a-drawer>
-		<xn-form-container title="详情" :width="700" :open="visible" :destroy-on-close="true" @close="onClose">
-			<a-form ref="formRef" :model="formData" layout="vertical">
-				<a-form-item label="主题：" name="subject">
-					<span>{{ formData.subject }}</span>
-				</a-form-item>
-				<a-form-item label="发送时间：" name="createTime">
-					<span>{{ formData.createTime }}</span>
-				</a-form-item>
-				<a-form-item label="内容：" name="content">
-					<span>{{ formData.content }}</span>
-				</a-form-item>
-				<a-form-item label="查收情况：" name="receiveInfoList">
-					<s-table
-						ref="tableRef"
-						:columns="columns"
-						:data="loadData"
-						:alert="false"
-						:showPagination="false"
-						bordered
-						:row-key="(record) => record.id"
-					>
-						<template #bodyCell="{ column, record }">
-							<template v-if="column.dataIndex === 'read'">
-								<span v-if="record.read" class="xn-color-d9d9d9">已读</span>
-								<span v-else class="xn-color-ff4d4f">未读</span>
-							</template>
-						</template>
-					</s-table>
-				</a-form-item>
-			</a-form>
+
+		<xn-form-container title="消息详情" :width="700" :open="visible" :destroy-on-close="true" @close="onClose">
+			<a-descriptions bordered :column="1" size="middle" class="mb-4">
+				<a-descriptions-item label="主题">{{ formData.subject }}</a-descriptions-item>
+				<a-descriptions-item label="发送时间">{{ formData.createTime }}</a-descriptions-item>
+				<a-descriptions-item label="内容">
+					<div class="msg-content-detail">{{ formData.content }}</div>
+				</a-descriptions-item>
+			</a-descriptions>
+
+			<div class="receive-info-title">查收情况</div>
+			<s-table
+				ref="tableRef"
+				:columns="columns"
+				:data="loadData"
+				:alert="false"
+				:showPagination="false"
+				bordered
+				:row-key="(record) => record.id"
+				compSize="small"
+			>
+				<template #bodyCell="{ column, record }">
+					<template v-if="column.dataIndex === 'read'">
+						<a-tag :color="record.read ? 'green' : 'red'">
+							{{ record.read ? '已读' : '未读' }}
+						</a-tag>
+					</template>
+				</template>
+			</s-table>
 		</xn-form-container>
 	</div>
 </template>
@@ -57,11 +86,11 @@
 <script setup name="devUserMessage">
 	import indexApi from '@/api/sys/indexApi'
 	import { message } from 'ant-design-vue'
+	import { BellOutlined } from '@ant-design/icons-vue'
 	import router from '@/router'
 	import { onMounted } from 'vue'
 	import sysConfig from '@/config'
 	import { convertUrl } from '@/utils/apiAdaptive'
-	import { EventSourcePolyfill } from 'event-source-polyfill'
 	import tool from '@/utils/tool'
 
 	const miniMessageLoading = ref(false)
@@ -70,40 +99,38 @@
 	const unreadMessageNum = ref(0)
 
 	onMounted(() => {
-		createSseConnect()
+		createWebSocketConnect()
 	})
 
-	// 创建sse连接
-	const createSseConnect = () => {
-		if (window.EventSource) {
-			let clientId = tool.data.get('CLIENTID') ? tool.data.get('CLIENTID') : ''
-			let url = sysConfig.API_URL + convertUrl('/dev/message/createSseConnect?clientId=') + clientId
-			// heartbeatTimeout:心跳超时监测 30s
-			let source = new EventSourcePolyfill(url, {
-				headers: { token: tool.data.get('TOKEN') },
-				heartbeatTimeout: 300000
-			})
+	// 创建ws连接
+	const createWebSocketConnect = () => {
+		if ('WebSocket' in window) {
+			let url = sysConfig.API_URL + convertUrl('/dev/message/ws') + '?token=' + tool.data.get('TOKEN')
+			url = url.replace('https://', 'wss://').replace('http://', 'ws://')
+			const socket = new WebSocket(url)
 			// 监听打开事件
-			source.addEventListener('open', (e) => {})
+			socket.onopen = () => {
+				// console.log('WebSocket连接已打开')
+			}
 			// 监听消息事件
-			source.addEventListener('message', (e) => {
-				const result = JSON.parse(e.data)
+			socket.onmessage = (event) => {
+				const result = JSON.parse(event.data)
 				const code = result.code
 				const data = result.data
 				if (code === 200) {
 					unreadMessageNum.value = data
-				} else if (code === 0) {
-					// 初次建立连接，客户端id储存本地
-					tool.data.set('CLIENTID', data)
 				}
-			})
+			}
 			// 监听错误事件
-			source.addEventListener('error', (e) => {
-				console.error('发生错误，消息实时获取已断开与服务器的连接')
-				source.close()
-			})
+			socket.onerror = () => {
+				console.error('WebSocket连接发生错误')
+			}
+			// 监听关闭事件
+			socket.onclose = () => {
+				// console.log('WebSocket连接已关闭')
+			}
 		} else {
-			message.warning('该浏览器不支持消息功能')
+			message.warning('该浏览器不支持WebSocket消息功能')
 		}
 	}
 
@@ -182,7 +209,101 @@
 	}
 </script>
 
-<style scoped>
+<style scoped lang="less">
+	.msg {
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 10px;
+		cursor: pointer;
+		transition: all 0.3s;
+	}
+	.msg:hover {
+		background: rgba(0, 0, 0, 0.025);
+	}
+	.msg-icon-trigger {
+		font-size: 16px;
+	}
+
+	.msg-list-container {
+		max-height: calc(100vh - 150px);
+		overflow-y: auto;
+	}
+
+	.msg-item {
+		cursor: pointer;
+		padding: 12px 16px;
+		transition: background-color 0.3s;
+		border-bottom: 1px solid #f0f0f0;
+
+		&:hover {
+			background-color: #fafafa;
+		}
+
+		&.unread {
+			background-color: #f0f9ff;
+			&:hover {
+				background-color: #e6f7ff;
+			}
+			.msg-title {
+				font-weight: 600;
+				color: #1890ff;
+			}
+		}
+	}
+
+	.msg-avatar {
+		margin-top: 4px;
+	}
+
+	.msg-title-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 4px;
+	}
+
+	.msg-title {
+		flex: 1;
+		color: #333;
+		font-size: 14px;
+		margin-right: 8px;
+	}
+
+	.msg-time {
+		color: #999;
+		font-size: 12px;
+		white-space: nowrap;
+	}
+
+	.msg-desc {
+		color: #666;
+		font-size: 13px;
+	}
+
+	.text-ellipsis {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.msg-content-detail {
+		white-space: pre-wrap;
+		line-height: 1.6;
+		max-height: 400px;
+		overflow-y: auto;
+	}
+
+	.receive-info-title {
+		font-size: 15px;
+		font-weight: 600;
+		margin: 20px 0 10px;
+		padding-left: 10px;
+		border-left: 3px solid #1890ff;
+		line-height: 1;
+	}
+
 	:deep(.ant-badge-count) {
 		padding: 0px;
 		min-width: 15px;

snowy-admin-web/src/layout/components/userbar.vue

@@ -5,7 +5,7 @@
 		<div v-if="!isMobile" class="screen panel-item hidden-sm-and-down" @click="fullscreen">
 			<fullscreen-outlined />
 		</div>
-		<!--		<dev-user-message />-->
+		<dev-user-message />
 		<a-dropdown class="user panel-item">
 			<div class="user-avatar">
 				<a-avatar :src="userInfo ? userInfo.avatar : undefined" />
@@ -130,7 +130,7 @@
 							router.replace({ path: '/login' })
 							nextTick(() => {
 								// 清理缓存内的个人信息
-								store.userInfo = undefined
+								store.setUserInfo(undefined)
 							})
 						})
 						.catch(() => {