Nuxt cliet service

2025-09-23 18:47:16 +07:00
parent 6f1deec639
commit 3b98f25e43
63 changed files with 6584 additions and 5493 deletions
--- a/examples/clientsocket/components/tabs/MonitoringTab.vue
+++ b/examples/clientsocket/components/tabs/MonitoringTab.vue
@@ -0,0 +1,609 @@
+<template>
+  <div class="monitoring-tab">
+    <div class="controls">
+      <div class="input-group">
+        <label for="notificationChannel">Notification Channel</label>
+        <input
+          id="notificationChannel"
+          v-model="notificationChannel"
+          type="text"
+          placeholder="Enter notification channel"
+        />
+      </div>
+
+      <div class="input-group">
+        <label for="notificationPayload">Notification Payload (JSON)</label>
+        <textarea
+          id="notificationPayload"
+          v-model="notificationPayload"
+          placeholder='{"message": "Hello", "type": "info"}'
+          rows="3"
+        ></textarea>
+      </div>
+
+      <div class="input-group">
+        <label for="triggerEvent">Trigger Event</label>
+        <select id="triggerEvent" v-model="triggerEvent">
+          <option value="user_joined">User Joined</option>
+          <option value="user_left">User Left</option>
+          <option value="message_sent">Message Sent</option>
+          <option value="connection_lost">Connection Lost</option>
+          <option value="server_restart">Server Restart</option>
+          <option value="custom">Custom Event</option>
+        </select>
+      </div>
+
+      <div class="input-group">
+        <label for="customEvent">Custom Event Name</label>
+        <input
+          id="customEvent"
+          v-model="customEvent"
+          type="text"
+          placeholder="custom_event_name"
+          :disabled="triggerEvent !== 'custom'"
+        />
+      </div>
+    </div>
+
+    <div class="controls">
+      <button
+        class="btn btn-primary"
+        :disabled="!isConnected || !notificationChannel.trim() || !notificationPayload.trim()"
+        @click="triggerNotification"
+      >
+        Trigger Notification
+      </button>
+
+      <button
+        class="btn btn-info"
+        :disabled="!isConnected"
+        @click="getStats"
+      >
+        Refresh Stats
+      </button>
+
+      <button
+        class="btn btn-secondary"
+        :disabled="!isConnected"
+        @click="getMonitoringData"
+      >
+        Get Monitoring Data
+      </button>
+
+      <button
+        class="btn btn-warning"
+        @click="clearMonitoringData"
+      >
+        Clear Data
+      </button>
+    </div>
+
+    <!-- Connection Health -->
+    <div class="health-section">
+      <h3>Connection Health</h3>
+      <div class="health-grid">
+        <div class="health-item">
+          <div class="health-label">Status</div>
+          <div class="health-value" :class="connectionHealthClass">
+            {{ connectionHealthText }}
+          </div>
+        </div>
+        <div class="health-item">
+          <div class="health-label">Latency</div>
+          <div class="health-value">{{ connectionState.connectionLatency }}ms</div>
+        </div>
+        <div class="health-item">
+          <div class="health-label">Messages Sent</div>
+          <div class="health-value">{{ connectionState.messagesSent }}</div>
+        </div>
+        <div class="health-item">
+          <div class="health-label">Messages Received</div>
+          <div class="health-value">{{ connectionState.messagesReceived }}</div>
+        </div>
+        <div class="health-item">
+          <div class="health-label">Reconnect Attempts</div>
+          <div class="health-value">{{ connectionState.reconnectAttempts }}</div>
+        </div>
+        <div class="health-item">
+          <div class="health-label">Connection Time</div>
+          <div class="health-value">{{ connectionState.uptime }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Server Statistics -->
+    <div class="stats-section" v-if="stats">
+      <h3>Server Statistics</h3>
+      <div class="stats-grid">
+        <div class="stat-item">
+          <div class="stat-label">Connected Clients</div>
+          <div class="stat-value">{{ stats.connected_clients }}</div>
+          <div class="stat-change" :class="getStatChangeClass('connected_clients')">
+            {{ getStatChange('connected_clients') }}
+          </div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">Unique IPs</div>
+          <div class="stat-value">{{ stats.unique_ips }}</div>
+          <div class="stat-change" :class="getStatChangeClass('unique_ips')">
+            {{ getStatChange('unique_ips') }}
+          </div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">Static Clients</div>
+          <div class="stat-value">{{ stats.static_clients }}</div>
+          <div class="stat-change" :class="getStatChangeClass('static_clients')">
+            {{ getStatChange('static_clients') }}
+          </div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">Active Rooms</div>
+          <div class="stat-value">{{ stats.active_rooms }}</div>
+          <div class="stat-change" :class="getStatChangeClass('active_rooms')">
+            {{ getStatChange('active_rooms') }}
+          </div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">Message Queue</div>
+          <div class="stat-value">{{ stats.message_queue_size }}</div>
+          <div class="stat-change" :class="getStatChangeClass('message_queue_size')">
+            {{ getStatChange('message_queue_size') }}
+          </div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">Queue Workers</div>
+          <div class="stat-value">{{ stats.queue_workers }}</div>
+          <div class="stat-change" :class="getStatChangeClass('queue_workers')">
+            {{ getStatChange('queue_workers') }}
+          </div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">Server Uptime</div>
+          <div class="stat-value">{{ formatUptime(stats.uptime) }}</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">Last Updated</div>
+          <div class="stat-value">{{ formatTime(stats.timestamp) }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Monitoring Data -->
+    <div class="monitoring-data-section" v-if="monitoringData">
+      <h3>Monitoring Data</h3>
+      <div class="monitoring-content">
+        <pre>{{ JSON.stringify(monitoringData, null, 2) }}</pre>
+      </div>
+    </div>
+
+    <!-- Notification History -->
+    <div class="notification-history-section">
+      <h3>Notification History</h3>
+      <div class="notification-history">
+        <div
+          v-for="(notification, index) in notificationHistory.slice(0, 10)"
+          :key="index"
+          class="notification-item"
+        >
+          <div class="notification-header">
+            <div class="notification-channel">{{ notification.channel }}</div>
+            <div class="notification-time">{{ formatTime(notification.timestamp) }}</div>
+          </div>
+          <div class="notification-payload">
+            <pre>{{ JSON.stringify(notification.payload, null, 2) }}</pre>
+          </div>
+        </div>
+        <div v-if="notificationHistory.length === 0" class="no-notifications">
+          No notifications sent yet
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useWebSocket } from '../../composables/useWebSocket'
+
+const {
+  isConnected,
+  connectionState,
+  stats,
+  monitoringData,
+  triggerNotification: triggerNotificationFn,
+  getStats,
+  getMonitoringData
+} = useWebSocket()
+
+const notificationChannel = ref('')
+const notificationPayload = ref('')
+const triggerEvent = ref('user_joined')
+const customEvent = ref('')
+const notificationHistory = ref<Array<{
+  channel: string
+  payload: any
+  timestamp: number
+}>>([])
+
+const connectionHealthClass = computed(() => {
+  switch (connectionState.connectionHealth) {
+    case 'excellent': return 'health-excellent'
+    case 'good': return 'health-good'
+    case 'warning': return 'health-warning'
+    case 'poor': return 'health-poor'
+    default: return 'health-poor'
+  }
+})
+
+const connectionHealthText = computed(() => {
+  switch (connectionState.connectionHealth) {
+    case 'excellent': return 'Excellent'
+    case 'good': return 'Good'
+    case 'warning': return 'Warning'
+    case 'poor': return 'Poor'
+    default: return 'Unknown'
+  }
+})
+
+const triggerNotification = () => {
+  if (!notificationChannel.value.trim() || !notificationPayload.value.trim()) return
+
+  try {
+    const payload = JSON.parse(notificationPayload.value)
+    const eventName = triggerEvent.value === 'custom' ? customEvent.value : triggerEvent.value
+
+    triggerNotificationFn(notificationChannel.value.trim(), {
+      ...payload,
+      event: eventName,
+      timestamp: Date.now()
+    })
+
+    // Add to history
+    notificationHistory.value.unshift({
+      channel: notificationChannel.value.trim(),
+      payload,
+      timestamp: Date.now()
+    })
+
+    // Clear form
+    notificationChannel.value = ''
+    notificationPayload.value = ''
+
+  } catch (error) {
+    alert('Invalid JSON payload: ' + (error instanceof Error ? error.message : String(error)))
+  }
+}
+
+const clearMonitoringData = () => {
+  notificationHistory.value = []
+}
+
+const formatTime = (timestamp: number) => {
+  return new Date(timestamp).toLocaleString()
+}
+
+const formatUptime = (uptime: number) => {
+  const seconds = Math.floor(uptime / 1000)
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const secs = seconds % 60
+  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
+// Mock stat changes for demonstration
+const previousStats = ref<any>(null)
+
+const getStatChange = (statName: string) => {
+  if (!previousStats.value || !stats.value) return ''
+
+  const current = stats.value[statName as keyof typeof stats.value]
+  const previous = previousStats.value[statName as keyof typeof previousStats.value]
+
+  if (current > previous) return `+${current - previous}`
+  if (current < previous) return `-${previous - current}`
+  return '0'
+}
+
+const getStatChangeClass = (statName: string) => {
+  if (!previousStats.value || !stats.value) return ''
+
+  const current = stats.value[statName as keyof typeof stats.value]
+  const previous = previousStats.value[statName as keyof typeof previousStats.value]
+
+  if (current > previous) return 'stat-increase'
+  if (current < previous) return 'stat-decrease'
+  return 'stat-unchanged'
+}
+
+// Update previous stats when new stats arrive
+const updatePreviousStats = () => {
+  if (stats.value) {
+    previousStats.value = { ...stats.value }
+  }
+}
+
+// Watch for stats changes
+import { watch } from 'vue'
+watch(stats, updatePreviousStats, { deep: true })
+</script>
+
+<style scoped>
+.monitoring-tab {
+  padding: 20px 0;
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 24px;
+  padding: 24px;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.input-group label {
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.input-group input,
+.input-group select,
+.input-group textarea {
+  padding: 12px 16px;
+  border: 2px solid #e9ecef;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.3s ease;
+}
+
+.input-group input:focus,
+.input-group select:focus,
+.input-group textarea:focus {
+  outline: none;
+  border-color: #1976d2;
+  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
+}
+
+.input-group input:disabled {
+  background: #e9ecef;
+  cursor: not-allowed;
+}
+
+.btn {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.btn-primary {
+  background: #1976d2;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #1565c0;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
+}
+
+.btn-info {
+  background: #17a2b8;
+  color: white;
+}
+
+.btn-info:hover:not(:disabled) {
+  background: #138496;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
+}
+
+.btn-secondary {
+  background: #6c757d;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background: #5a6268;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
+}
+
+.btn-warning {
+  background: #FFC107;
+  color: #212529;
+}
+
+.btn-warning:hover {
+  background: #e0a800;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.health-section,
+.stats-section {
+  margin: 32px 0;
+}
+
+.health-section h3,
+.stats-section h3 {
+  margin-bottom: 16px;
+  color: #333;
+  font-size: 18px;
+}
+
+.health-grid,
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.health-item,
+.stat-item {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid #e9ecef;
+  text-align: center;
+}
+
+.health-label,
+.stat-label {
+  color: #666;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+
+.health-value {
+  color: #333;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.stat-value {
+  color: #333;
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.stat-change {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.stat-increase {
+  color: #28a745;
+}
+
+.stat-decrease {
+  color: #dc3545;
+}
+
+.stat-unchanged {
+  color: #6c757d;
+}
+
+.monitoring-data-section {
+  margin: 32px 0;
+}
+
+.monitoring-data-section h3 {
+  margin-bottom: 16px;
+  color: #333;
+  font-size: 18px;
+}
+
+.monitoring-content {
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+  padding: 20px;
+  overflow-x: auto;
+}
+
+.monitoring-content pre {
+  margin: 0;
+  font-size: 12px;
+  color: #333;
+}
+
+.notification-history-section {
+  margin-top: 32px;
+}
+
+.notification-history-section h3 {
+  margin-bottom: 16px;
+  color: #333;
+  font-size: 18px;
+}
+
+.notification-history {
+  max-height: 300px;
+  overflow-y: auto;
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 20px;
+  border: 1px solid #e9ecef;
+}
+
+.notification-item {
+  margin: 16px 0;
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #e9ecef;
+  overflow: hidden;
+}
+
+.notification-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #e9ecef;
+}
+
+.notification-channel {
+  font-weight: 600;
+  color: #1976d2;
+}
+
+.notification-time {
+  color: #666;
+  font-size: 12px;
+}
+
+.notification-payload {
+  padding: 16px;
+}
+
+.notification-payload pre {
+  background: #f8f9fa;
+  padding: 12px;
+  border-radius: 4px;
+  overflow-x: auto;
+  font-size: 12px;
+  color: #333;
+  margin: 0;
+}
+
+.no-notifications {
+  text-align: center;
+  color: #666;
+  font-style: italic;
+  padding: 40px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .controls {
+    grid-template-columns: 1fr;
+    padding: 16px;
+  }
+
+  .health-grid,
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>