yg-yygl 0.0.1

package/src/views/system/websocket-debug.vue

@@ -0,0 +1,528 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useWebSocketStore } from '../../store/websocket';
+import {
+  ElButton,
+  ElInput,
+  ElSelect,
+  ElOption,
+  ElDivider,
+  ElCard,
+  ElAlert,
+  ElSwitch,
+} from 'element-plus';
+
+const wsStore = useWebSocketStore();
+// 参考原始 WebSocketService 使用环境变量获取 WebSocket URL
+// fjl modify
+const wsUrl = ref(wsStore.getWebSocketUrl());
+const message = ref('');
+const receivedMessages = ref<
+  Array<{ content: string; time: string; type: 'received' | 'sent' | 'system' }>
+>([]);
+const autoScroll = ref(true);
+const logContainer = ref<HTMLDivElement | null>(null);
+const isLoading = ref(false);
+const customUrl = ref('');
+const useCustomUrl = ref(false);
+const reconnectDelay = ref(0);
+
+// 自定义心跳间隔（毫秒）
+const heartbeatInterval = ref(wsStore.HEARTBEAT_INTERVAL);
+const maxReconnectAttempts = ref(wsStore.MAX_RECONNECT_ATTEMPTS);
+
+// 添加系统日志
+const addSystemLog = (message: string) => {
+  receivedMessages.value.push({
+    content: message,
+    time: new Date().toLocaleTimeString(),
+    type: 'system',
+  });
+  scrollToBottom();
+};
+
+// 清空日志
+const clearLogs = () => {
+  receivedMessages.value = [];
+};
+
+// 连接WebSocket
+const connectWebSocket = async () => {
+  try {
+    isLoading.value = true;
+    const effectiveUrl =
+      useCustomUrl.value && customUrl.value ? customUrl.value : wsUrl.value;
+    addSystemLog(`正在连接WebSocket: ${effectiveUrl}`);
+    await wsStore.connect(effectiveUrl);
+    addSystemLog('WebSocket连接成功');
+  } catch (error) {
+    addSystemLog(`WebSocket连接失败: ${error}`);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// 断开WebSocket
+const disconnectWebSocket = () => {
+  wsStore.disconnect();
+  addSystemLog('WebSocket已断开连接');
+};
+
+// 重连WebSocket
+const reconnectWebSocket = async () => {
+  addSystemLog(`将在 ${reconnectDelay.value} 毫秒后重连...`);
+  await new Promise((resolve) => setTimeout(resolve, reconnectDelay.value));
+  connectWebSocket();
+};
+
+// 发送消息
+const sendMessage = () => {
+  if (!message.value.trim()) return;
+
+  if (wsStore.sendMessage(message.value)) {
+    receivedMessages.value.push({
+      content: message.value,
+      time: new Date().toLocaleTimeString(),
+      type: 'sent',
+    });
+    message.value = '';
+    scrollToBottom();
+  } else {
+    addSystemLog('消息发送失败: WebSocket未连接');
+  }
+};
+
+// 发送心跳包
+const sendHeartbeat = () => {
+  if (wsStore.socket?.readyState === WebSocket.OPEN) {
+    wsStore.socket.send('ping');
+    addSystemLog('已发送心跳包: ping');
+  } else {
+    addSystemLog('心跳发送失败: WebSocket未连接');
+  }
+};
+
+// 设置心跳间隔
+const setHeartbeatInterval = () => {
+  wsStore.stopHeartbeat();
+  // 使用复制的值而不是直接修改常量
+  const newInterval = heartbeatInterval.value;
+  // 创建一个新的心跳间隔
+  if (wsStore.isConnected && newInterval) {
+    // 使用setTimeout代替修改常量
+    wsStore.stopHeartbeat();
+    wsStore.startHeartbeat();
+  }
+  addSystemLog(`心跳间隔已更新为: ${heartbeatInterval.value}ms`);
+};
+
+// 设置最大重连次数
+const setMaxReconnectAttempts = () => {
+  // 注意：这里我们不能修改MAX_RECONNECT_ATTEMPTS，它是只读的
+  // 改为仅记录日志，实际上这个值在运行时无法修改
+  addSystemLog(
+    `已记录最大重连次数建议值: ${maxReconnectAttempts.value}（注：此值为只读，无法在运行时修改）`,
+  );
+};
+
+// 模拟页面可见性变化
+const simulateVisibilityChange = (visible: boolean) => {
+  wsStore.setPageVisible(visible);
+  addSystemLog(`页面可见性模拟变更为: ${visible ? '可见' : '不可见'}`);
+};
+
+// 自动滚动到底部
+const scrollToBottom = () => {
+  if (autoScroll.value && logContainer.value) {
+    setTimeout(() => {
+      logContainer.value!.scrollTop = logContainer.value!.scrollHeight;
+    }, 50);
+  }
+};
+
+// 监听WebSocket消息
+const handleWebSocketMessage = () => {
+  // 添加接收到的消息到列表
+  const messageData = wsStore.data;
+  receivedMessages.value.push({
+    content:
+      typeof messageData === 'string'
+        ? messageData
+        : JSON.stringify(messageData, null, 2),
+    time: new Date().toLocaleTimeString(),
+    type: 'received',
+  });
+  scrollToBottom();
+};
+
+// 注册消息通知回调
+const registerNotificationCallback = () => {
+  wsStore.setNotificationCallback(() => {
+    handleWebSocketMessage();
+  });
+};
+
+// 初始化可见性监听器
+const initVisibilityListener = () => {
+  wsStore.initPageVisibilityListener();
+  addSystemLog('页面可见性监听器已初始化');
+};
+
+// 测试自动重连
+const testAutoReconnect = () => {
+  // 强制关闭连接而不设置manualDisconnect
+  if (wsStore.socket) {
+    wsStore.socket.close(1006, '强制关闭');
+    addSystemLog('WebSocket连接已强制关闭，应该会自动尝试重连');
+  } else {
+    addSystemLog('WebSocket未连接，无法测试自动重连');
+  }
+};
+
+onMounted(() => {
+  registerNotificationCallback();
+  initVisibilityListener();
+  addSystemLog('WebSocket调试页面已加载');
+
+  // 尝试自动连接
+  wsStore.autoConnect();
+
+  // 记录初始状态
+  if (wsStore.isConnected) {
+    addSystemLog('WebSocket已连接状态');
+  } else if (wsStore.connectStatus === -1) {
+    addSystemLog('WebSocket连接失败');
+  } else {
+    addSystemLog('WebSocket未连接');
+  }
+});
+
+onUnmounted(() => {
+  // 清除回调避免内存泄漏
+  wsStore.setNotificationCallback(null);
+});
+</script>
+
+<template>
+  <div class="websocket-debug">
+    <h2>WebSocket 调试工具</h2>
+
+    <el-card class="connection-card">
+      <template #header>
+        <div class="card-header">
+          <span>连接状态</span>
+          <el-alert
+            :title="wsStore.connectionStatusText"
+            :type="
+              wsStore.isConnected
+                ? 'success'
+                : wsStore.connectStatus === -1
+                  ? 'error'
+                  : 'info'
+            "
+            :closable="false"
+            style="margin-left: 10px"
+          />
+        </div>
+      </template>
+
+      <div class="connection-controls">
+        <div class="url-input">
+          <div class="custom-url-toggle">
+            <span>使用自定义URL:</span>
+            <el-switch v-model="useCustomUrl" />
+          </div>
+
+          <el-input
+            v-if="useCustomUrl"
+            v-model="customUrl"
+            placeholder="输入自定义WebSocket URL"
+            clearable
+            class="ws-url-input"
+          />
+          <div v-else class="default-url">
+            <span>默认URL: {{ wsUrl }}</span>
+          </div>
+        </div>
+
+        <div class="button-group">
+          <el-button
+            type="primary"
+            :disabled="wsStore.isConnected || isLoading"
+            :loading="isLoading"
+            @click="connectWebSocket"
+          >
+            连接
+          </el-button>
+
+          <el-button
+            type="danger"
+            :disabled="!wsStore.isConnected || isLoading"
+            @click="disconnectWebSocket"
+          >
+            断开
+          </el-button>
+
+          <el-button
+            type="warning"
+            :disabled="wsStore.isConnected || isLoading"
+            @click="reconnectWebSocket"
+          >
+            重连
+          </el-button>
+        </div>
+      </div>
+
+      <el-divider />
+
+      <div class="config-section">
+        <div class="config-item">
+          <span>重连延迟 (ms):</span>
+          <el-input
+            v-model.number="reconnectDelay"
+            type="number"
+            style="width: 150px"
+          />
+        </div>
+
+        <div class="config-item">
+          <span>心跳间隔 (ms):</span>
+          <el-input
+            v-model.number="heartbeatInterval"
+            type="number"
+            style="width: 150px"
+          />
+          <el-button size="small" @click="setHeartbeatInterval">设置</el-button>
+        </div>
+
+        <div class="config-item">
+          <span>最大重连次数:</span>
+          <el-input
+            v-model.number="maxReconnectAttempts"
+            type="number"
+            style="width: 150px"
+          />
+          <el-button size="small" @click="setMaxReconnectAttempts"
+            >设置</el-button
+          >
+        </div>
+      </div>
+    </el-card>
+
+    <el-card class="test-card">
+      <template #header>
+        <div class="card-header">
+          <span>测试功能</span>
+        </div>
+      </template>
+
+      <div class="test-controls">
+        <div class="test-group">
+          <el-button
+            type="primary"
+            @click="sendHeartbeat"
+            :disabled="!wsStore.canSendMessage"
+            >发送心跳</el-button
+          >
+          <el-button
+            type="warning"
+            @click="testAutoReconnect"
+            :disabled="!wsStore.isConnected"
+            >测试自动重连</el-button
+          >
+        </div>
+
+        <div class="test-group">
+          <span>模拟页面可见性:</span>
+          <el-button @click="simulateVisibilityChange(true)">可见</el-button>
+          <el-button @click="simulateVisibilityChange(false)">不可见</el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <el-card class="message-card">
+      <template #header>
+        <div class="card-header">
+          <span>发送消息</span>
+        </div>
+      </template>
+
+      <div class="send-message">
+        <el-input
+          v-model="message"
+          placeholder="输入要发送的消息"
+          :disabled="!wsStore.canSendMessage"
+          @keyup.enter="sendMessage"
+        >
+          <template #append>
+            <el-button @click="sendMessage" :disabled="!wsStore.canSendMessage"
+              >发送</el-button
+            >
+          </template>
+        </el-input>
+      </div>
+    </el-card>
+
+    <el-card class="log-card">
+      <template #header>
+        <div class="card-header">
+          <span>消息日志</span>
+          <div class="log-controls">
+            <div class="autoscroll">
+              <span>自动滚动:</span>
+              <el-switch v-model="autoScroll" />
+            </div>
+            <el-button size="small" @click="clearLogs">清空日志</el-button>
+          </div>
+        </div>
+      </template>
+
+      <div class="message-log" ref="logContainer">
+        <div
+          v-for="(msg, index) in receivedMessages"
+          :key="index"
+          :class="['message-item', msg.type]"
+        >
+          <div class="message-time">[{{ msg.time }}]</div>
+          <div class="message-content">
+            <pre>{{ msg.content }}</pre>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.websocket-debug {
+  padding: 20px;
+}
+
+.connection-card,
+.message-card,
+.test-card,
+.log-card {
+  margin-bottom: 20px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+}
+
+.connection-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.url-input {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.custom-url-toggle {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.default-url {
+  padding: 8px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+
+.ws-url-input {
+  width: 100%;
+}
+
+.button-group {
+  display: flex;
+  gap: 10px;
+}
+
+.config-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.config-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.test-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.test-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.send-message {
+  width: 100%;
+}
+
+.log-controls {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  gap: 15px;
+}
+
+.autoscroll {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.message-log {
+  max-height: 300px;
+  overflow-y: auto;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.message-item {
+  margin-bottom: 8px;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.received {
+  background-color: #f0f9eb;
+}
+
+.sent {
+  background-color: #ecf5ff;
+}
+
+.system {
+  background-color: #f4f4f5;
+}
+
+.message-time {
+  font-size: 12px;
+  color: #909399;
+}
+
+.message-content {
+  margin-top: 3px;
+}
+
+.message-content pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>