From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/infra/webSocket/index.vue | 185 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 185 insertions(+), 0 deletions(-)
diff --git a/src/views/infra/webSocket/index.vue b/src/views/infra/webSocket/index.vue
new file mode 100644
index 0000000..37f1322
--- /dev/null
+++ b/src/views/infra/webSocket/index.vue
@@ -0,0 +1,185 @@
+<template>
+ <doc-alert title="WebSocket 瀹炴椂閫氫俊" url="https://doc.iocoder.cn/websocket/" />
+
+ <div class="flex">
+ <!-- 宸︿晶锛氬缓绔嬭繛鎺ャ�佸彂閫佹秷鎭� -->
+ <el-card :gutter="12" class="w-1/2" shadow="always">
+ <template #header>
+ <div class="card-header">
+ <span>杩炴帴</span>
+ </div>
+ </template>
+ <div class="flex items-center">
+ <span class="mr-4 text-lg font-medium"> 杩炴帴鐘舵��: </span>
+ <el-tag :color="getTagColor">{{ status }}</el-tag>
+ </div>
+ <hr class="my-4" />
+ <div class="flex">
+ <el-input v-model="server" disabled>
+ <template #prepend>鏈嶅姟鍦板潃</template>
+ </el-input>
+ <el-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggleConnectStatus">
+ {{ getIsOpen ? '鍏抽棴杩炴帴' : '寮�鍚繛鎺�' }}
+ </el-button>
+ </div>
+ <p class="mt-4 text-lg font-medium">娑堟伅杈撳叆妗�</p>
+ <hr class="my-4" />
+ <el-input
+ v-model="sendText"
+ :autosize="{ minRows: 2, maxRows: 4 }"
+ :disabled="!getIsOpen"
+ clearable
+ placeholder="璇疯緭鍏ヤ綘瑕佸彂閫佺殑娑堟伅"
+ type="textarea"
+ />
+ <el-select v-model="sendUserId" class="mt-4" placeholder="璇烽�夋嫨鍙戦�佷汉">
+ <el-option key="" label="鎵�鏈変汉" value="" />
+ <el-option
+ v-for="user in userList"
+ :key="user.id"
+ :label="user.nickname"
+ :value="user.id"
+ />
+ </el-select>
+ <el-button :disabled="!getIsOpen" block class="ml-2 mt-4" type="primary" @click="handlerSend">
+ 鍙戦��
+ </el-button>
+ </el-card>
+ <!-- 鍙充晶锛氭秷鎭褰� -->
+ <el-card :gutter="12" class="w-1/2" shadow="always">
+ <template #header>
+ <div class="card-header">
+ <span>娑堟伅璁板綍</span>
+ </div>
+ </template>
+ <div class="max-h-80 overflow-auto">
+ <ul>
+ <li v-for="msg in messageReverseList" :key="msg.time" class="mt-2">
+ <div class="flex items-center">
+ <span class="text-primary mr-2 font-medium">鏀跺埌娑堟伅:</span>
+ <span>{{ formatDate(msg.time) }}</span>
+ </div>
+ <div>
+ {{ msg.text }}
+ </div>
+ </li>
+ </ul>
+ </div>
+ </el-card>
+ </div>
+</template>
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import { useWebSocket } from '@vueuse/core'
+import { getRefreshToken } from '@/utils/auth'
+import * as UserApi from '@/api/system/user'
+
+defineOptions({ name: 'InfraWebSocket' })
+
+const message = useMessage() // 娑堟伅寮圭獥
+
+const server = ref(
+ (import.meta.env.VITE_BASE_URL + '/infra/ws').replace('http', 'ws') +
+ '?token=' +
+ getRefreshToken() // 浣跨敤 getRefreshToken() 鏂规硶锛岃�屼笉浣跨敤 getAccessToken() 鏂规硶鐨勫師鍥狅細WebSocket 鏃犳硶鏂逛究鐨勫埛鏂拌闂护鐗�
+) // WebSocket 鏈嶅姟鍦板潃
+const getIsOpen = computed(() => status.value === 'OPEN') // WebSocket 杩炴帴鏄惁鎵撳紑
+const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red')) // WebSocket 杩炴帴鐨勫睍绀洪鑹�
+
+/** 鍙戣捣 WebSocket 杩炴帴 */
+const { status, data, send, close, open } = useWebSocket(server.value, {
+ autoReconnect: true,
+ heartbeat: true
+})
+
+/** 鐩戝惉鎺ユ敹鍒扮殑鏁版嵁 */
+const messageList = ref([] as { time: number; text: string }[]) // 娑堟伅鍒楄〃
+const messageReverseList = computed(() => messageList.value.slice().reverse())
+watchEffect(() => {
+ if (!data.value) {
+ return
+ }
+ try {
+ // 1. 鏀跺埌蹇冭烦
+ if (data.value === 'pong') {
+ // state.recordList.push({
+ // text: '銆愬績璺炽��',
+ // time: new Date().getTime()
+ // })
+ return
+ }
+
+ // 2.1 瑙ｆ瀽 type 娑堟伅绫诲瀷
+ const jsonMessage = JSON.parse(data.value)
+ const type = jsonMessage.type
+ const content = JSON.parse(jsonMessage.content)
+ if (!type) {
+ message.error('鏈煡鐨勬秷鎭被鍨嬶細' + data.value)
+ return
+ }
+ // 2.2 娑堟伅绫诲瀷锛歞emo-message-receive
+ if (type === 'demo-message-receive') {
+ const single = content.single
+ if (single) {
+ messageList.value.push({
+ text: `銆愬崟鍙戙�戠敤鎴风紪鍙�(${content.fromUserId})锛�${content.text}`,
+ time: new Date().getTime()
+ })
+ } else {
+ messageList.value.push({
+ text: `銆愮兢鍙戙�戠敤鎴风紪鍙�(${content.fromUserId})锛�${content.text}`,
+ time: new Date().getTime()
+ })
+ }
+ return
+ }
+ // 2.3 娑堟伅绫诲瀷锛歯otice-push
+ if (type === 'notice-push') {
+ messageList.value.push({
+ text: `銆愮郴缁熼�氱煡銆戯細${content.title}`,
+ time: new Date().getTime()
+ })
+ return
+ }
+ message.error('鏈鐞嗘秷鎭細' + data.value)
+ } catch (error) {
+ message.error('澶勭悊娑堟伅鍙戠敓寮傚父锛�' + data.value)
+ console.error(error)
+ }
+})
+
+/** 鍙戦�佹秷鎭� */
+const sendText = ref('') // 鍙戦�佸唴瀹�
+const sendUserId = ref('') // 鍙戦�佷汉
+const handlerSend = () => {
+ // 1.1 鍏� JSON 鍖� message 娑堟伅鍐呭
+ const messageContent = JSON.stringify({
+ text: sendText.value,
+ toUserId: sendUserId.value
+ })
+ // 1.2 鍐� JSON 鍖栨暣涓秷鎭�
+ const jsonMessage = JSON.stringify({
+ type: 'demo-message-send',
+ content: messageContent
+ })
+ // 2. 鏈�鍚庡彂閫佹秷鎭�
+ send(jsonMessage)
+ sendText.value = ''
+}
+
+/** 鍒囨崲 websocket 杩炴帴鐘舵�� */
+const toggleConnectStatus = () => {
+ if (getIsOpen.value) {
+ close()
+ } else {
+ open()
+ }
+}
+
+/** 鍒濆鍖� **/
+const userList = ref<any[]>([]) // 鐢ㄦ埛鍒楄〃
+onMounted(async () => {
+ // 鑾峰彇鐢ㄦ埛鍒楄〃
+ userList.value = await UserApi.getSimpleUserList()
+})
+</script>
--
Gitblit v1.8.0