yudao-ui-admin-uniapp/src/pages-infra/webSocket/index.vue

<template>
  <view class="min-h-screen bg-[#f5f5f5]">
    <!-- 顶部导航栏 -->
    <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 { getSimpleUserList } from '@/api/system/user'
import { useTokenStore } from '@/store/token'
import { getEnvBaseUrlRoot } from '@/utils'
import { formatDateTime } from '@/utils/date'

definePage({
  style: {
    navigationBarTitleText: '',
    navigationStyle: 'custom',
  },
})

// ======================= 状态定义 =======================
const tokenStore = useTokenStore()

// 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)
      uni.showToast({ title: '连接失败', icon: 'error' })
    },
  })
  // 1.2 监听连接打开
  socketTask.value.onOpen(() => {
    console.log('WebSocket 连接已打开')
    isConnected.value = true
    uni.showToast({ title: '连接成功', icon: '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()
    uni.showToast({ title: '连接异常', icon: 'error' })
  })
}

/** 关闭 WebSocket 连接 */
function disconnect() {
  if (!socketTask.value) {
    return
  }
  socketTask.value.close({
    success: () => {
      console.log('WebSocket 连接已主动关闭')
      uni.showToast({ title: '已断开', icon: '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()) {
    uni.showToast({ title: '请输入消息内容', icon: 'none' })
    return
  }
  if (!socketTask.value || !isConnected.value) {
    uni.showToast({ title: '请先建立连接', icon: 'none' })
    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: () => {
      uni.showToast({ title: '发送成功', icon: 'success' })
      sendText.value = ''
    },
    fail: (err) => {
      console.error('消息发送失败:', err)
      uni.showToast({ title: '发送失败', icon: '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() {
  uni.navigateBack()
}

// ======================= 生命周期 =======================

/** 初始化 */
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>