JoyD/Web/Vue/CubeLib/examples/CubeWebSocket/MessageQueueExample.vue

<template>
  <div class="message-queue-example">
    <div class="queue-panel">
      <h3>消息队列</h3>
      <div class="queue-stats">
        <div class="stat-item">
          <span class="stat-label">队列大小:</span>
          <span :class="['stat-value', { 'warning': queueSize > 50, 'danger': queueSize > 80 }]">
            {{ queueSize }} / {{ maxQueueSize }}
          </span>
        </div>
        <div class="stat-item">
          <span class="stat-label">已发送:</span>
          <span class="stat-value success">{{ sentCount }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">已排队:</span>
          <span class="stat-value info">{{ queuedCount }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">发送失败:</span>
          <span class="stat-value error">{{ failedCount }}</span>
        </div>
      </div>

      <div class="queue-progress">
        <div class="progress-bar">
          <div 
            class="progress-fill" 
            :style="{ width: `${(queueSize / maxQueueSize) * 100}%` }"
            :class="{ 'warning': queueSize > 50, 'danger': queueSize > 80 }"
          ></div>
        </div>
        <div class="progress-text">{{ Math.round((queueSize / maxQueueSize) * 100) }}%</div>
      </div>

      <div class="queue-config">
        <div class="config-item">
          <label class="config-label">最大队列大小:</label>
          <input 
            type="number" 
            v-model.number="maxQueueSize" 
            min="10"
            max="500"
            step="10"
          />
        </div>
        <div class="config-item">
          <label class="config-label">自动发送间隔:</label>
          <input 
            type="number" 
            v-model.number="autoSendInterval" 
            min="100"
            max="5000"
            step="100"
          />
          <span class="unit">毫秒</span>
        </div>
      </div>
    </div>

    <div class="message-log-panel">
      <h3>消息日志</h3>
      <div class="log-filters">
        <button 
          v-for="filter in filters" 
          :key="filter.value"
          :class="['filter-btn', { active: activeFilter === filter.value }]"
          @click="activeFilter = filter.value"
        >
          {{ filter.label }}
        </button>
      </div>
      <div class="log-list">
        <div 
          v-for="(log, index) in filteredLogs" 
          :key="index" 
          :class="['log-item', log.type]"
        >
          <div class="log-time">{{ log.time }}</div>
          <div class="log-content">
            <div class="log-type">{{ log.type }}</div>
            <div class="log-message">{{ log.message }}</div>
          </div>
        </div>
        <div v-if="filteredLogs.length === 0" class="empty">暂无日志</div>
      </div>
    </div>

    <div class="control-panel">
      <h3>控制</h3>
      <div class="control-buttons">
        <button @click="handleConnect" :disabled="status !== 'disconnected'">
          连接
        </button>
        <button @click="handleDisconnect" :disabled="status !== 'connected'">
          断开
        </button>
        <button @click="handleSendSingle" :disabled="status !== 'connected'">
          发送单条消息
        </button>
        <button @click="handleSendBatch" :disabled="status !== 'connected'">
          批量发送10条
        </button>
        <button @click="handleClearLogs" class="secondary">
          清空日志
        </button>
      </div>
    </div>

    <CubeWebSocket
      ref="wsRef"
      ws-url="ws://localhost:8086/ws"
      :auto-connect="false"
      :max-queue-size="maxQueueSize"
      :debug-mode="true"
      @connected="handleConnected"
      @disconnected="handleDisconnected"
      @error="handleError"
      @message="handleMessage"
      @status-changed="handleStatusChanged"
      @message-sent="handleMessageSent"
      @message-queued="handleMessageQueued"
      @message-failed="handleMessageFailed"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import CubeWebSocket from 'joyd.web.vue.cubelib'

const wsRef = ref(null)
const status = ref('disconnected')
const queueSize = ref(0)
const maxQueueSize = ref(100)
const sentCount = ref(0)
const queuedCount = ref(0)
const failedCount = ref(0)
const autoSendInterval = ref(500)
const logs = ref([])
const activeFilter = ref('all')

const filters = [
  { value: 'all', label: '全部' },
  { value: 'sent', label: '已发送' },
  { value: 'queued', label: '已排队' },
  { value: 'failed', label: '失败' }
]

const filteredLogs = computed(() => {
  if (activeFilter.value === 'all') {
    return logs.value
  }
  return logs.value.filter(log => log.type === activeFilter.value)
})

const addLog = (type, message) => {
  logs.value.unshift({
    type,
    time: new Date().toLocaleTimeString(),
    message
  })
  if (logs.value.length > 100) {
    logs.value = logs.value.slice(0, 100)
  }
}

const handleConnected = () => {
  console.log('[消息队列示例] WebSocket 已连接')
  addLog('info', '连接成功，开始发送队列中的消息')
}

const handleDisconnected = (code, reason) => {
  console.log('[消息队列示例] WebSocket 已断开:', code, reason)
  addLog('warning', `连接断开 (${code}): ${reason}`)
}

const handleError = (error) => {
  console.error('[消息队列示例] WebSocket 错误:', error)
  addLog('error', `连接错误: ${error.message}`)
}

const handleMessage = (message) => {
  console.log('[消息队列示例] 收到消息:', message)
  addLog('info', `收到消息: ${message.type}`)
}

const handleStatusChanged = (newStatus) => {
  console.log('[消息队列示例] 状态变化:', newStatus)
  status.value = newStatus
}

const handleMessageSent = (message) => {
  console.log('[消息队列示例] 消息已发送:', message)
  sentCount.value++
  addLog('sent', `发送消息: ${message.type}`)
}

const handleMessageQueued = (message) => {
  console.log('[消息队列示例] 消息已加入队列:', message)
  queueSize.value++
  queuedCount.value++
  addLog('queued', `消息加入队列: ${message.type}`)
}

const handleMessageFailed = (data) => {
  console.error('[消息队列示例] 消息发送失败:', data)
  failedCount.value++
  queueSize.value--
  addLog('failed', `消息发送失败 (${data.reason}): ${data.message.type}`)
}

const handleConnect = () => {
  wsRef.value?.connect()
}

const handleDisconnect = () => {
  wsRef.value?.disconnect()
}

const handleSendSingle = () => {
  wsRef.value?.send('test', {
    text: `测试消息 ${Date.now()}`,
    index: sentCount.value + queuedCount.value
  })
}

const handleSendBatch = () => {
  for (let i = 0; i < 10; i++) {
    setTimeout(() => {
      wsRef.value?.send('batch', {
        index: i,
        text: `批量消息 ${i}`,
        timestamp: Date.now()
      })
    }, i * autoSendInterval.value)
  }
}

const handleClearLogs = () => {
  logs.value = []
  sentCount.value = 0
  queuedCount.value = 0
  failedCount.value = 0
}
</script>

<style scoped>
.message-queue-example {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.queue-panel,
.message-log-panel,
.control-panel {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}

.queue-panel h3,
.message-log-panel h3,
.control-panel h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}

.queue-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.stat-label {
  color: #666;
}

.stat-value {
  font-weight: 600;
  color: #333;
}

.stat-value.success {
  color: #52c41a;
}

.stat-value.info {
  color: #1890ff;
}

.stat-value.error {
  color: #ff4d4f;
}

.stat-value.warning {
  color: #faad14;
}

.stat-value.danger {
  color: #ff4d4f;
}

.queue-progress {
  margin-bottom: 20px;
}

.progress-bar {
  height: 20px;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #667eea;
  transition: width 0.3s ease;
}

.progress-fill.warning {
  background: #faad14;
}

.progress-fill.danger {
  background: #ff4d4f;
}

.progress-text {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.queue-config {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.config-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.config-label {
  color: #666;
}

.config-item input {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.unit {
  color: #999;
  font-size: 12px;
}

.log-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 6px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  background: #f0f0f0;
}

.filter-btn.active {
  background: #667eea;
  color: #fff;
  border-color: #667eea;
}

.log-list {
  max-height: 400px;
  overflow-y: auto;
  background: #fff;
  border-radius: 4px;
  padding: 10px;
}

.log-item {
  display: flex;
  gap: 12px;
  padding: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.log-item:last-child {
  border-bottom: none;
}

.log-item.sent {
  border-left: 3px solid #52c41a;
}

.log-item.queued {
  border-left: 3px solid #1890ff;
}

.log-item.failed {
  border-left: 3px solid #ff4d4f;
}

.log-time {
  min-width: 80px;
  color: #999;
  font-size: 12px;
}

.log-content {
  flex: 1;
}

.log-type {
  font-weight: 600;
  color: #667eea;
  margin-bottom: 4px;
}

.log-message {
  font-size: 13px;
  color: #333;
}

.empty {
  text-align: center;
  padding: 40px;
  color: #999;
}

.control-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.control-buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background: #667eea;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.control-buttons button:hover:not(:disabled) {
  background: #5568d3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.control-buttons button:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.control-buttons button.secondary {
  background: #6c757d;
}

.control-buttons button.secondary:hover:not(:disabled) {
  background: #5a6268;
}
</style>