新增WebSocket组件
This commit is contained in:
zqm
320
Web/Vue/CubeLib/examples/CubeWebSocket/BasicExample.vue
Normal file
320
Web/Vue/CubeLib/examples/CubeWebSocket/BasicExample.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div class="basic-example">
|
||||
<div class="status-panel">
|
||||
<h3>基础使用示例</h3>
|
||||
<div class="status-item">
|
||||
<span class="label">连接状态:</span>
|
||||
<span :class="['status', status]">{{ statusText }}</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="label">已连接:</span>
|
||||
<span :class="['value', isConnected ? 'yes' : 'no']">
|
||||
{{ isConnected ? '是' : '否' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="label">重连次数:</span>
|
||||
<span class="value">{{ reconnectCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message-panel">
|
||||
<h3>消息列表</h3>
|
||||
<div class="message-list">
|
||||
<div v-for="(msg, index) in messages" :key="index" class="message-item">
|
||||
<div class="message-type">{{ msg.type }}</div>
|
||||
<div class="message-content">{{ JSON.stringify(msg.data, null, 2) }}</div>
|
||||
</div>
|
||||
<div v-if="messages.length === 0" class="empty">暂无消息</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<h3>控制面板</h3>
|
||||
<div class="control-buttons">
|
||||
<button @click="handleConnect" :disabled="isConnected">连接</button>
|
||||
<button @click="handleDisconnect" :disabled="!isConnected">断开</button>
|
||||
<button @click="handleSend" :disabled="!isConnected">发送测试消息</button>
|
||||
<button @click="handleClearMessages">清空消息</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CubeWebSocket
|
||||
ref="wsRef"
|
||||
ws-url="ws://localhost:8086/ws"
|
||||
:auto-connect="false"
|
||||
:reconnect="true"
|
||||
:debug-mode="true"
|
||||
@connected="handleConnected"
|
||||
@disconnected="handleDisconnected"
|
||||
@error="handleError"
|
||||
@message="handleMessage"
|
||||
@status-changed="handleStatusChanged"
|
||||
@connecting="handleConnecting"
|
||||
@reconnecting="handleReconnecting"
|
||||
@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 messages = ref([])
|
||||
const reconnectCount = ref(0)
|
||||
const errorMessage = ref('')
|
||||
|
||||
const statusText = computed(() => {
|
||||
const statusMap = {
|
||||
disconnected: '未连接',
|
||||
connecting: '连接中',
|
||||
connected: '已连接',
|
||||
reconnecting: '重连中',
|
||||
error: '错误'
|
||||
}
|
||||
return statusMap[status.value] || status.value
|
||||
})
|
||||
|
||||
const isConnected = computed(() => status.value === 'connected')
|
||||
|
||||
const handleConnected = () => {
|
||||
console.log('[基础示例] WebSocket 已连接')
|
||||
reconnectCount.value = 0
|
||||
}
|
||||
|
||||
const handleDisconnected = (code, reason) => {
|
||||
console.log('[基础示例] WebSocket 已断开:', code, reason)
|
||||
}
|
||||
|
||||
const handleError = (error) => {
|
||||
console.error('[基础示例] WebSocket 错误:', error)
|
||||
errorMessage.value = error.message || '连接错误'
|
||||
setTimeout(() => {
|
||||
errorMessage.value = ''
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
const handleMessage = (message) => {
|
||||
console.log('[基础示例] 收到消息:', message)
|
||||
messages.value.push({
|
||||
...message,
|
||||
timestamp: new Date().toLocaleTimeString()
|
||||
})
|
||||
}
|
||||
|
||||
const handleStatusChanged = (newStatus) => {
|
||||
console.log('[基础示例] 状态变化:', newStatus)
|
||||
status.value = newStatus
|
||||
}
|
||||
|
||||
const handleConnecting = () => {
|
||||
console.log('[基础示例] 开始连接')
|
||||
}
|
||||
|
||||
const handleReconnecting = () => {
|
||||
console.log('[基础示例] 开始重连')
|
||||
reconnectCount.value++
|
||||
}
|
||||
|
||||
const handleMessageSent = (message) => {
|
||||
console.log('[基础示例] 消息已发送:', message)
|
||||
}
|
||||
|
||||
const handleMessageQueued = (message) => {
|
||||
console.log('[基础示例] 消息已加入队列:', message)
|
||||
}
|
||||
|
||||
const handleMessageFailed = (data) => {
|
||||
console.error('[基础示例] 消息发送失败:', data)
|
||||
}
|
||||
|
||||
const handleConnect = () => {
|
||||
wsRef.value?.connect()
|
||||
}
|
||||
|
||||
const handleDisconnect = () => {
|
||||
wsRef.value?.disconnect()
|
||||
}
|
||||
|
||||
const handleSend = () => {
|
||||
wsRef.value?.send('test', {
|
||||
text: 'Hello from CubeWebSocket',
|
||||
timestamp: Date.now()
|
||||
})
|
||||
}
|
||||
|
||||
const handleClearMessages = () => {
|
||||
messages.value = []
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.basic-example {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status-panel h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-item .label {
|
||||
width: 100px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status-item .value {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status.disconnected {
|
||||
background: #999;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status.connecting {
|
||||
background: #faad14;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status.connected {
|
||||
background: #52c41a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status.reconnecting {
|
||||
background: #1890ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.value.yes {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.value.no {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.message-panel {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.message-panel h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.message-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.message-type {
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.control-panel h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user