first commit

2026-04-14 15:06:26 +08:00
commit 9ee0c6c597
582 changed files with 61051 additions and 0 deletions
--- a/src/pages-infra/web-socket/index.vue
+++ b/src/pages-infra/web-socket/index.vue
@@ -0,0 +1,491 @@
+<template>
+  <view class="yd-page-container">
+    <!-- 顶部导航栏 -->
+    <wd-navbar
+      title="WebSocket 测试"
+      left-arrow placeholder safe-area-inset-top fixed
+      @click-left="handleBack"
+    />
+
+    <!-- 连接状态卡片 -->
+    <view class="mx-24rpx mt-24rpx overflow-hidden rounded-16rpx bg-white shadow-sm">
+      <view class="p-32rpx">
+        <!-- 状态指示器 -->
+        <view class="mb-24rpx flex items-center">
+          <view
+            class="mr-16rpx h-20rpx w-20rpx rounded-full"
+            :class="isConnected ? 'bg-[#07c160]' : 'bg-[#fa5151]'"
+          />
+          <text class="text-32rpx text-[#333] font-semibold">连接管理</text>
+        </view>
+        <!-- 连接状态 -->
+        <view class="mb-24rpx flex items-center rounded-12rpx bg-[#f7f8fa] p-24rpx">
+          <text class="mr-16rpx text-28rpx text-[#666]">连接状态:</text>
+          <wd-tag :type="isConnected ? 'success' : 'danger'">
+            {{ statusText }}
+          </wd-tag>
+        </view>
+        <!-- 服务地址 -->
+        <view class="mb-24rpx">
+          <text class="mb-12rpx block text-26rpx text-[#999]">服务地址</text>
+          <view class="rounded-12rpx bg-[#f7f8fa] p-24rpx">
+            <text class="break-all text-26rpx text-[#666]">{{ serverUrl }}</text>
+          </view>
+        </view>
+        <!-- 连接按钮 -->
+        <wd-button
+          block
+          :type="isConnected ? 'error' : 'primary'"
+          @click="toggleConnection"
+        >
+          {{ isConnected ? '断开连接' : '建立连接' }}
+        </wd-button>
+      </view>
+    </view>
+
+    <!-- 发送消息卡片 -->
+    <view class="mx-24rpx mt-24rpx overflow-hidden rounded-16rpx bg-white shadow-sm">
+      <view class="p-32rpx">
+        <view class="mb-24rpx flex items-center">
+          <wd-icon name="chat" size="36rpx" color="#1989fa" class="mr-12rpx" />
+          <text class="text-32rpx text-[#333] font-semibold">发送消息</text>
+        </view>
+        <!-- 接收人选择 -->
+        <view class="mb-24rpx">
+          <text class="mb-12rpx block text-26rpx text-[#999]">接收人</text>
+          <wd-picker
+            v-model="sendUserId"
+            :columns="userColumns"
+            :disabled="!isConnected"
+            @confirm="handleUserChange"
+          >
+            <view class="flex items-center justify-between rounded-12rpx bg-[#f7f8fa] p-24rpx">
+              <text class="text-28rpx" :class="isConnected ? 'text-[#333]' : 'text-[#c8c9cc]'">
+                {{ selectedUserLabel }}
+              </text>
+              <wd-icon name="arrow-down" size="32rpx" :color="isConnected ? '#666' : '#c8c9cc'" />
+            </view>
+          </wd-picker>
+        </view>
+        <!-- 消息内容 -->
+        <view class="mb-24rpx">
+          <text class="mb-12rpx block text-26rpx text-[#999]">消息内容</text>
+          <wd-textarea
+            v-model="sendText"
+            placeholder="请输入要发送的消息..."
+            :disabled="!isConnected"
+            :maxlength="500"
+            show-word-limit
+            auto-height
+            :min-height="120"
+          />
+        </view>
+
+        <!-- 发送按钮 -->
+        <wd-button
+          block
+          type="primary"
+          :disabled="!isConnected || !sendText.trim()"
+          @click="handleSend"
+        >
+          <wd-icon name="send" size="32rpx" class="mr-8rpx" />
+          发送消息
+        </wd-button>
+      </view>
+    </view>
+
+    <!-- 消息记录卡片 -->
+    <view class="mx-24rpx mb-24rpx mt-24rpx overflow-hidden rounded-16rpx bg-white shadow-sm">
+      <view class="p-32rpx">
+        <view class="mb-24rpx flex items-center justify-between">
+          <view class="flex items-center">
+            <wd-icon name="list" size="36rpx" color="#1989fa" class="mr-12rpx" />
+            <text class="text-32rpx text-[#333] font-semibold">消息记录</text>
+            <wd-tag v-if="messageList.length > 0" type="primary" plain class="ml-16rpx">
+              {{ messageList.length }} 条
+            </wd-tag>
+          </view>
+          <wd-button
+            v-if="messageList.length > 0"
+            size="small"
+            type="error"
+            plain
+            @click="clearMessages"
+          >
+            清空
+          </wd-button>
+        </view>
+
+        <!-- 消息列表 -->
+        <scroll-view
+          scroll-y
+          class="message-list rounded-12rpx bg-[#f7f8fa]"
+          :style="{ height: '600rpx' }"
+        >
+          <view v-if="messageList.length === 0" class="h-full flex flex-col items-center justify-center">
+            <wd-icon name="inbox" size="80rpx" color="#c8c9cc" />
+            <text class="mt-16rpx text-26rpx text-[#c8c9cc]">暂无消息记录</text>
+          </view>
+          <view v-else class="p-20rpx">
+            <view
+              v-for="(msg, index) in messageReverseList"
+              :key="index"
+              class="mb-20rpx rounded-12rpx bg-white p-24rpx shadow-sm"
+            >
+              <view class="mb-12rpx flex items-center justify-between">
+                <view class="flex items-center">
+                  <view
+                    class="mr-12rpx h-16rpx w-16rpx rounded-full"
+                    :style="{ backgroundColor: getMessageBadgeColor(msg.type) }"
+                  />
+                  <text class="text-26rpx text-[#666] font-medium">
+                    {{ getMessageTypeText(msg.type) }}
+                  </text>
+                  <text v-if="msg.userId" class="ml-16rpx text-24rpx text-[#999]">
+                    用户 ID: {{ msg.userId }}
+                  </text>
+                </view>
+                <text class="text-22rpx text-[#c8c9cc]">
+                  {{ formatDateTime(msg.time) }}
+                </text>
+              </view>
+              <view class="break-words text-28rpx text-[#333]">
+                {{ msg.text }}
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+
+    <!-- 底部安全区域 -->
+    <view class="h-env(safe-area-inset-bottom)" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { User } from '@/api/system/user'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useToast } from 'wot-design-uni'
+import { getSimpleUserList } from '@/api/system/user'
+import { useTokenStore } from '@/store/token'
+import { getEnvBaseUrlRoot, navigateBackPlus } from '@/utils'
+import { formatDateTime } from '@/utils/date'
+
+definePage({
+  style: {
+    navigationBarTitleText: '',
+    navigationStyle: 'custom',
+  },
+})
+
+// ======================= 状态定义 =======================
+const tokenStore = useTokenStore()
+const toast = useToast()
+
+// WebSocket 相关状态
+const socketTask = ref<UniApp.SocketTask | null>(null)
+const isConnected = ref(false)
+const statusText = computed(() => (isConnected.value ? '已连接' : '未连接'))
+
+// 服务地址
+const serverUrl = computed(() => {
+  const baseUrl = getEnvBaseUrlRoot()
+  const wsUrl = baseUrl.replace('http', 'ws')
+  const tokenInfo = tokenStore.tokenInfo as any
+  const token = tokenInfo?.refreshToken || tokenStore.validToken
+  return `${wsUrl}/infra/ws?token=${token}`
+})
+
+// 消息相关状态
+interface Message {
+  text: string
+  time: number
+  type?: 'single' | 'group' | 'system'
+  userId?: string
+}
+const messageList = ref<Message[]>([])
+const messageReverseList = computed(() => [...messageList.value].reverse())
+
+// 发送消息相关
+const sendText = ref('')
+const sendUserId = ref('all')
+const userList = ref<User[]>([])
+const userColumns = computed(() => {
+  const list = [
+    { value: 'all', label: '所有人' },
+    ...userList.value.map(user => ({
+      value: String(user.id),
+      label: user.nickname || user.username,
+    })),
+  ]
+  return [list]
+}) // 用户选择器列表
+const selectedUserLabel = computed(() => {
+  if (sendUserId.value === 'all') {
+    return '所有人'
+  }
+  const user = userList.value.find(u => String(u.id) === sendUserId.value)
+  return user?.nickname || user?.username || '所有人'
+}) // 选中的用户标签
+
+// ======================= WebSocket 方法 =======================
+
+/** 建立 WebSocket 连接 */
+function connect() {
+  if (socketTask.value) {
+    return
+  }
+
+  // 1.1 发起连接请求
+  socketTask.value = uni.connectSocket({
+    url: serverUrl.value,
+    success: () => {
+      console.log('WebSocket 连接请求已发送')
+    },
+    fail: (err) => {
+      console.error('WebSocket 连接失败:', err)
+      toast.error('连接失败')
+    },
+  })
+  // 1.2 监听连接打开
+  socketTask.value.onOpen(() => {
+    console.log('WebSocket 连接已打开')
+    isConnected.value = true
+    toast.success('连接成功')
+    // 开始心跳
+    startHeartbeat()
+  })
+
+  // 2. 监听消息
+  socketTask.value.onMessage((res) => {
+    handleMessage(res.data as string)
+  })
+
+  // 3.1 监听连接关闭
+  socketTask.value.onClose(() => {
+    console.log('WebSocket 连接已关闭')
+    isConnected.value = false
+    socketTask.value = null
+    stopHeartbeat()
+  })
+  // 3.2 监听错误
+  socketTask.value.onError((err) => {
+    console.error('WebSocket 错误:', err)
+    isConnected.value = false
+    socketTask.value = null
+    stopHeartbeat()
+    toast.error('连接异常')
+  })
+}
+
+/** 关闭 WebSocket 连接 */
+function disconnect() {
+  if (!socketTask.value) {
+    return
+  }
+  socketTask.value.close({
+    success: () => {
+      console.log('WebSocket 连接已主动关闭')
+      toast.success('已断开')
+    },
+  })
+  socketTask.value = null
+  isConnected.value = false
+  stopHeartbeat()
+}
+
+/** 切换连接状态 */
+function toggleConnection() {
+  if (isConnected.value) {
+    disconnect()
+  } else {
+    connect()
+  }
+}
+
+// ======================= 心跳机制 =======================
+let heartbeatTimer: ReturnType<typeof setInterval> | null = null
+
+/** 启动心跳机制 */
+function startHeartbeat() {
+  stopHeartbeat()
+  // 30 秒发送一次心跳
+  heartbeatTimer = setInterval(() => {
+    if (socketTask.value && isConnected.value) {
+      socketTask.value.send({
+        data: 'ping',
+        fail: (err) => {
+          console.error('心跳发送失败:', err)
+        },
+      })
+    }
+  }, 30000)
+}
+
+/** 停止心跳机制 */
+function stopHeartbeat() {
+  if (heartbeatTimer) {
+    clearInterval(heartbeatTimer)
+    heartbeatTimer = null
+  }
+}
+
+// ======================= 消息处理 =======================
+
+/** 处理接收到的消息 */
+function handleMessage(data: string) {
+  if (!data) {
+    return
+  }
+
+  try {
+    // 心跳响应
+    if (data === 'pong') {
+      return
+    }
+
+    // 1. 解析消息
+    const jsonMessage = JSON.parse(data)
+    const type = jsonMessage.type
+    const content = JSON.parse(jsonMessage.content)
+    if (!type) {
+      console.warn('未知的消息类型:', data)
+      return
+    }
+
+    // 2.1 处理 demo-message-receive 消息
+    if (type === 'demo-message-receive') {
+      const single = content.single
+      messageList.value.push({
+        text: content.text,
+        time: Date.now(),
+        type: single ? 'single' : 'group',
+        userId: content.fromUserId,
+      })
+      return
+    }
+
+    // 2.2 处理 notice-push 消息
+    if (type === 'notice-push') {
+      messageList.value.push({
+        text: content.title,
+        time: Date.now(),
+        type: 'system',
+      })
+      return
+    }
+
+    console.warn('未处理的消息类型:', type, data)
+  } catch (error) {
+    console.error('消息解析失败:', error, data)
+  }
+}
+
+/** 发送消息 */
+function handleSend() {
+  if (!sendText.value.trim()) {
+    toast.show('请输入消息内容')
+    return
+  }
+  if (!socketTask.value || !isConnected.value) {
+    toast.show('请先建立连接')
+    return
+  }
+
+  // 1.1 构建消息内容
+  const messageContent = JSON.stringify({
+    text: sendText.value,
+    toUserId: sendUserId.value === 'all' ? undefined : sendUserId.value,
+  })
+  // 1.2 构建完整消息
+  const jsonMessage = JSON.stringify({
+    type: 'demo-message-send',
+    content: messageContent,
+  })
+
+  // 2. 发送消息
+  socketTask.value.send({
+    data: jsonMessage,
+    success: () => {
+      toast.success('发送成功')
+      sendText.value = ''
+    },
+    fail: (err) => {
+      console.error('消息发送失败:', err)
+      toast.error('发送失败')
+    },
+  })
+}
+
+/** 清空消息记录 */
+function clearMessages() {
+  messageList.value = []
+}
+
+// ======================= 工具方法 =======================
+
+/** 获取消息类型的徽标颜色 */
+function getMessageBadgeColor(type?: string) {
+  switch (type) {
+    case 'group':
+      return '#07c160'
+    case 'single':
+      return '#1989fa'
+    case 'system':
+      return '#fa5151'
+    default:
+      return '#c8c9cc'
+  }
+}
+
+/** 获取消息类型的文本 */
+function getMessageTypeText(type?: string) {
+  switch (type) {
+    case 'group':
+      return '群发'
+    case 'single':
+      return '单发'
+    case 'system':
+      return '系统'
+    default:
+      return '未知'
+  }
+}
+
+/** 处理用户选择变化 */
+function handleUserChange({ value }: { value: string[] }) {
+  sendUserId.value = value[0] || 'all'
+}
+
+/** 返回上一页 */
+function handleBack() {
+  navigateBackPlus()
+}
+
+// ======================= 生命周期 =======================
+
+/** 初始化 */
+onMounted(async () => {
+  // 获取用户列表
+  try {
+    userList.value = await getSimpleUserList()
+  } catch (error) {
+    console.error('获取用户列表失败:', error)
+  }
+})
+
+/** 页面卸载 */
+onUnmounted(() => {
+  // 页面销毁时断开连接
+  disconnect()
+})
+</script>
+
+<style lang="scss" scoped>
+.message-list {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>