From 5edd47c1c9b5ac994011740383826397281260c7 Mon Sep 17 00:00:00 2001
From: "1378012178@qq.com" <1378012178@qq.com>
Date: Fri, 7 Nov 2025 15:12:51 +0800
Subject: [PATCH] =?UTF-8?q?websocket=E8=BF=9E=E6=8E=A5=E6=A0=B7=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/test/index.vue | 210 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 210 insertions(+)
 create mode 100644 src/views/test/index.vue

diff --git a/src/views/test/index.vue b/src/views/test/index.vue
new file mode 100644
index 0000000..9603344
--- /dev/null
+++ b/src/views/test/index.vue
@@ -0,0 +1,210 @@
+<template>
+    <div class="websocket-test">
+        <h2>WebSocket 测试工具</h2>
+
+        <div class="connection-panel">
+            <el-input v-model="userId" placeholder="输入用户ID" style="width: 200px"></el-input>
+            <el-button type="primary" @click="connect" :disabled="isConnected">连接</el-button>
+            <el-button type="danger" @click="disconnect" :disabled="!isConnected">断开</el-button>
+            <el-button @click="sendPing" :disabled="!isConnected">发送心跳</el-button>
+            <span class="status" :class="{ connected: isConnected }">
+                {{ isConnected ? '已连接' : '未连接' }}
+            </span>
+        </div>
+
+        <div class="message-panel">
+            <el-input v-model="messageToSend" placeholder="输入要发送的消息"
+                style="width: 300px; margin-right: 10px"></el-input>
+            <el-button type="primary" @click="sendMessage" :disabled="!isConnected">发送</el-button>
+        </div>
+
+        <div class="log-panel">
+            <h3>消息日志：</h3>
+            <div class="log-content">
+                <div v-for="(log, index) in logs" :key="index" class="log-item">
+                    <span class="log-time">[{{ log.time }}]</span>
+                    <span class="log-message">{{ log.message }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'WebSocketTest',
+    data() {
+        return {
+            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NjI3MTg2MTUsInVzZXJuYW1lIjoiYWRtaW4ifQ.qSwjclSvEHOefAjm9Oqay9dmhLUZy1cgIBeE1u1Twg8',
+            userId: 'test_user_' + Math.floor(Math.random() * 1000), // 随机用户ID
+            ws: null,
+            isConnected: false,
+            messageToSend: '',
+            logs: [],
+            reconnectAttempts: 0,
+            maxReconnectAttempts: 5,
+            reconnectDelay: 5000 // 5秒重连间隔
+        }
+    },
+    methods: {
+        connect() {
+            if (this.isConnected) return
+
+            // WebSocket 连接地址
+            const wsUrl = `ws://localhost:8091/nursing-unit_101/directive/websocket/${this.userId}?token=${this.token}`
+
+            this.ws = new WebSocket(wsUrl)
+
+            this.ws.onopen = () => {
+                this.isConnected = true
+                this.reconnectAttempts = 0
+                this.addLog('连接成功')
+
+                // 启动心跳
+                this.startHeartbeat()
+            }
+
+            this.ws.onmessage = (event) => {
+                const message = event.data
+                this.addLog(`收到消息: ${message}`)
+
+                // 处理心跳响应
+                if (message === 'pong') {
+                    this.addLog('收到心跳响应')
+                }
+            }
+
+            this.ws.onclose = () => {
+                this.isConnected = false
+                this.addLog('连接已关闭')
+
+                // 停止心跳
+                this.stopHeartbeat()
+
+                // 自动重连
+                if (this.reconnectAttempts < this.maxReconnectAttempts) {
+                    this.reconnectAttempts++
+                    this.addLog(`将在 ${this.reconnectDelay / 1000} 秒后尝试重连 (${this.reconnectAttempts}/${this.maxReconnectAttempts})`)
+                    setTimeout(() => {
+                        this.connect()
+                    }, this.reconnectDelay)
+                }
+            }
+
+            this.ws.onerror = (error) => {
+                this.addLog(`连接错误: ${error.message || '未知错误'}`)
+            }
+        },
+
+        disconnect() {
+            if (this.ws) {
+                this.ws.close()
+                this.ws = null
+            }
+            this.isConnected = false
+            this.stopHeartbeat()
+        },
+
+        sendMessage() {
+            if (this.ws && this.isConnected) {
+                this.ws.send(this.messageToSend)
+                this.addLog(`发送消息: ${this.messageToSend}`)
+                this.messageToSend = ''
+            }
+        },
+
+        sendPing() {
+            if (this.ws && this.isConnected) {
+                this.ws.send('ping')
+                this.addLog('发送心跳: ping')
+            }
+        },
+
+        startHeartbeat() {
+            // 每30秒发送一次心跳
+            this.heartbeatInterval = setInterval(() => {
+                if (this.isConnected) {
+                    this.sendPing()
+                }
+            }, 30000)
+        },
+
+        stopHeartbeat() {
+            if (this.heartbeatInterval) {
+                clearInterval(this.heartbeatInterval)
+                this.heartbeatInterval = null
+            }
+        },
+
+        addLog(message) {
+            const time = new Date().toLocaleTimeString()
+            this.logs.unshift({ time, message })
+            if (this.logs.length > 100) {
+                this.logs.pop()
+            }
+        }
+    },
+
+    beforeDestroy() {
+        this.disconnect()
+    }
+}
+</script>
+
+<style scoped>
+.websocket-test {
+    padding: 20px;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.connection-panel {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.status {
+    margin-left: 10px;
+    padding: 5px 10px;
+    border-radius: 4px;
+    background-color: #f56c6c;
+    color: white;
+}
+
+.status.connected {
+    background-color: #67c23a;
+}
+
+.message-panel {
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+}
+
+.log-panel {
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    padding: 15px;
+}
+
+.log-content {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.log-item {
+    padding: 5px 0;
+    border-bottom: 1px dashed #ebeef5;
+}
+
+.log-time {
+    color: #909399;
+    margin-right: 10px;
+}
+
+.log-message {
+    word-break: break-all;
+}
+</style>
\ No newline at end of file