新增WebSocket组件
This commit is contained in:
zqm
500
Web/Vue/CubeLib/examples/CubeWebSocket/MessageQueueExample.vue
Normal file
500
Web/Vue/CubeLib/examples/CubeWebSocket/MessageQueueExample.vue
Normal file
@@ -0,0 +1,500 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user