From 21f70f1d3f0ad7003ff6a08ac503a15347dca4ba Mon Sep 17 00:00:00 2001
From: Meninjar <mey09.nin@gmail.com>
Date: Tue, 23 Sep 2025 21:18:25 +0700
Subject: [PATCH] update clietn

---
 .../components/tabs/ConnectionTab.vue         |   46 +-
 .../components/tabs/DatabaseTab.vue           |  164 +--
 .../components/tabs/MessagingTab.vue          |  224 +++-
 .../components/tabs/MonitoringTab.vue         |  212 ++--
 examples/clientsocket/composables/note        | 1073 +++++++++++++++++
 .../composables/useWebSocket.fixed            | 1073 +++++++++++++++++
 .../clientsocket/composables/useWebSocket.ts  | 1039 +++++++++++++---
 examples/clientsocket/types/websocket.ts      |  288 ++---
 8 files changed, 3592 insertions(+), 527 deletions(-)
 create mode 100644 examples/clientsocket/composables/note
 create mode 100644 examples/clientsocket/composables/useWebSocket.fixed

diff --git a/examples/clientsocket/components/tabs/ConnectionTab.vue b/examples/clientsocket/components/tabs/ConnectionTab.vue
index 570de98f..988e02f8 100644
--- a/examples/clientsocket/components/tabs/ConnectionTab.vue
+++ b/examples/clientsocket/components/tabs/ConnectionTab.vue
@@ -45,30 +45,21 @@
     <div class="controls">
       <div class="input-group">
         <label class="checkbox-group">
-          <input
-            v-model="config.useIPBasedId"
-            type="checkbox"
-          />
+          <input v-model="config.useIPBasedId" type="checkbox" />
           Use IP-based ID
         </label>
       </div>
 
       <div class="input-group">
         <label class="checkbox-group">
-          <input
-            v-model="config.autoReconnect"
-            type="checkbox"
-          />
+          <input v-model="config.autoReconnect" type="checkbox" />
           Auto Reconnect
         </label>
       </div>
 
       <div class="input-group">
         <label class="checkbox-group">
-          <input
-            v-model="config.heartbeatEnabled"
-            type="checkbox"
-          />
+          <input v-model="config.heartbeatEnabled" type="checkbox" />
           Enable Heartbeat
         </label>
       </div>
@@ -82,7 +73,7 @@
         @click="connect"
       >
         <span v-if="isConnecting" class="loading-indicator"></span>
-        {{ isConnected ? 'Reconnect' : 'Connect' }}
+        {{ isConnected ? "Reconnect" : "Connect" }}
       </button>
 
       <button
@@ -101,10 +92,7 @@
         Test Connection
       </button>
 
-      <button
-        class="btn btn-secondary"
-        @click="clearMessages"
-      >
+      <button class="btn btn-secondary" @click="clearMessages">
         Clear Messages
       </button>
     </div>
@@ -164,11 +152,11 @@
         </div>
         <div class="info-item">
           <strong>Static ID:</strong>
-          <span>{{ connectionState.staticId || 'N/A' }}</span>
+          <span>{{ connectionState.staticId || "N/A" }}</span>
         </div>
         <div class="info-item">
           <strong>IP Address:</strong>
-          <span>{{ connectionState.ipAddress || 'N/A' }}</span>
+          <span>{{ connectionState.ipAddress || "N/A" }}</span>
         </div>
         <div class="info-item">
           <strong>User ID:</strong>
@@ -180,7 +168,9 @@
         </div>
         <div class="info-item">
           <strong>Connected At:</strong>
-          <span>{{ new Date(connectionState.connectionStartTime || 0).toLocaleString() }}</span>
+          <span>{{
+            new Date(connectionState.connectionStartTime || 0).toLocaleString()
+          }}</span>
         </div>
         <div class="info-item">
           <strong>Latency:</strong>
@@ -196,8 +186,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useWebSocket } from '../../composables/useWebSocket'
+import { computed } from "vue";
+import { useWebSocket } from "../../composables/useWebSocket";
 
 const {
   isConnected,
@@ -207,8 +197,8 @@ const {
   connect,
   disconnect,
   testConnection,
-  clearMessages
-} = useWebSocket()
+  clearMessages,
+} = useWebSocket();
 </script>
 
 <style scoped>
@@ -343,8 +333,12 @@ const {
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .connection-info {
diff --git a/examples/clientsocket/components/tabs/DatabaseTab.vue b/examples/clientsocket/components/tabs/DatabaseTab.vue
index 35d3aa03..6879f180 100644
--- a/examples/clientsocket/components/tabs/DatabaseTab.vue
+++ b/examples/clientsocket/components/tabs/DatabaseTab.vue
@@ -71,10 +71,7 @@
         Get Monitoring Data
       </button>
 
-      <button
-        class="btn btn-secondary"
-        @click="clearQueryHistory"
-      >
+      <button class="btn btn-secondary" @click="clearQueryHistory">
         Clear Query History
       </button>
     </div>
@@ -91,8 +88,11 @@
           <div class="query-header">
             <div class="query-type">{{ query.type }}</div>
             <div class="query-time">{{ formatTime(query.timestamp) }}</div>
-            <div class="query-status" :class="query.success ? 'success' : 'error'">
-              {{ query.success ? 'Success' : 'Error' }}
+            <div
+              class="query-status"
+              :class="query.success ? 'success' : 'error'"
+            >
+              {{ query.success ? "Success" : "Error" }}
             </div>
           </div>
           <div class="query-details">
@@ -157,89 +157,95 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useWebSocket } from '../../composables/useWebSocket'
+import { ref } from "vue";
+import { useWebSocket } from "../../composables/useWebSocket";
 
 const {
   isConnected,
   stats,
   executeDatabaseQuery,
   getStats,
-  getMonitoringData
-} = useWebSocket()
+  getMonitoringData,
+} = useWebSocket();
 
-const queryType = ref('select')
-const tableName = ref('')
-const queryParams = ref('')
-const customQuery = ref('')
-const queryHistory = ref<Array<{
-  type: string
-  sql: string
-  params: string
-  result: any
-  error: string
-  success: boolean
-  timestamp: number
-}>>([])
+const queryType = ref("select");
+const tableName = ref("");
+const queryParams = ref("");
+const customQuery = ref("");
+const queryHistory = ref<
+  Array<{
+    type: string;
+    sql: string;
+    params: string;
+    result: any;
+    error: string;
+    success: boolean;
+    timestamp: number;
+  }>
+>([]);
 
 const executeQuery = async () => {
-  if (!isConnected.value) return
+  if (!isConnected.value) return;
 
-  let sql = ''
-  let params = {}
+  let sql = "";
+  let params = {};
 
   try {
     if (customQuery.value.trim()) {
-      sql = customQuery.value.trim()
-      params = queryParams.value ? JSON.parse(queryParams.value) : {}
+      sql = customQuery.value.trim();
+      params = queryParams.value ? JSON.parse(queryParams.value) : {};
     } else {
       switch (queryType.value) {
-        case 'select':
-          sql = `SELECT * FROM ${tableName.value}`
-          break
-        case 'insert':
-          params = JSON.parse(queryParams.value || '{}')
-          sql = `INSERT INTO ${tableName.value} SET ?`
-          break
-        case 'update':
-          params = JSON.parse(queryParams.value || '{}')
-          sql = `UPDATE ${tableName.value} SET ? WHERE id = ?`
-          break
-        case 'delete':
-          sql = `DELETE FROM ${tableName.value} WHERE id = ?`
-          break
-        case 'create_table':
-          sql = `CREATE TABLE IF NOT EXISTS ${tableName.value} (id INT AUTO_INCREMENT PRIMARY KEY, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)`
-          break
-        case 'drop_table':
-          sql = `DROP TABLE IF EXISTS ${tableName.value}`
-          break
-        case 'show_tables':
-          sql = 'SHOW TABLES'
-          break
-        case 'describe_table':
-          sql = `DESCRIBE ${tableName.value}`
-          break
+        case "select":
+          sql = `SELECT * FROM ${tableName.value}`;
+          break;
+        case "insert":
+          params = JSON.parse(queryParams.value || "{}");
+          sql = `INSERT INTO ${tableName.value} SET ?`;
+          break;
+        case "update":
+          params = JSON.parse(queryParams.value || "{}");
+          sql = `UPDATE ${tableName.value} SET ? WHERE id = ?`;
+          break;
+        case "delete":
+          sql = `DELETE FROM ${tableName.value} WHERE id = ?`;
+          break;
+        case "create_table":
+          sql = `CREATE TABLE IF NOT EXISTS ${tableName.value} (id INT AUTO_INCREMENT PRIMARY KEY, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP)`;
+          break;
+        case "drop_table":
+          sql = `DROP TABLE IF EXISTS ${tableName.value}`;
+          break;
+        case "show_tables":
+          sql = "SHOW TABLES";
+          break;
+        case "describe_table":
+          sql = `DESCRIBE ${tableName.value}`;
+          break;
       }
     }
 
-    const result = await executeDatabaseQuery(queryType.value, {
-      sql,
-      params,
-      table: tableName.value
-    })
-
+    async function executeDatabaseQuery(queryData: {
+      sql: string;
+      params?: any;
+      table?: string;
+    }): Promise<any> {
+      // Function implementation
+    }
     // Add to history
     queryHistory.value.unshift({
       type: queryType.value,
       sql,
       params: JSON.stringify(params),
-      result: result,
-      error: '',
+      result: await executeDatabaseQuery({
+        sql,
+        params,
+        table: tableName.value,
+      }),
+      error: "",
       success: true,
-      timestamp: Date.now()
-    })
-
+      timestamp: Date.now(),
+    });
   } catch (error) {
     // Add error to history
     queryHistory.value.unshift({
@@ -249,26 +255,28 @@ const executeQuery = async () => {
       result: null,
       error: error instanceof Error ? error.message : String(error),
       success: false,
-      timestamp: Date.now()
-    })
+      timestamp: Date.now(),
+    });
   }
-}
+};
 
 const clearQueryHistory = () => {
-  queryHistory.value = []
-}
+  queryHistory.value = [];
+};
 
 const formatTime = (timestamp: number) => {
-  return new Date(timestamp).toLocaleString()
-}
+  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')}`
-}
+  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")}`;
+};
 </script>
 
 <style scoped>
diff --git a/examples/clientsocket/components/tabs/MessagingTab.vue b/examples/clientsocket/components/tabs/MessagingTab.vue
index 658d2564..5d4dd993 100644
--- a/examples/clientsocket/components/tabs/MessagingTab.vue
+++ b/examples/clientsocket/components/tabs/MessagingTab.vue
@@ -1,18 +1,50 @@
 <template>
   <div class="messaging-tab">
+    <!-- Connection Status -->
+    <div class="connection-status" :class="connectionState.connectionStatus">
+      <div class="status-indicator">
+        <div class="status-dot" :class="connectionState.connectionStatus"></div>
+        <span class="status-text">
+          {{
+            connectionState.connectionStatus === "connected"
+              ? "Connected"
+              : connectionState.connectionStatus === "connecting"
+              ? "Connecting..."
+              : connectionState.connectionStatus === "error"
+              ? "Connection Error"
+              : "Disconnected"
+          }}
+        </span>
+      </div>
+      <div class="connection-details" v-if="connectionState.clientId">
+        <span>Client ID: {{ connectionState.clientId }}</span>
+        <span v-if="connectionState.currentRoom"
+          >Room: {{ connectionState.currentRoom }}</span
+        >
+        <span v-if="connectionState.connectionLatency > 0"
+          >Latency: {{ connectionState.connectionLatency }}ms</span
+        >
+        <span v-if="connectionState.connectionHealth"
+          >Health: {{ connectionState.connectionHealth }}</span
+        >
+      </div>
+    </div>
+
     <div class="controls">
       <div class="input-group">
         <label for="broadcastMessage">Broadcast Message</label>
         <textarea
           id="broadcastMessage"
-          v-model="broadcastMessage"
+          v-model="messageText"
           placeholder="Enter message to broadcast to all clients"
           rows="3"
         ></textarea>
       </div>
 
       <div class="input-group">
-        <label for="targetClientId">Target Client ID (for direct messages)</label>
+        <label for="targetClientId"
+          >Target Client ID (for direct messages)</label
+        >
         <input
           id="targetClientId"
           v-model="targetClientId"
@@ -45,16 +77,18 @@
     <div class="controls">
       <button
         class="btn btn-primary"
-        :disabled="!isConnected || !broadcastMessage.trim()"
-        @click="sendBroadcast"
+        :disabled="!isConnected || !messageText.trim()"
+        @click="handleSendBroadcast"
       >
         Send Broadcast
       </button>
 
       <button
         class="btn btn-info"
-        :disabled="!isConnected || !targetClientId.trim() || !broadcastMessage.trim()"
-        @click="sendDirectMessage"
+        :disabled="
+          !isConnected || !targetClientId.trim() || !messageText.trim()
+        "
+        @click="handleSendDirectMessage"
       >
         Send Direct Message
       </button>
@@ -62,7 +96,7 @@
       <button
         class="btn btn-success"
         :disabled="!isConnected || !targetRoom.trim() || !roomMessage.trim()"
-        @click="sendRoomMessage"
+        @click="handleSendRoomMessage"
       >
         Send Room Message
       </button>
@@ -93,17 +127,11 @@
         Get Server Info
       </button>
 
-      <button
-        class="btn btn-secondary"
-        @click="clearMessages"
-      >
+      <button class="btn btn-secondary" @click="clearMessages">
         Clear Messages
       </button>
 
-      <button
-        class="btn btn-secondary"
-        @click="clearActivityLog"
-      >
+      <button class="btn btn-secondary" @click="clearActivityLog">
         Clear Activity Log
       </button>
     </div>
@@ -116,7 +144,9 @@
           v-for="user in onlineUsers"
           :key="user.client_id"
           class="user-item"
-          :class="{ 'current-user': user.client_id === connectionState.clientId }"
+          :class="{
+            'current-user': user.client_id === connectionState.clientId,
+          }"
         >
           <div class="user-info">
             <div class="user-id">{{ user.client_id }}</div>
@@ -160,57 +190,67 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useWebSocket } from '../../composables/useWebSocket'
+import { ref, onMounted } from "vue";
+import { useWebSocket } from "../../composables/useWebSocket";
 
 const {
   isConnected,
   connectionState,
   onlineUsers,
   activityLog,
-  broadcastMessage: broadcastMessageFn,
-  sendDirectMessage: sendDirectMessageFn,
-  sendRoomMessage: sendRoomMessageFn,
+  broadcastMessage,
+  sendDirectMessage,
+  sendRoomMessage,
   sendHeartbeat,
   getOnlineUsers,
   getServerInfo,
   clearMessages,
-  clearActivityLog
-} = useWebSocket()
+  clearActivityLog,
+  connect,
+} = useWebSocket();
 
-const broadcastMessage = ref('')
-const targetClientId = ref('')
-const roomMessage = ref('')
-const targetRoom = ref('')
+const messageText = ref("");
+const targetClientId = ref("");
+const roomMessage = ref("");
+const targetRoom = ref("");
 
-const sendBroadcast = () => {
-  if (broadcastMessage.value.trim()) {
-    broadcastMessageFn(broadcastMessage.value.trim())
-    broadcastMessage.value = ''
+const handleSendBroadcast = () => {
+  if (messageText.value.trim()) {
+    broadcastMessage(messageText.value.trim());
+    messageText.value = "";
   }
-}
+};
 
-const sendDirectMessage = () => {
-  if (targetClientId.value.trim() && broadcastMessage.value.trim()) {
-    sendDirectMessageFn(targetClientId.value.trim(), broadcastMessage.value.trim())
-    broadcastMessage.value = ''
+const handleSendDirectMessage = () => {
+  if (targetClientId.value.trim() && messageText.value.trim()) {
+    sendDirectMessage(targetClientId.value.trim(), messageText.value.trim());
+    messageText.value = "";
   }
-}
+};
 
-const sendRoomMessage = () => {
+const handleSendRoomMessage = () => {
   if (targetRoom.value.trim() && roomMessage.value.trim()) {
-    sendRoomMessageFn(targetRoom.value.trim(), roomMessage.value.trim())
-    roomMessage.value = ''
+    sendRoomMessage(targetRoom.value.trim(), roomMessage.value.trim());
+    roomMessage.value = "";
   }
-}
+};
 
 const setTargetClient = (clientId: string) => {
-  targetClientId.value = clientId
-}
+  targetClientId.value = clientId;
+};
 
 const formatTime = (timestamp: number) => {
-  return new Date(timestamp).toLocaleString()
-}
+  return new Date(timestamp).toLocaleString();
+};
+
+// Initialize connection on component mount
+onMounted(() => {
+  console.log("MessagingTab mounted, initializing WebSocket connection...");
+  if (!isConnected.value) {
+    console.log("Attempting to connect to WebSocket...");
+    connect();
+  }
+});
 </script>
 
 <style scoped>
@@ -218,6 +258,98 @@ const formatTime = (timestamp: number) => {
   padding: 20px 0;
 }
 
+/* Connection Status Styles */
+.connection-status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  margin-bottom: 24px;
+  border-radius: 8px;
+  border: 2px solid;
+  font-weight: 600;
+}
+
+.connection-status.connected {
+  background: #e8f5e8;
+  border-color: #4caf50;
+  color: #2e7d32;
+}
+
+.connection-status.connecting {
+  background: #fff3e0;
+  border-color: #ff9800;
+  color: #ef6c00;
+}
+
+.connection-status.error {
+  background: #ffebee;
+  border-color: #f44336;
+  color: #c62828;
+}
+
+.connection-status.disconnected {
+  background: #f5f5f5;
+  border-color: #9e9e9e;
+  color: #616161;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.status-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+
+.status-dot.connected {
+  background: #4caf50;
+}
+
+.status-dot.connecting {
+  background: #ff9800;
+  animation: pulse 1s infinite;
+}
+
+.status-dot.error {
+  background: #f44336;
+  animation: pulse 0.5s infinite;
+}
+
+.status-dot.disconnected {
+  background: #9e9e9e;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.connection-details {
+  display: flex;
+  gap: 20px;
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+.connection-details span {
+  padding: 4px 8px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+}
+
 .controls {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -302,7 +434,7 @@ const formatTime = (timestamp: number) => {
 }
 
 .btn-warning {
-  background: #FFC107;
+  background: #ffc107;
   color: #212529;
 }
 
diff --git a/examples/clientsocket/components/tabs/MonitoringTab.vue b/examples/clientsocket/components/tabs/MonitoringTab.vue
index 217ee5c8..ad120931 100644
--- a/examples/clientsocket/components/tabs/MonitoringTab.vue
+++ b/examples/clientsocket/components/tabs/MonitoringTab.vue
@@ -48,17 +48,17 @@
     <div class="controls">
       <button
         class="btn btn-primary"
-        :disabled="!isConnected || !notificationChannel.trim() || !notificationPayload.trim()"
+        :disabled="
+          !isConnected ||
+          !notificationChannel.trim() ||
+          !notificationPayload.trim()
+        "
         @click="triggerNotification"
       >
         Trigger Notification
       </button>
 
-      <button
-        class="btn btn-info"
-        :disabled="!isConnected"
-        @click="getStats"
-      >
+      <button class="btn btn-info" :disabled="!isConnected" @click="getStats">
         Refresh Stats
       </button>
 
@@ -70,10 +70,7 @@
         Get Monitoring Data
       </button>
 
-      <button
-        class="btn btn-warning"
-        @click="clearMonitoringData"
-      >
+      <button class="btn btn-warning" @click="clearMonitoringData">
         Clear Data
       </button>
     </div>
@@ -90,7 +87,9 @@
         </div>
         <div class="health-item">
           <div class="health-label">Latency</div>
-          <div class="health-value">{{ connectionState.connectionLatency }}ms</div>
+          <div class="health-value">
+            {{ connectionState.connectionLatency }}ms
+          </div>
         </div>
         <div class="health-item">
           <div class="health-label">Messages Sent</div>
@@ -102,7 +101,9 @@
         </div>
         <div class="health-item">
           <div class="health-label">Reconnect Attempts</div>
-          <div class="health-value">{{ connectionState.reconnectAttempts }}</div>
+          <div class="health-value">
+            {{ connectionState.reconnectAttempts }}
+          </div>
         </div>
         <div class="health-item">
           <div class="health-label">Connection Time</div>
@@ -118,43 +119,52 @@
         <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
+            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') }}
+            {{ 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
+            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') }}
+            {{ 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
+            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') }}
+            {{ getStatChange("queue_workers") }}
           </div>
         </div>
         <div class="stat-item">
@@ -187,7 +197,9 @@
         >
           <div class="notification-header">
             <div class="notification-channel">{{ notification.channel }}</div>
-            <div class="notification-time">{{ formatTime(notification.timestamp) }}</div>
+            <div class="notification-time">
+              {{ formatTime(notification.timestamp) }}
+            </div>
           </div>
           <div class="notification-payload">
             <pre>{{ JSON.stringify(notification.payload, null, 2) }}</pre>
@@ -202,8 +214,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useWebSocket } from '../../composables/useWebSocket'
+import { ref, computed } from "vue";
+import { useWebSocket } from "../../composables/useWebSocket";
 
 const {
   isConnected,
@@ -212,119 +224,135 @@ const {
   monitoringData,
   triggerNotification: triggerNotificationFn,
   getStats,
-  getMonitoringData
-} = useWebSocket()
+  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 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'
+    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'
+    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
+  if (!notificationChannel.value.trim() || !notificationPayload.value.trim())
+    return;
 
   try {
-    const payload = JSON.parse(notificationPayload.value)
-    const eventName = triggerEvent.value === 'custom' ? customEvent.value : triggerEvent.value
+    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()
-    })
+    triggerNotificationFn(notificationChannel.value.trim());
 
     // Add to history
     notificationHistory.value.unshift({
       channel: notificationChannel.value.trim(),
       payload,
-      timestamp: Date.now()
-    })
+      timestamp: Date.now(),
+    });
 
     // Clear form
-    notificationChannel.value = ''
-    notificationPayload.value = ''
-
+    notificationChannel.value = "";
+    notificationPayload.value = "";
   } catch (error) {
-    alert('Invalid JSON payload: ' + (error instanceof Error ? error.message : String(error)))
+    alert(
+      "Invalid JSON payload: " +
+        (error instanceof Error ? error.message : String(error))
+    );
   }
-}
+};
 
 const clearMonitoringData = () => {
-  notificationHistory.value = []
-}
+  notificationHistory.value = [];
+};
 
 const formatTime = (timestamp: number) => {
-  return new Date(timestamp).toLocaleString()
-}
+  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')}`
-}
+  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 previousStats = ref<any>(null);
 
 const getStatChange = (statName: string) => {
-  if (!previousStats.value || !stats.value) return ''
+  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]
+  const current = stats.value[statName as keyof typeof stats.value] as number;
+  const previous =
+    previousStats.value[statName as keyof typeof previousStats.value];
 
-  if (current > previous) return `+${current - previous}`
-  if (current < previous) return `-${previous - current}`
-  return '0'
-}
+  if (current > previous) return `+${current - previous}`;
+  if (current < previous) return `-${previous - current}`;
+  return "0";
+};
 
 const getStatChangeClass = (statName: string) => {
-  if (!previousStats.value || !stats.value) return ''
+  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]
+  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'
-}
+  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 }
+    previousStats.value = { ...stats.value };
   }
-}
+};
 
 // Watch for stats changes
-import { watch } from 'vue'
-watch(stats, updatePreviousStats, { deep: true })
+import { watch } from "vue";
+watch(stats, updatePreviousStats, { deep: true });
 </script>
 
 <style scoped>
@@ -423,7 +451,7 @@ watch(stats, updatePreviousStats, { deep: true })
 }
 
 .btn-warning {
-  background: #FFC107;
+  background: #ffc107;
   color: #212529;
 }
 
diff --git a/examples/clientsocket/composables/note b/examples/clientsocket/composables/note
new file mode 100644
index 00000000..7478c165
--- /dev/null
+++ b/examples/clientsocket/composables/note
@@ -0,0 +1,1073 @@
+import { ref, computed, reactive, nextTick } from "vue";
+import type {
+  WebSocketMessage,
+  ConnectionState,
+  WebSocketConfig,
+  MessageHistory,
+  ConnectionStats,
+  MonitoringData,
+  ClientInfo,
+  OnlineUser,
+  ActivityLog,
+} from "../types/websocket";
+
+export const useWebSocket = () => {
+  // Check if we're in browser environment
+  const isBrowser = process.client;
+
+  const ws = ref<WebSocket | null>(null);
+  const isConnected = ref(false);
+  const isConnecting = ref(false);
+  const connectionStatus = ref<
+    "disconnected" | "connecting" | "connected" | "error"
+  >("disconnected");
+
+  const connectionState = reactive<ConnectionState>({
+    isConnected: false,
+    isConnecting: false,
+    connectionStatus: "disconnected",
+    clientId: null,
+    staticId: null,
+    currentRoom: null,
+    userId: "anonymous",
+    ipAddress: null,
+    connectionStartTime: null,
+    lastPingTime: null,
+    connectionLatency: 0,
+    connectionHealth: "poor",
+    reconnectAttempts: 0,
+    messagesReceived: 0,
+    messagesSent: 0,
+    uptime: "00:00:00",
+  });
+
+  const config = reactive<WebSocketConfig>({
+    wsUrl: "ws://localhost:8080/api/v1/ws",
+    userId: "anonymous",
+    room: "default",
+    staticId: "",
+    useIPBasedId: false,
+    autoReconnect: true,
+    heartbeatEnabled: true,
+    maxReconnectAttempts: 10,
+    reconnectDelay: 1000,
+    maxReconnectDelay: 30000,
+    heartbeatInterval: 30000,
+    heartbeatTimeout: 5000,
+    maxMissedHeartbeats: 3,
+    maxMessages: 1000,
+    messageWarningThreshold: 800,
+    actionThrottle: 100,
+  });
+
+  const messages = ref<MessageHistory[]>([]);
+  const stats = ref<ConnectionStats | null>(null);
+  const monitoringData = ref<MonitoringData | null>(null);
+  const onlineUsers = ref<OnlineUser[]>([]);
+  const activityLog = ref<ActivityLog[]>([]);
+
+  let reconnectTimeout: number | null = null;
+  let heartbeatInterval: number | null = null;
+  let heartbeatTimeout: number | null = null;
+  let missedHeartbeats = 0;
+  let lastHeartbeatTime = 0;
+  let messageCount = 0;
+  let connectionStartTime: number | null = null;
+  let uptimeInterval: number | null = null;
+  let isManualDisconnect = false;
+  let reconnectAttempts = 0;
+  let connectionHealth: "excellent" | "good" | "warning" | "poor" = "poor";
+
+  const updateConnectionStatus = (
+    status: "disconnected" | "connecting" | "connected" | "error"
+  ) => {
+    connectionStatus.value = status;
+    connectionState.connectionStatus = status;
+
+    switch (status) {
+      case "connected":
+        isConnected.value = true;
+        isConnecting.value = false;
+        connectionState.isConnected = true;
+        connectionState.isConnecting = false;
+        connectionState.connectionHealth = "good";
+        break;
+      case "connecting":
+        isConnected.value = false;
+        isConnecting.value = true;
+        connectionState.isConnected = false;
+        connectionState.isConnecting = true;
+        connectionState.connectionHealth = "warning";
+        break;
+      case "disconnected":
+        isConnected.value = false;
+        isConnecting.value = false;
+        connectionState.isConnected = false;
+        connectionState.isConnecting = false;
+        connectionState.connectionHealth = "poor";
+        break;
+      case "error":
+        isConnected.value = false;
+        isConnecting.value = false;
+        connectionState.isConnected = false;
+        connectionState.isConnecting = false;
+        connectionState.connectionHealth = "poor";
+        break;
+    }
+  };
+
+  const updateUptime = () => {
+    if (connectionStartTime && isConnected.value) {
+      const now = Date.now();
+      const uptime = now - connectionStartTime;
+      const seconds = Math.floor(uptime / 1000);
+      const minutes = Math.floor(seconds / 60);
+      const hours = Math.floor(minutes / 60);
+
+      connectionState.uptime = `${hours.toString().padStart(2, "0")}:${(
+        minutes % 60
+      )
+        .toString()
+        .padStart(2, "0")}:${(seconds % 60).toString().padStart(2, "0")}`;
+    } else {
+      connectionState.uptime = "00:00:00";
+    }
+  };
+
+  const startUptimeTimer = () => {
+    if (uptimeInterval) {
+      clearInterval(uptimeInterval);
+    }
+    uptimeInterval = window.setInterval(updateUptime, 1000);
+  };
+
+  const stopUptimeTimer = () => {
+    if (uptimeInterval) {
+      clearInterval(uptimeInterval);
+      uptimeInterval = null;
+    }
+  };
+
+  // Only run WebSocket logic in browser
+  if (isBrowser) {
+    // Initialize connection state
+    updateConnectionStatus("disconnected");
+  }
+
+  const addMessage = (
+    type: string,
+    data: any,
+    messageId?: string,
+    icon?: string
+  ) => {
+    if (!isBrowser) return;
+
+    const now = new Date();
+    const timeString = now.toLocaleTimeString("en-US", {
+      hour12: true,
+      hour: "numeric",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+
+    // Enhanced message formatting based on type
+    let formattedData = data;
+    let displayType = type;
+
+    switch (type) {
+      case "connection_info":
+        displayType = "info";
+        formattedData = {
+          client_id: data.clientId,
+          connected_at: data.connectedAt,
+          ip_address: data.ipAddress,
+          last_ping: data.lastPingTime || "N/A",
+          room: data.room || "default",
+          static_id: data.staticId || "none",
+          user_id: data.userId || "anonymous",
+        };
+        break;
+
+      case "heartbeat":
+        displayType = "info";
+        formattedData = `❤️ Heartbeat started\nInterval: ${
+          config.heartbeatInterval / 1000
+        }s`;
+        break;
+
+      case "pong":
+        displayType = "success";
+        formattedData = `🏓 Pong received\nLatency: ${connectionState.connectionLatency}ms`;
+        break;
+
+      case "message":
+        displayType = "info";
+        formattedData = `📨 Message received\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      case "broadcast":
+        displayType = "info";
+        formattedData = `📡 Broadcast received\n${data}`;
+        break;
+
+      case "direct_message":
+        displayType = "info";
+        formattedData = `📨 Direct message from ${data.from}\n${data.message}`;
+        break;
+
+      case "room_message":
+        displayType = "info";
+        formattedData = `📢 Room message from ${data.room}\n${data.message}`;
+        break;
+
+      case "stats":
+        displayType = "info";
+        formattedData = `📊 Stats updated\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      case "monitoring":
+        displayType = "info";
+        formattedData = `📈 Monitoring data\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      case "online_users":
+        displayType = "info";
+        formattedData = `👥 Online users updated\nCount: ${
+          data.users?.length || 0
+        }`;
+        break;
+
+      case "server_info":
+        displayType = "info";
+        formattedData = `🔧 Server info\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      case "system_health":
+        displayType = "info";
+        formattedData = `💚 System health\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      default:
+        if (typeof data === "string") {
+          formattedData = data;
+        } else {
+          formattedData = JSON.stringify(data, null, 2);
+        }
+    }
+
+    const message: MessageHistory = {
+      timestamp: now,
+      type: displayType,
+      data: formattedData,
+      messageId,
+      size: JSON.stringify(data).length,
+      icon: icon || getIconForMessageType(displayType),
+      timeString: timeString,
+    };
+
+    messages.value.unshift(message);
+    messageCount++;
+
+    // Keep only the last maxMessages
+    if (messages.value.length > config.maxMessages) {
+      messages.value = messages.value.slice(0, config.maxMessages);
+    }
+
+    // Update connection state
+    connectionState.messagesReceived++;
+  };
+
+  const getIconForMessageType = (type: string): string => {
+    switch (type) {
+      case "success":
+        return "🟢";
+      case "error":
+        return "❌";
+      case "warning":
+        return "⚠️";
+      case "info":
+        return "ℹ️";
+      default:
+        return "📝";
+    }
+  };
+
+  const connectionHealthColor = computed(() => {
+    switch (connectionState.connectionHealth) {
+      case "excellent":
+        return "#4CAF50";
+      case "good":
+        return "#2196F3";
+      case "warning":
+        return "#FFC107";
+      case "poor":
+        return "#F44336";
+      default:
+        return "#9E9E9E";
+    }
+  });
+
+  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";
+    }
+  });
+
+  // Admin functionality
+  const serverInfo = ref<any>(null);
+  const systemHealth = ref<any>(null);
+
+  const executeAdminCommand = async (command: string, params: any) => {
+    if (!isBrowser || !ws.value) throw new Error("Not connected");
+
+    const message = {
+      type: "admin_command",
+      command,
+      params,
+      timestamp: Date.now(),
+    };
+
+    ws.value.send(JSON.stringify(message));
+    return { success: true, message: "Command sent successfully" };
+  };
+
+  const getServerInfo = async () => {
+    if (!isBrowser || !ws.value) throw new Error("Not connected");
+
+    const message = {
+      type: "get_server_info",
+      timestamp: Date.now(),
+    };
+
+    ws.value.send(JSON.stringify(message));
+  };
+
+  const getSystemHealth = async () => {
+    if (!isBrowser || !ws.value) throw new Error("Not connected");
+
+    const message = {
+      type: "get_system_health",
+      timestamp: Date.now(),
+    };
+
+    ws.value.send(JSON.stringify(message));
+  };
+
+  // Cleanup on unmount
+  const cleanup = () => {
+    if (!isBrowser) return;
+
+    disconnect();
+    if (reconnectTimeout) {
+      clearTimeout(reconnectTimeout);
+    }
+    stopHeartbeat();
+  };
+
+  // WebSocket connection methods (only available in browser)
+  const connect = () => {
+    if (!isBrowser) return;
+
+    // Prevent multiple connection attempts
+    if (isConnecting.value || isConnected.value) {
+      return;
+    }
+
+    // Clean up existing connection
+    if (ws.value) {
+      cleanupConnection();
+    }
+
+    updateConnectionStatus("connecting");
+    isManualDisconnect = false;
+    connectionStartTime = Date.now();
+    startUptimeTimer();
+
+    try {
+      // Build WebSocket URL with parameters
+      let url = config.wsUrl;
+      const params = new URLSearchParams();
+
+      if (config.userId) {
+        params.append("user_id", config.userId);
+      }
+      if (config.room) {
+        params.append("room", config.room);
+      }
+      if (config.useIPBasedId) {
+        params.append("ip_based", "true");
+      } else if (config.staticId) {
+        params.append("static_id", config.staticId);
+      }
+
+      if (params.toString()) {
+        url += "?" + params.toString();
+      }
+
+      ws.value = new WebSocket(url);
+
+      // Connection timeout
+      const connectionTimeout = setTimeout(() => {
+        if (ws.value && ws.value.readyState === WebSocket.CONNECTING) {
+          ws.value.close();
+          updateConnectionStatus("error");
+          addMessage("❌ Connection timeout after 15 seconds", "error");
+          scheduleReconnect();
+        }
+      }, 15000);
+
+      ws.value.onopen = function (event) {
+        clearTimeout(connectionTimeout);
+        updateConnectionStatus("connected");
+        reconnectAttempts = 0;
+        connectionHealth = "good";
+        connectionState.connectionStartTime = connectionStartTime;
+
+        addMessage(
+          "🟢 Connected to WebSocket server",
+          "success",
+          "Connection established successfully"
+        );
+
+        // Start heartbeat if enabled
+        if (config.heartbeatEnabled) {
+          startHeartbeat();
+        }
+      };
+
+      ws.value.onmessage = function (event) {
+        handleIncomingMessage(event);
+      };
+
+      ws.value.onclose = function (event) {
+        clearTimeout(connectionTimeout);
+        cleanupTimers();
+        updateConnectionStatus("disconnected");
+
+        const reason = getCloseReason(event.code);
+        addMessage(
+          `🔴 Disconnected: ${reason}`,
+          "error",
+          `Code: ${event.code}, Reason: ${event.reason || "Unknown"}`
+        );
+
+        // Auto-reconnect logic
+        if (!isManualDisconnect && config.autoReconnect) {
+          scheduleReconnect();
+        }
+      };
+
+      ws.value.onerror = function (error) {
+        updateConnectionStatus("error");
+        connectionHealth = "poor";
+        addMessage("❌ WebSocket Error occurred", "error", error.toString());
+      };
+    } catch (error) {
+      updateConnectionStatus("error");
+      addMessage(
+        "❌ Failed to create WebSocket connection",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+      scheduleReconnect();
+    }
+  };
+
+  const disconnect = () => {
+    if (!isBrowser) return;
+
+    isManualDisconnect = true;
+    cleanupConnection();
+    updateConnectionStatus("disconnected");
+    addMessage("🔴 Manually disconnected from WebSocket", "info");
+  };
+
+  const sendMessage = (message: any) => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot send message: not connected", "error");
+      return;
+    }
+
+    try {
+      const messageData = {
+        type: "message",
+        data: message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(messageData));
+      connectionState.messagesSent++;
+      addMessage("📤 Message sent", "info", message);
+    } catch (error) {
+      addMessage(
+        "❌ Failed to send message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const broadcastMessage = (message: string) => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot broadcast message: not connected", "error");
+      return;
+    }
+
+    try {
+      const messageData = {
+        type: "broadcast",
+        message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(messageData));
+      connectionState.messagesSent++;
+      addMessage("📡 Message broadcasted", "info", message);
+    } catch (error) {
+      addMessage(
+        "❌ Failed to broadcast message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const sendDirectMessage = (clientId: string, message: string) => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot send direct message: not connected", "error");
+      return;
+    }
+
+    try {
+      const messageData = {
+        type: "direct_message",
+        clientId,
+        message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(messageData));
+      connectionState.messagesSent++;
+      addMessage(`📨 Direct message sent to ${clientId}`, "info", message);
+    } catch (error) {
+      addMessage(
+        "❌ Failed to send direct message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const sendRoomMessage = (room: string, message: string) => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot send room message: not connected", "error");
+      return;
+    }
+
+    try {
+      const messageData = {
+        type: "room_message",
+        room,
+        message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(messageData));
+      connectionState.messagesSent++;
+      addMessage(`📢 Room message sent to ${room}`, "info", message);
+    } catch (error) {
+      addMessage(
+        "❌ Failed to send room message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const getOnlineUsers = () => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot get online users: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "get_online_users",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+    } catch (error) {
+      addMessage(
+        "❌ Failed to request online users",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const testConnection = () => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot test connection: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "ping",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+      addMessage("🏓 Connection test sent", "info");
+    } catch (error) {
+      addMessage(
+        "❌ Failed to test connection",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const sendHeartbeat = () => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot send heartbeat: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "ping",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+      lastHeartbeatTime = Date.now();
+    } catch (error) {
+      addMessage(
+        "❌ Failed to send heartbeat",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const executeDatabaseQuery = async (query: string) => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      throw new Error("Not connected");
+    }
+
+    try {
+      const message = {
+        type: "database_query",
+        query,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+      return { success: true, message: "Database query sent successfully" };
+    } catch (error) {
+      throw new Error(
+        `Failed to execute database query: ${
+          error instanceof Error ? error.message : String(error)
+        }`
+      );
+    }
+  };
+
+  const triggerNotification = async (message: string) => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      throw new Error("Not connected");
+    }
+
+    try {
+      const notificationData = {
+        type: "notification",
+        message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(notificationData));
+      return { success: true, message: "Notification sent successfully" };
+    } catch (error) {
+      throw new Error(
+        `Failed to trigger notification: ${
+          error instanceof Error ? error.message : String(error)
+        }`
+      );
+    }
+  };
+
+  const getStats = () => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot get stats: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "get_stats",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+    } catch (error) {
+      addMessage(
+        "❌ Failed to request stats",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const getMonitoringData = () => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot get monitoring data: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "get_monitoring",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+    } catch (error) {
+      addMessage(
+        "❌ Failed to request monitoring data",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const clearMessages = () => {
+    if (!isBrowser) return;
+    messages.value = [];
+    messageCount = 0;
+  };
+
+  const clearActivityLog = () => {
+    if (!isBrowser) return;
+    activityLog.value = [];
+  };
+
+  const getMessagesByType = (type: string) => {
+    return messages.value.filter((msg) => msg.type === type);
+  };
+
+  const getRecentMessages = (count: number = 10) => {
+    return messages.value.slice(0, count);
+  };
+
+  const stopHeartbeat = () => {
+    if (!isBrowser) return;
+
+    if (heartbeatInterval) {
+      clearInterval(heartbeatInterval);
+      heartbeatInterval = null;
+    }
+    if (heartbeatTimeout) {
+      clearTimeout(heartbeatTimeout);
+      heartbeatTimeout = null;
+    }
+    missedHeartbeats = 0;
+  };
+
+  const cleanupConnection = () => {
+    if (!isBrowser) return;
+
+    if (ws.value) {
+      ws.value.close();
+      ws.value = null;
+    }
+    cleanupTimers();
+  };
+
+  const cleanupTimers = () => {
+    if (!isBrowser) return;
+
+    if (reconnectTimeout) {
+      clearTimeout(reconnectTimeout);
+      reconnectTimeout = null;
+    }
+    stopHeartbeat();
+    stopUptimeTimer();
+  };
+
+  const scheduleReconnect = () => {
+    if (!isBrowser || !config.autoReconnect) return;
+
+    if (reconnectAttempts >= config.maxReconnectAttempts) {
+      addMessage("❌ Max reconnection attempts reached", "error");
+      return;
+    }
+
+    reconnectAttempts++;
+    const delay = Math.min(
+      config.reconnectDelay * Math.pow(2, reconnectAttempts - 1),
+      config.maxReconnectDelay
+    );
+
+    addMessage(
+      `🔄 Reconnecting in ${delay}ms (attempt ${reconnectAttempts}/${config.maxReconnectAttempts})`,
+      "info"
+    );
+
+    reconnectTimeout = window.setTimeout(() => {
+      connect();
+    }, delay);
+  };
+
+  const startHeartbeat = () => {
+    if (!isBrowser || !config.heartbeatEnabled) return;
+
+    stopHeartbeat();
+
+    heartbeatInterval = window.setInterval(() => {
+      if (ws.value && ws.value.readyState === WebSocket.OPEN) {
+        const heartbeatMessage = {
+          type: "ping",
+          timestamp: Date.now(),
+        };
+        ws.value.send(JSON.stringify(heartbeatMessage));
+        lastHeartbeatTime = Date.now();
+
+        // Set timeout for heartbeat response
+        heartbeatTimeout = window.setTimeout(() => {
+          missedHeartbeats++;
+          if (missedHeartbeats >= config.maxMissedHeartbeats) {
+            addMessage(
+              "❌ Heartbeat timeout - connection unhealthy",
+              "warning"
+            );
+            connectionHealth = "warning";
+          }
+        }, config.heartbeatTimeout);
+      }
+    }, config.heartbeatInterval);
+  };
+
+  const handleIncomingMessage = (event: MessageEvent) => {
+    if (!isBrowser) return;
+
+    try {
+      const data = JSON.parse(event.data);
+
+      // Handle heartbeat response
+      if (data.type === "pong") {
+        missedHeartbeats = 0;
+        connectionHealth = "excellent";
+        const latency = Date.now() - lastHeartbeatTime;
+        connectionState.connectionLatency = latency;
+        return;
+      }
+
+      // Handle connection info
+      if (data.type === "connection_info") {
+        connectionState.clientId = data.clientId;
+        connectionState.staticId = data.staticId;
+        connectionState.currentRoom = data.room;
+        connectionState.userId = data.userId;
+        connectionState.ipAddress = data.ipAddress;
+        return;
+      }
+
+      // Handle welcome message (server sends connection info in welcome message)
+      if (data.type === "welcome") {
+        console.log("Received welcome message:", data);
+
+        // Map server snake_case fields to camelCase for Vue components
+        if (data.client_id) {
+          connectionState.clientId = data.client_id;
+          console.log("Set clientId:", data.client_id);
+        }
+        if (data.static_id) {
+          connectionState.staticId = data.static_id;
+          console.log("Set staticId:", data.static_id);
+        }
+        if (data.room) {
+          connectionState.currentRoom = data.room;
+          console.log("Set currentRoom:", data.room);
+        }
+        if (data.user_id) {
+          connectionState.userId = data.user_id;
+          console.log("Set userId:", data.user_id);
+        }
+        if (data.ip_address) {
+          connectionState.ipAddress = data.ip_address;
+          console.log("Set ipAddress:", data.ip_address);
+        }
+        if (data.connected_at) {
+          connectionState.connectionStartTime = data.connected_at * 1000;
+          console.log("Set connectionStartTime:", data.connected_at * 1000);
+        }
+
+        // Force reactive update by triggering a change
+        connectionState.connectionHealth =
+          connectionState.connectionHealth === "good" ? "excellent" : "good";
+
+        console.log("Updated connectionState:", connectionState);
+        addMessage(
+          "🟢 Connection established successfully",
+          "success",
+          "Welcome message processed"
+        );
+        return;
+      }
+
+      // Handle stats
+      if (data.type === "stats") {
+        stats.value = data;
+        return;
+      }
+
+      // Handle monitoring data
+      if (data.type === "monitoring") {
+        monitoringData.value = data;
+        return;
+      }
+
+      // Handle online users
+      if (data.type === "online_users") {
+        onlineUsers.value = data.users;
+        return;
+      }
+
+      // Handle activity log
+      if (data.type === "activity") {
+        activityLog.value.unshift(data);
+        if (activityLog.value.length > 100) {
+          activityLog.value = activityLog.value.slice(0, 100);
+        }
+        return;
+      }
+
+      // Handle server info
+      if (data.type === "server_info") {
+        serverInfo.value = data;
+        return;
+      }
+
+      // Handle system health
+      if (data.type === "system_health") {
+        systemHealth.value = data;
+        return;
+      }
+
+      // Handle regular messages
+      addMessage(data.type || "message", data, data.messageId);
+    } catch (error) {
+      addMessage(
+        "❌ Failed to parse message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const getCloseReason = (code: number): string => {
+    switch (code) {
+      case 1000:
+        return "Normal closure";
+      case 1001:
+        return "Going away";
+      case 1002:
+        return "Protocol error";
+      case 1003:
+        return "Unsupported data";
+      case 1004:
+        return "Reserved";
+      case 1005:
+        return "No status received";
+      case 1006:
+        return "Abnormal closure";
+      case 1007:
+        return "Invalid frame payload data";
+      case 1008:
+        return "Policy violation";
+      case 1009:
+        return "Message too big";
+      case 1010:
+        return "Mandatory extension";
+      case 1011:
+        return "Internal server error";
+      case 1012:
+        return "Service restart";
+      case 1013:
+        return "Try again later";
+      case 1014:
+        return "Bad gateway";
+      case 1015:
+        return "TLS handshake";
+      default:
+        return "Unknown reason";
+    }
+  };
+
+  const isMessageLimitReached = computed(() => {
+    return messages.value.length >= config.maxMessages;
+  });
+
+  const shouldShowMessageWarning = computed(() => {
+    return messages.value.length >= config.messageWarningThreshold;
+  });
+
+  return {
+    // State
+    ws,
+    isConnected,
+    isConnecting,
+    connectionStatus,
+    connectionState,
+    config,
+    messages,
+    stats,
+    monitoringData,
+    onlineUsers,
+    activityLog,
+
+    // Admin state
+    serverInfo,
+    systemHealth,
+
+    // Methods
+    connect,
+    disconnect,
+    sendMessage,
+    broadcastMessage,
+    sendDirectMessage,
+    sendRoomMessage,
+    getServerInfo,
+    getOnlineUsers,
+    testConnection,
+    sendHeartbeat,
+    executeDatabaseQuery,
+    triggerNotification,
+    getStats,
+    getMonitoringData,
+    executeAdminCommand,
+    getSystemHealth,
+    clearMessages,
+    clearActivityLog,
+    getMessagesByType,
+    getRecentMessages,
+    cleanup,
+
+    // Computed
+    isMessageLimitReached,
+    shouldShowMessageWarning,
+    connectionHealthColor,
+    connectionHealthText,
+  };
+};
diff --git a/examples/clientsocket/composables/useWebSocket.fixed b/examples/clientsocket/composables/useWebSocket.fixed
new file mode 100644
index 00000000..972b9d5b
--- /dev/null
+++ b/examples/clientsocket/composables/useWebSocket.fixed
@@ -0,0 +1,1073 @@
+import { ref, computed, reactive, type Ref } from "vue";
+import type {
+  WebSocketMessage,
+  ConnectionState,
+  WebSocketConfig,
+  MessageHistory,
+  ConnectionStats,
+  MonitoringData,
+  ClientInfo,
+  OnlineUser,
+  ActivityLog,
+} from "../types/websocket";
+
+export const useWebSocket = () => {
+  // Check if we're in browser environment
+  const isBrowser = process.client;
+
+  // WebSocket connection
+  const ws: Ref<WebSocket | null> = ref(null);
+
+  // Connection state - consolidated into single reactive object
+  const connectionState = reactive<ConnectionState>({
+    isConnected: false,
+    isConnecting: false,
+    connectionStatus: "disconnected",
+    clientId: null,
+    staticId: null,
+    currentRoom: null,
+    userId: "anonymous",
+    ipAddress: null,
+    connectionStartTime: null,
+    lastPingTime: null,
+    connectionLatency: 0,
+    connectionHealth: "poor",
+    reconnectAttempts: 0,
+    messagesReceived: 0,
+    messagesSent: 0,
+    uptime: "00:00:00",
+  });
+
+  // Configuration
+  const config = reactive<WebSocketConfig>({
+    wsUrl: "ws://localhost:8080/api/v1/ws",
+    userId: "anonymous",
+    room: "default",
+    staticId: "",
+    useIPBasedId: false,
+    autoReconnect: true,
+    heartbeatEnabled: true,
+    maxReconnectAttempts: 10,
+    reconnectDelay: 1000,
+    maxReconnectDelay: 30000,
+    heartbeatInterval: 30000,
+    heartbeatTimeout: 5000,
+    maxMissedHeartbeats: 3,
+    maxMessages: 1000,
+    messageWarningThreshold: 800,
+    actionThrottle: 100,
+  });
+
+  // Message history and data
+  const messages = ref<MessageHistory[]>([]);
+  const stats = ref<ConnectionStats | null>(null);
+  const monitoringData = ref<MonitoringData | null>(null);
+  const onlineUsers = ref<OnlineUser[]>([]);
+  const activityLog = ref<ActivityLog[]>([]);
+
+  // Admin functionality
+  const serverInfo = ref<any>(null);
+  const systemHealth = ref<any>(null);
+
+  // Timer references for proper cleanup
+  let reconnectTimeout: number | null = null;
+  let heartbeatInterval: number | null = null;
+  let heartbeatTimeout: number | null = null;
+  let uptimeInterval: number | null = null;
+  let connectionStartTime: number | null = null;
+
+  // Heartbeat tracking
+  let missedHeartbeats = 0;
+  let lastHeartbeatTime = 0;
+  let isManualDisconnect = false;
+
+  // Helper function to update connection status
+  const updateConnectionStatus = (
+    status: "disconnected" | "connecting" | "connected" | "error"
+  ) => {
+    connectionState.connectionStatus = status;
+
+    switch (status) {
+      case "connected":
+        connectionState.isConnected = true;
+        connectionState.isConnecting = false;
+        connectionState.connectionHealth = "good";
+        break;
+      case "connecting":
+        connectionState.isConnected = false;
+        connectionState.isConnecting = true;
+        connectionState.connectionHealth = "warning";
+        break;
+      case "disconnected":
+      case "error":
+        connectionState.isConnected = false;
+        connectionState.isConnecting = false;
+        connectionState.connectionHealth = "poor";
+        break;
+    }
+  };
+
+  // Helper function to update uptime
+  const updateUptime = () => {
+    if (connectionStartTime && connectionState.isConnected) {
+      const now = Date.now();
+      const uptime = now - connectionStartTime;
+      const seconds = Math.floor(uptime / 1000);
+      const minutes = Math.floor(seconds / 60);
+      const hours = Math.floor(minutes / 60);
+
+      connectionState.uptime = `${hours.toString().padStart(2, "0")}:${(
+        minutes % 60
+      )
+        .toString()
+        .padStart(2, "0")}:${(seconds % 60).toString().padStart(2, "0")}`;
+    } else {
+      connectionState.uptime = "00:00:00";
+    }
+  };
+
+  // Timer management
+  const startUptimeTimer = () => {
+    if (uptimeInterval) {
+      clearInterval(uptimeInterval);
+    }
+    uptimeInterval = window.setInterval(updateUptime, 1000);
+  };
+
+  const stopUptimeTimer = () => {
+    if (uptimeInterval) {
+      clearInterval(uptimeInterval);
+      uptimeInterval = null;
+    }
+  };
+
+  // Message handling
+  const getIconForMessageType = (type: string): string => {
+    switch (type) {
+      case "success":
+        return "🟢";
+      case "error":
+        return "❌";
+      case "warning":
+        return "⚠️";
+      case "info":
+        return "ℹ️";
+      default:
+        return "📝";
+    }
+  };
+
+  const addMessage = (
+    type: string,
+    data: any,
+    messageId?: string,
+    icon?: string
+  ) => {
+    if (!isBrowser) return;
+
+    const now = new Date();
+    const timeString = now.toLocaleTimeString("en-US", {
+      hour12: true,
+      hour: "numeric",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+
+    // Enhanced message formatting based on type
+    let formattedData = data;
+    let displayType = type;
+
+    switch (type) {
+      case "connection_info":
+        displayType = "info";
+        formattedData = {
+          client_id: data.clientId,
+          connected_at: data.connectedAt,
+          ip_address: data.ipAddress,
+          last_ping: data.lastPingTime || "N/A",
+          room: data.room || "default",
+          static_id: data.staticId || "none",
+          user_id: data.userId || "anonymous",
+        };
+        break;
+
+      case "heartbeat":
+        displayType = "info";
+        formattedData = `❤️ Heartbeat started\nInterval: ${
+          config.heartbeatInterval / 1000
+        }s`;
+        break;
+
+      case "pong":
+        displayType = "success";
+        formattedData = `🏓 Pong received\nLatency: ${connectionState.connectionLatency}ms`;
+        break;
+
+      case "message":
+        displayType = "info";
+        formattedData = `📨 Message received\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      case "broadcast":
+        displayType = "info";
+        formattedData = `📡 Broadcast received\n${data}`;
+        break;
+
+      case "direct_message":
+        displayType = "info";
+        formattedData = `📨 Direct message from ${data.from}\n${data.message}`;
+        break;
+
+      case "room_message":
+        displayType = "info";
+        formattedData = `📢 Room message from ${data.room}\n${data.message}`;
+        break;
+
+      case "stats":
+        displayType = "info";
+        formattedData = `📊 Stats updated\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      case "monitoring":
+        displayType = "info";
+        formattedData = `📈 Monitoring data\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      case "online_users":
+        displayType = "info";
+        formattedData = `👥 Online users updated\nCount: ${
+          data.users?.length || 0
+        }`;
+        break;
+
+      case "server_info":
+        displayType = "info";
+        formattedData = `🔧 Server info\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      case "system_health":
+        displayType = "info";
+        formattedData = `💚 System health\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      default:
+        if (typeof data === "string") {
+          formattedData = data;
+        } else {
+          formattedData = JSON.stringify(data, null, 2);
+        }
+    }
+
+    const message: MessageHistory = {
+      timestamp: now,
+      type: displayType,
+      data: formattedData,
+      messageId,
+      size: JSON.stringify(data).length,
+      icon: icon || getIconForMessageType(displayType),
+      timeString: timeString,
+    };
+
+    messages.value.unshift(message);
+
+    // Keep only the last maxMessages
+    if (messages.value.length > config.maxMessages) {
+      messages.value = messages.value.slice(0, config.maxMessages);
+    }
+
+    // Update connection state
+    connectionState.messagesReceived++;
+  };
+
+  // Computed properties
+  const connectionHealthColor = computed(() => {
+    switch (connectionState.connectionHealth) {
+      case "excellent":
+        return "#4CAF50";
+      case "good":
+        return "#2196F3";
+      case "warning":
+        return "#FFC107";
+      case "poor":
+        return "#F44336";
+      default:
+        return "#9E9E9E";
+    }
+  });
+
+  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 isMessageLimitReached = computed(() => {
+    return messages.value.length >= config.maxMessages;
+  });
+
+  const shouldShowMessageWarning = computed(() => {
+    return messages.value.length >= config.messageWarningThreshold;
+  });
+
+  // Timer cleanup
+  const cleanupTimers = () => {
+    if (!isBrowser) return;
+
+    if (reconnectTimeout) {
+      clearTimeout(reconnectTimeout);
+      reconnectTimeout = null;
+    }
+    if (heartbeatInterval) {
+      clearInterval(heartbeatInterval);
+      heartbeatInterval = null;
+    }
+    if (heartbeatTimeout) {
+      clearTimeout(heartbeatTimeout);
+      heartbeatTimeout = null;
+    }
+    stopUptimeTimer();
+  };
+
+  // Connection cleanup
+  const cleanupConnection = () => {
+    if (!isBrowser) return;
+
+    if (ws.value) {
+      ws.value.close();
+      ws.value = null;
+    }
+    cleanupTimers();
+  };
+
+  // Get close reason description
+  const getCloseReason = (code: number): string => {
+    switch (code) {
+      case 1000:
+        return "Normal closure";
+      case 1001:
+        return "Going away";
+      case 1002:
+        return "Protocol error";
+      case 1003:
+        return "Unsupported data";
+      case 1004:
+        return "Reserved";
+      case 1005:
+        return "No status received";
+      case 1006:
+        return "Abnormal closure";
+      case 1007:
+        return "Invalid frame payload data";
+      case 1008:
+        return "Policy violation";
+      case 1009:
+        return "Message too big";
+      case 1010:
+        return "Mandatory extension";
+      case 1011:
+        return "Internal server error";
+      case 1012:
+        return "Service restart";
+      case 1013:
+        return "Try again later";
+      case 1014:
+        return "Bad gateway";
+      case 1015:
+        return "TLS handshake";
+      default:
+        return "Unknown reason";
+    }
+  };
+
+  // Heartbeat management
+  const stopHeartbeat = () => {
+    if (!isBrowser) return;
+
+    if (heartbeatInterval) {
+      clearInterval(heartbeatInterval);
+      heartbeatInterval = null;
+    }
+    if (heartbeatTimeout) {
+      clearTimeout(heartbeatTimeout);
+      heartbeatTimeout = null;
+    }
+    missedHeartbeats = 0;
+  };
+
+  const startHeartbeat = () => {
+    if (!isBrowser || !config.heartbeatEnabled) return;
+
+    stopHeartbeat();
+
+    heartbeatInterval = window.setInterval(() => {
+      if (ws.value && ws.value.readyState === WebSocket.OPEN) {
+        const heartbeatMessage = {
+          type: "ping",
+          timestamp: Date.now(),
+        };
+        ws.value.send(JSON.stringify(heartbeatMessage));
+        lastHeartbeatTime = Date.now();
+
+        // Set timeout for heartbeat response
+        heartbeatTimeout = window.setTimeout(() => {
+          missedHeartbeats++;
+          if (missedHeartbeats >= config.maxMissedHeartbeats) {
+            addMessage(
+              "❌ Heartbeat timeout - connection unhealthy",
+              "warning"
+            );
+            connectionState.connectionHealth = "warning";
+          }
+        }, config.heartbeatTimeout);
+      }
+    }, config.heartbeatInterval);
+  };
+
+  // Reconnection logic
+  const scheduleReconnect = () => {
+    if (!isBrowser || !config.autoReconnect) return;
+
+    if (connectionState.reconnectAttempts >= config.maxReconnectAttempts) {
+      addMessage("❌ Max reconnection attempts reached", "error");
+      return;
+    }
+
+    connectionState.reconnectAttempts++;
+    const delay = Math.min(
+      config.reconnectDelay *
+        Math.pow(2, connectionState.reconnectAttempts - 1),
+      config.maxReconnectDelay
+    );
+
+    addMessage(
+      `🔄 Reconnecting in ${delay}ms (attempt ${connectionState.reconnectAttempts}/${config.maxReconnectAttempts})`,
+      "info"
+    );
+
+    reconnectTimeout = window.setTimeout(() => {
+      connect();
+    }, delay);
+  };
+
+  // Message handling
+  const handleIncomingMessage = (event: MessageEvent) => {
+    if (!isBrowser) return;
+
+    try {
+      const data = JSON.parse(event.data);
+
+      // Handle heartbeat response
+      if (data.type === "pong") {
+        missedHeartbeats = 0;
+        connectionState.connectionHealth = "excellent";
+        const latency = Date.now() - lastHeartbeatTime;
+        connectionState.connectionLatency = latency;
+        return;
+      }
+
+      // Handle connection info
+      if (data.type === "connection_info") {
+        connectionState.clientId = data.clientId;
+        connectionState.staticId = data.staticId;
+        connectionState.currentRoom = data.room;
+        connectionState.userId = data.userId;
+        connectionState.ipAddress = data.ipAddress;
+        return;
+      }
+
+      // Handle welcome message (server sends connection info in welcome message)
+      if (data.type === "welcome") {
+        console.log("Received welcome message:", data);
+
+        // Map server snake_case fields to camelCase for Vue components
+        if (data.client_id) {
+          connectionState.clientId = data.client_id;
+          console.log("Set clientId:", data.client_id);
+        }
+        if (data.static_id) {
+          connectionState.staticId = data.static_id;
+          console.log("Set staticId:", data.static_id);
+        }
+        if (data.room) {
+          connectionState.currentRoom = data.room;
+          console.log("Set currentRoom:", data.room);
+        }
+        if (data.user_id) {
+          connectionState.userId = data.user_id;
+          console.log("Set userId:", data.user_id);
+        }
+        if (data.ip_address) {
+          connectionState.ipAddress = data.ip_address;
+          console.log("Set ipAddress:", data.ip_address);
+        }
+        if (data.connected_at) {
+          connectionState.connectionStartTime = data.connected_at * 1000;
+          console.log("Set connectionStartTime:", data.connected_at * 1000);
+        }
+
+        // Force reactive update by triggering a change
+        connectionState.connectionHealth =
+          connectionState.connectionHealth === "good" ? "excellent" : "good";
+
+        console.log("Updated connectionState:", connectionState);
+        addMessage(
+          "🟢 Connection established successfully",
+          "success",
+          "Welcome message processed"
+        );
+        return;
+      }
+
+      // Handle stats
+      if (data.type === "stats") {
+        stats.value = data;
+        return;
+      }
+
+      // Handle monitoring data
+      if (data.type === "monitoring") {
+        monitoringData.value = data;
+        return;
+      }
+
+      // Handle online users
+      if (data.type === "online_users") {
+        onlineUsers.value = data.users;
+        return;
+      }
+
+      // Handle activity log
+      if (data.type === "activity") {
+        activityLog.value.unshift(data);
+        if (activityLog.value.length > 100) {
+          activityLog.value = activityLog.value.slice(0, 100);
+        }
+        return;
+      }
+
+      // Handle server info
+      if (data.type === "server_info") {
+        serverInfo.value = data;
+        return;
+      }
+
+      // Handle system health
+      if (data.type === "system_health") {
+        systemHealth.value = data;
+        return;
+      }
+
+      // Handle regular messages
+      addMessage(data.type || "message", data, data.messageId);
+    } catch (error) {
+      addMessage(
+        "❌ Failed to parse message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  // WebSocket connection methods
+  const connect = () => {
+    if (!isBrowser) return;
+
+    // Prevent multiple connection attempts
+    if (connectionState.isConnecting || connectionState.isConnected) {
+      return;
+    }
+
+    // Clean up existing connection
+    if (ws.value) {
+      cleanupConnection();
+    }
+
+    updateConnectionStatus("connecting");
+    isManualDisconnect = false;
+    connectionStartTime = Date.now();
+    startUptimeTimer();
+
+    try {
+      // Build WebSocket URL with parameters
+      let url = config.wsUrl;
+      const params = new URLSearchParams();
+
+      if (config.userId) {
+        params.append("user_id", config.userId);
+      }
+      if (config.room) {
+        params.append("room", config.room);
+      }
+      if (config.useIPBasedId) {
+        params.append("ip_based", "true");
+      } else if (config.staticId) {
+        params.append("static_id", config.staticId);
+      }
+
+      if (params.toString()) {
+        url += "?" + params.toString();
+      }
+
+      ws.value = new WebSocket(url);
+
+      // Connection timeout
+      const connectionTimeout = setTimeout(() => {
+        if (ws.value && ws.value.readyState === WebSocket.CONNECTING) {
+          ws.value.close();
+          updateConnectionStatus("error");
+          addMessage("❌ Connection timeout after 15 seconds", "error");
+          scheduleReconnect();
+        }
+      }, 15000);
+
+      ws.value.onopen = function (event) {
+        clearTimeout(connectionTimeout);
+        updateConnectionStatus("connected");
+        connectionState.reconnectAttempts = 0;
+        connectionState.connectionStartTime = connectionStartTime;
+
+        addMessage(
+          "🟢 Connected to WebSocket server",
+          "success",
+          "Connection established successfully"
+        );
+
+        // Start heartbeat if enabled
+        if (config.heartbeatEnabled) {
+          startHeartbeat();
+        }
+      };
+
+      ws.value.onmessage = function (event) {
+        handleIncomingMessage(event);
+      };
+
+      ws.value.onclose = function (event) {
+        clearTimeout(connectionTimeout);
+        cleanupTimers();
+        updateConnectionStatus("disconnected");
+
+        const reason = getCloseReason(event.code);
+        addMessage(
+          `🔴 Disconnected: ${reason}`,
+          "error",
+          `Code: ${event.code}, Reason: ${event.reason || "Unknown"}`
+        );
+
+        // Auto-reconnect logic
+        if (!isManualDisconnect && config.autoReconnect) {
+          scheduleReconnect();
+        }
+      };
+
+      ws.value.onerror = function (error) {
+        updateConnectionStatus("error");
+        addMessage("❌ WebSocket Error occurred", "error", error.toString());
+      };
+    } catch (error) {
+      updateConnectionStatus("error");
+      addMessage(
+        "❌ Failed to create WebSocket connection",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+      scheduleReconnect();
+    }
+  };
+
+  const disconnect = () => {
+    if (!isBrowser) return;
+
+    isManualDisconnect = true;
+    cleanupConnection();
+    updateConnectionStatus("disconnected");
+    addMessage("🔴 Manually disconnected from WebSocket", "info");
+  };
+
+  // Message sending methods
+  const sendMessage = (message: any) => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot send message: not connected", "error");
+      return false;
+    }
+
+    try {
+      const messageData = {
+        type: "message",
+        data: message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(messageData));
+      connectionState.messagesSent++;
+      addMessage("📤 Message sent", "info", message);
+      return true;
+    } catch (error) {
+      addMessage(
+        "❌ Failed to send message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+      return false;
+    }
+  };
+
+  const broadcastMessage = (message: string) => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot broadcast message: not connected", "error");
+      return false;
+    }
+
+    try {
+      const messageData = {
+        type: "broadcast",
+        message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(messageData));
+      connectionState.messagesSent++;
+      addMessage("📡 Message broadcasted", "info", message);
+      return true;
+    } catch (error) {
+      addMessage(
+        "❌ Failed to broadcast message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+      return false;
+    }
+  };
+
+  const sendDirectMessage = (clientId: string, message: string) => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot send direct message: not connected", "error");
+      return false;
+    }
+
+    try {
+      const messageData = {
+        type: "direct_message",
+        clientId,
+        message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(messageData));
+      connectionState.messagesSent++;
+      addMessage(`📨 Direct message sent to ${clientId}`, "info", message);
+      return true;
+    } catch (error) {
+      addMessage(
+        "❌ Failed to send direct message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+      return false;
+    }
+  };
+
+  const sendRoomMessage = (room: string, message: string) => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot send room message: not connected", "error");
+      return false;
+    }
+
+    try {
+      const messageData = {
+        type: "room_message",
+        room,
+        message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(messageData));
+      connectionState.messagesSent++;
+      addMessage(`📢 Room message sent to ${room}`, "info", message);
+      return true;
+    } catch (error) {
+      addMessage(
+        "❌ Failed to send room message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+      return false;
+    }
+  };
+
+  // Admin and utility methods
+  const executeAdminCommand = async (command: string, params: any) => {
+    if (!isBrowser || !ws.value) throw new Error("Not connected");
+
+    const message = {
+      type: "admin_command",
+      command,
+      params,
+      timestamp: Date.now(),
+    };
+
+    ws.value.send(JSON.stringify(message));
+    return { success: true, message: "Command sent successfully" };
+  };
+
+  const getServerInfo = async () => {
+    if (!isBrowser || !ws.value) throw new Error("Not connected");
+
+    const message = {
+      type: "get_server_info",
+      timestamp: Date.now(),
+    };
+
+    ws.value.send(JSON.stringify(message));
+  };
+
+  const getSystemHealth = async () => {
+    if (!isBrowser || !ws.value) throw new Error("Not connected");
+
+    const message = {
+      type: "get_system_health",
+      timestamp: Date.now(),
+    };
+
+    ws.value.send(JSON.stringify(message));
+  };
+
+  const getOnlineUsers = () => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot get online users: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "get_online_users",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+    } catch (error) {
+      addMessage(
+        "❌ Failed to request online users",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const testConnection = () => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot test connection: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "ping",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+      addMessage("🏓 Connection test sent", "info");
+    } catch (error) {
+      addMessage(
+        "❌ Failed to test connection",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const sendHeartbeat = () => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot send heartbeat: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "ping",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+      lastHeartbeatTime = Date.now();
+    } catch (error) {
+      addMessage(
+        "❌ Failed to send heartbeat",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const executeDatabaseQuery = async (query: string) => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      throw new Error("Not connected");
+    }
+
+    try {
+      const message = {
+        type: "database_query",
+        query,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+      return { success: true, message: "Database query sent successfully" };
+    } catch (error) {
+      throw new Error(
+        `Failed to execute database query: ${
+          error instanceof Error ? error.message : String(error)
+        }`
+      );
+    }
+  };
+
+  const triggerNotification = async (message: string) => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      throw new Error("Not connected");
+    }
+
+    try {
+      const notificationData = {
+        type: "notification",
+        message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(notificationData));
+      return { success: true, message: "Notification sent successfully" };
+    } catch (error) {
+      throw new Error(
+        `Failed to trigger notification: ${
+          error instanceof Error ? error.message : String(error)
+        }`
+      );
+    }
+  };
+
+  const getStats = () => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot get stats: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "get_stats",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+    } catch (error) {
+      addMessage(
+        "❌ Failed to request stats",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const getMonitoringData = () => {
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot get monitoring data: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "get_monitoring",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+    } catch (error) {
+      addMessage(
+        "❌ Failed to request monitoring data",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  // Utility methods
+  const clearMessages = () => {
+    if (!isBrowser) return;
+    messages.value = [];
+  };
+
+  const clearActivityLog = () => {
+    if (!isBrowser) return;
+    activityLog.value = [];
+  };
+
+  const getMessagesByType = (type: string) => {
+    return messages.value.filter((msg) => msg.type === type);
+  };
+
+  const getRecentMessages = (count: number = 10) => {
+    return messages.value.slice(0, count);
+  };
+
+  // Cleanup on unmount
+  const cleanup = () => {
+    if (!isBrowser) return;
+
+    disconnect();
+    cleanupTimers();
+  };
+
+  return {
+    // State
+    ws,
+    connectionState,
+    config,
+    messages,
+    stats,
+    monitoringData,
+    onlineUsers,
+    activityLog,
+
+    // Admin state
+    serverInfo,
+    systemHealth,
+
+    // Methods
+    connect,
+    disconnect,
+    sendMessage,
+    broadcastMessage,
+    sendDirectMessage,
+    sendRoomMessage,
+    getServerInfo,
+    getOnlineUsers,
+    testConnection,
+    sendHeartbeat,
+    executeDatabaseQuery,
+    triggerNotification,
+    getStats,
+    getMonitoringData,
+    executeAdminCommand,
+    getSystemHealth,
+    clearMessages,
+    clearActivityLog,
+    getMessagesByType,
+    getRecentMessages,
+    cleanup,
+
+    // Computed
+    isMessageLimitReached,
+    shouldShowMessageWarning,
+    connectionHealthColor,
+    connectionHealthText,
+  };
+};
diff --git a/examples/clientsocket/composables/useWebSocket.ts b/examples/clientsocket/composables/useWebSocket.ts
index e90e363e..7478c165 100644
--- a/examples/clientsocket/composables/useWebSocket.ts
+++ b/examples/clientsocket/composables/useWebSocket.ts
@@ -1,4 +1,4 @@
-import { ref, computed, reactive, nextTick } from 'vue'
+import { ref, computed, reactive, nextTick } from "vue";
 import type {
   WebSocketMessage,
   ConnectionState,
@@ -8,42 +8,44 @@ import type {
   MonitoringData,
   ClientInfo,
   OnlineUser,
-  ActivityLog
-} from '../types/websocket'
+  ActivityLog,
+} from "../types/websocket";
 
 export const useWebSocket = () => {
   // Check if we're in browser environment
-  const isBrowser = process.client
+  const isBrowser = process.client;
 
-  const ws = ref<WebSocket | null>(null)
-  const isConnected = ref(false)
-  const isConnecting = ref(false)
-  const connectionStatus = ref<'disconnected' | 'connecting' | 'connected' | 'error'>('disconnected')
+  const ws = ref<WebSocket | null>(null);
+  const isConnected = ref(false);
+  const isConnecting = ref(false);
+  const connectionStatus = ref<
+    "disconnected" | "connecting" | "connected" | "error"
+  >("disconnected");
 
   const connectionState = reactive<ConnectionState>({
     isConnected: false,
     isConnecting: false,
-    connectionStatus: 'disconnected',
+    connectionStatus: "disconnected",
     clientId: null,
     staticId: null,
     currentRoom: null,
-    userId: 'anonymous',
+    userId: "anonymous",
     ipAddress: null,
     connectionStartTime: null,
     lastPingTime: null,
     connectionLatency: 0,
-    connectionHealth: 'poor',
+    connectionHealth: "poor",
     reconnectAttempts: 0,
     messagesReceived: 0,
     messagesSent: 0,
-    uptime: '00:00:00'
-  })
+    uptime: "00:00:00",
+  });
 
   const config = reactive<WebSocketConfig>({
-    wsUrl: 'ws://localhost:8080/api/v1/ws',
-    userId: 'anonymous',
-    room: 'default',
-    staticId: '',
+    wsUrl: "ws://localhost:8080/api/v1/ws",
+    userId: "anonymous",
+    room: "default",
+    staticId: "",
     useIPBasedId: false,
     autoReconnect: true,
     heartbeatEnabled: true,
@@ -55,218 +57,971 @@ export const useWebSocket = () => {
     maxMissedHeartbeats: 3,
     maxMessages: 1000,
     messageWarningThreshold: 800,
-    actionThrottle: 100
-  })
+    actionThrottle: 100,
+  });
 
-  const messages = ref<MessageHistory[]>([])
-  const stats = ref<ConnectionStats | null>(null)
-  const monitoringData = ref<MonitoringData | null>(null)
-  const onlineUsers = ref<OnlineUser[]>([])
-  const activityLog = ref<ActivityLog[]>([])
+  const messages = ref<MessageHistory[]>([]);
+  const stats = ref<ConnectionStats | null>(null);
+  const monitoringData = ref<MonitoringData | null>(null);
+  const onlineUsers = ref<OnlineUser[]>([]);
+  const activityLog = ref<ActivityLog[]>([]);
 
-  let reconnectTimeout: number | null = null
-  let heartbeatInterval: number | null = null
-  let heartbeatTimeout: number | null = null
-  let missedHeartbeats = 0
-  let lastHeartbeatTime = 0
-  let messageCount = 0
+  let reconnectTimeout: number | null = null;
+  let heartbeatInterval: number | null = null;
+  let heartbeatTimeout: number | null = null;
+  let missedHeartbeats = 0;
+  let lastHeartbeatTime = 0;
+  let messageCount = 0;
+  let connectionStartTime: number | null = null;
+  let uptimeInterval: number | null = null;
+  let isManualDisconnect = false;
+  let reconnectAttempts = 0;
+  let connectionHealth: "excellent" | "good" | "warning" | "poor" = "poor";
+
+  const updateConnectionStatus = (
+    status: "disconnected" | "connecting" | "connected" | "error"
+  ) => {
+    connectionStatus.value = status;
+    connectionState.connectionStatus = status;
+
+    switch (status) {
+      case "connected":
+        isConnected.value = true;
+        isConnecting.value = false;
+        connectionState.isConnected = true;
+        connectionState.isConnecting = false;
+        connectionState.connectionHealth = "good";
+        break;
+      case "connecting":
+        isConnected.value = false;
+        isConnecting.value = true;
+        connectionState.isConnected = false;
+        connectionState.isConnecting = true;
+        connectionState.connectionHealth = "warning";
+        break;
+      case "disconnected":
+        isConnected.value = false;
+        isConnecting.value = false;
+        connectionState.isConnected = false;
+        connectionState.isConnecting = false;
+        connectionState.connectionHealth = "poor";
+        break;
+      case "error":
+        isConnected.value = false;
+        isConnecting.value = false;
+        connectionState.isConnected = false;
+        connectionState.isConnecting = false;
+        connectionState.connectionHealth = "poor";
+        break;
+    }
+  };
+
+  const updateUptime = () => {
+    if (connectionStartTime && isConnected.value) {
+      const now = Date.now();
+      const uptime = now - connectionStartTime;
+      const seconds = Math.floor(uptime / 1000);
+      const minutes = Math.floor(seconds / 60);
+      const hours = Math.floor(minutes / 60);
+
+      connectionState.uptime = `${hours.toString().padStart(2, "0")}:${(
+        minutes % 60
+      )
+        .toString()
+        .padStart(2, "0")}:${(seconds % 60).toString().padStart(2, "0")}`;
+    } else {
+      connectionState.uptime = "00:00:00";
+    }
+  };
+
+  const startUptimeTimer = () => {
+    if (uptimeInterval) {
+      clearInterval(uptimeInterval);
+    }
+    uptimeInterval = window.setInterval(updateUptime, 1000);
+  };
+
+  const stopUptimeTimer = () => {
+    if (uptimeInterval) {
+      clearInterval(uptimeInterval);
+      uptimeInterval = null;
+    }
+  };
 
   // Only run WebSocket logic in browser
   if (isBrowser) {
-    // WebSocket connection logic here
+    // Initialize connection state
+    updateConnectionStatus("disconnected");
   }
 
-  const addMessage = (type: string, data: any, messageId?: string) => {
-    if (!isBrowser) return
+  const addMessage = (
+    type: string,
+    data: any,
+    messageId?: string,
+    icon?: string
+  ) => {
+    if (!isBrowser) return;
 
-    const message: MessageHistory = {
-      timestamp: new Date(),
-      type,
-      data,
-      messageId,
-      size: JSON.stringify(data).length
+    const now = new Date();
+    const timeString = now.toLocaleTimeString("en-US", {
+      hour12: true,
+      hour: "numeric",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+
+    // Enhanced message formatting based on type
+    let formattedData = data;
+    let displayType = type;
+
+    switch (type) {
+      case "connection_info":
+        displayType = "info";
+        formattedData = {
+          client_id: data.clientId,
+          connected_at: data.connectedAt,
+          ip_address: data.ipAddress,
+          last_ping: data.lastPingTime || "N/A",
+          room: data.room || "default",
+          static_id: data.staticId || "none",
+          user_id: data.userId || "anonymous",
+        };
+        break;
+
+      case "heartbeat":
+        displayType = "info";
+        formattedData = `❤️ Heartbeat started\nInterval: ${
+          config.heartbeatInterval / 1000
+        }s`;
+        break;
+
+      case "pong":
+        displayType = "success";
+        formattedData = `🏓 Pong received\nLatency: ${connectionState.connectionLatency}ms`;
+        break;
+
+      case "message":
+        displayType = "info";
+        formattedData = `📨 Message received\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      case "broadcast":
+        displayType = "info";
+        formattedData = `📡 Broadcast received\n${data}`;
+        break;
+
+      case "direct_message":
+        displayType = "info";
+        formattedData = `📨 Direct message from ${data.from}\n${data.message}`;
+        break;
+
+      case "room_message":
+        displayType = "info";
+        formattedData = `📢 Room message from ${data.room}\n${data.message}`;
+        break;
+
+      case "stats":
+        displayType = "info";
+        formattedData = `📊 Stats updated\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      case "monitoring":
+        displayType = "info";
+        formattedData = `📈 Monitoring data\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      case "online_users":
+        displayType = "info";
+        formattedData = `👥 Online users updated\nCount: ${
+          data.users?.length || 0
+        }`;
+        break;
+
+      case "server_info":
+        displayType = "info";
+        formattedData = `🔧 Server info\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      case "system_health":
+        displayType = "info";
+        formattedData = `💚 System health\n${JSON.stringify(data, null, 2)}`;
+        break;
+
+      default:
+        if (typeof data === "string") {
+          formattedData = data;
+        } else {
+          formattedData = JSON.stringify(data, null, 2);
+        }
     }
 
-    messages.value.unshift(message)
-    messageCount++
+    const message: MessageHistory = {
+      timestamp: now,
+      type: displayType,
+      data: formattedData,
+      messageId,
+      size: JSON.stringify(data).length,
+      icon: icon || getIconForMessageType(displayType),
+      timeString: timeString,
+    };
+
+    messages.value.unshift(message);
+    messageCount++;
 
     // Keep only the last maxMessages
     if (messages.value.length > config.maxMessages) {
-      messages.value = messages.value.slice(0, config.maxMessages)
+      messages.value = messages.value.slice(0, config.maxMessages);
     }
 
     // Update connection state
-    connectionState.messagesReceived++
-  }
+    connectionState.messagesReceived++;
+  };
+
+  const getIconForMessageType = (type: string): string => {
+    switch (type) {
+      case "success":
+        return "🟢";
+      case "error":
+        return "❌";
+      case "warning":
+        return "⚠️";
+      case "info":
+        return "ℹ️";
+      default:
+        return "📝";
+    }
+  };
 
   const connectionHealthColor = computed(() => {
     switch (connectionState.connectionHealth) {
-      case 'excellent': return '#4CAF50'
-      case 'good': return '#2196F3'
-      case 'warning': return '#FFC107'
-      case 'poor': return '#F44336'
-      default: return '#9E9E9E'
+      case "excellent":
+        return "#4CAF50";
+      case "good":
+        return "#2196F3";
+      case "warning":
+        return "#FFC107";
+      case "poor":
+        return "#F44336";
+      default:
+        return "#9E9E9E";
     }
-  })
+  });
 
   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'
+      case "excellent":
+        return "Excellent";
+      case "good":
+        return "Good";
+      case "warning":
+        return "Warning";
+      case "poor":
+        return "Poor";
+      default:
+        return "Unknown";
     }
-  })
+  });
 
   // Admin functionality
-  const serverInfo = ref<any>(null)
-  const systemHealth = ref<any>(null)
+  const serverInfo = ref<any>(null);
+  const systemHealth = ref<any>(null);
 
   const executeAdminCommand = async (command: string, params: any) => {
-    if (!isBrowser || !ws.value) throw new Error('Not connected')
+    if (!isBrowser || !ws.value) throw new Error("Not connected");
 
     const message = {
-      type: 'admin_command',
+      type: "admin_command",
       command,
       params,
-      timestamp: Date.now()
-    }
+      timestamp: Date.now(),
+    };
 
-    ws.value.send(JSON.stringify(message))
-    return { success: true, message: 'Command sent successfully' }
-  }
+    ws.value.send(JSON.stringify(message));
+    return { success: true, message: "Command sent successfully" };
+  };
 
   const getServerInfo = async () => {
-    if (!isBrowser || !ws.value) throw new Error('Not connected')
+    if (!isBrowser || !ws.value) throw new Error("Not connected");
 
     const message = {
-      type: 'get_server_info',
-      timestamp: Date.now()
-    }
+      type: "get_server_info",
+      timestamp: Date.now(),
+    };
 
-    ws.value.send(JSON.stringify(message))
-  }
+    ws.value.send(JSON.stringify(message));
+  };
 
   const getSystemHealth = async () => {
-    if (!isBrowser || !ws.value) throw new Error('Not connected')
+    if (!isBrowser || !ws.value) throw new Error("Not connected");
 
     const message = {
-      type: 'get_system_health',
-      timestamp: Date.now()
-    }
+      type: "get_system_health",
+      timestamp: Date.now(),
+    };
 
-    ws.value.send(JSON.stringify(message))
-  }
+    ws.value.send(JSON.stringify(message));
+  };
 
   // Cleanup on unmount
   const cleanup = () => {
-    if (!isBrowser) return
+    if (!isBrowser) return;
 
-    disconnect()
+    disconnect();
     if (reconnectTimeout) {
-      clearTimeout(reconnectTimeout)
+      clearTimeout(reconnectTimeout);
     }
-    stopHeartbeat()
-  }
+    stopHeartbeat();
+  };
 
   // WebSocket connection methods (only available in browser)
   const connect = () => {
-    if (!isBrowser) return
-    // WebSocket connection logic
-  }
+    if (!isBrowser) return;
+
+    // Prevent multiple connection attempts
+    if (isConnecting.value || isConnected.value) {
+      return;
+    }
+
+    // Clean up existing connection
+    if (ws.value) {
+      cleanupConnection();
+    }
+
+    updateConnectionStatus("connecting");
+    isManualDisconnect = false;
+    connectionStartTime = Date.now();
+    startUptimeTimer();
+
+    try {
+      // Build WebSocket URL with parameters
+      let url = config.wsUrl;
+      const params = new URLSearchParams();
+
+      if (config.userId) {
+        params.append("user_id", config.userId);
+      }
+      if (config.room) {
+        params.append("room", config.room);
+      }
+      if (config.useIPBasedId) {
+        params.append("ip_based", "true");
+      } else if (config.staticId) {
+        params.append("static_id", config.staticId);
+      }
+
+      if (params.toString()) {
+        url += "?" + params.toString();
+      }
+
+      ws.value = new WebSocket(url);
+
+      // Connection timeout
+      const connectionTimeout = setTimeout(() => {
+        if (ws.value && ws.value.readyState === WebSocket.CONNECTING) {
+          ws.value.close();
+          updateConnectionStatus("error");
+          addMessage("❌ Connection timeout after 15 seconds", "error");
+          scheduleReconnect();
+        }
+      }, 15000);
+
+      ws.value.onopen = function (event) {
+        clearTimeout(connectionTimeout);
+        updateConnectionStatus("connected");
+        reconnectAttempts = 0;
+        connectionHealth = "good";
+        connectionState.connectionStartTime = connectionStartTime;
+
+        addMessage(
+          "🟢 Connected to WebSocket server",
+          "success",
+          "Connection established successfully"
+        );
+
+        // Start heartbeat if enabled
+        if (config.heartbeatEnabled) {
+          startHeartbeat();
+        }
+      };
+
+      ws.value.onmessage = function (event) {
+        handleIncomingMessage(event);
+      };
+
+      ws.value.onclose = function (event) {
+        clearTimeout(connectionTimeout);
+        cleanupTimers();
+        updateConnectionStatus("disconnected");
+
+        const reason = getCloseReason(event.code);
+        addMessage(
+          `🔴 Disconnected: ${reason}`,
+          "error",
+          `Code: ${event.code}, Reason: ${event.reason || "Unknown"}`
+        );
+
+        // Auto-reconnect logic
+        if (!isManualDisconnect && config.autoReconnect) {
+          scheduleReconnect();
+        }
+      };
+
+      ws.value.onerror = function (error) {
+        updateConnectionStatus("error");
+        connectionHealth = "poor";
+        addMessage("❌ WebSocket Error occurred", "error", error.toString());
+      };
+    } catch (error) {
+      updateConnectionStatus("error");
+      addMessage(
+        "❌ Failed to create WebSocket connection",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+      scheduleReconnect();
+    }
+  };
 
   const disconnect = () => {
-    if (!isBrowser) return
-    // WebSocket disconnection logic
-  }
+    if (!isBrowser) return;
+
+    isManualDisconnect = true;
+    cleanupConnection();
+    updateConnectionStatus("disconnected");
+    addMessage("🔴 Manually disconnected from WebSocket", "info");
+  };
 
   const sendMessage = (message: any) => {
-    if (!isBrowser || !ws.value) return
-    // Send message logic
-  }
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot send message: not connected", "error");
+      return;
+    }
+
+    try {
+      const messageData = {
+        type: "message",
+        data: message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(messageData));
+      connectionState.messagesSent++;
+      addMessage("📤 Message sent", "info", message);
+    } catch (error) {
+      addMessage(
+        "❌ Failed to send message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
 
   const broadcastMessage = (message: string) => {
-    if (!isBrowser || !ws.value) return
-    // Broadcast message logic
-  }
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot broadcast message: not connected", "error");
+      return;
+    }
+
+    try {
+      const messageData = {
+        type: "broadcast",
+        message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(messageData));
+      connectionState.messagesSent++;
+      addMessage("📡 Message broadcasted", "info", message);
+    } catch (error) {
+      addMessage(
+        "❌ Failed to broadcast message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
 
   const sendDirectMessage = (clientId: string, message: string) => {
-    if (!isBrowser || !ws.value) return
-    // Direct message logic
-  }
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot send direct message: not connected", "error");
+      return;
+    }
+
+    try {
+      const messageData = {
+        type: "direct_message",
+        clientId,
+        message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(messageData));
+      connectionState.messagesSent++;
+      addMessage(`📨 Direct message sent to ${clientId}`, "info", message);
+    } catch (error) {
+      addMessage(
+        "❌ Failed to send direct message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
 
   const sendRoomMessage = (room: string, message: string) => {
-    if (!isBrowser || !ws.value) return
-    // Room message logic
-  }
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot send room message: not connected", "error");
+      return;
+    }
+
+    try {
+      const messageData = {
+        type: "room_message",
+        room,
+        message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(messageData));
+      connectionState.messagesSent++;
+      addMessage(`📢 Room message sent to ${room}`, "info", message);
+    } catch (error) {
+      addMessage(
+        "❌ Failed to send room message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
 
   const getOnlineUsers = () => {
-    if (!isBrowser || !ws.value) return
-    // Get online users logic
-  }
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot get online users: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "get_online_users",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+    } catch (error) {
+      addMessage(
+        "❌ Failed to request online users",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
 
   const testConnection = () => {
-    if (!isBrowser || !ws.value) return
-    // Test connection logic
-  }
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot test connection: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "ping",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+      addMessage("🏓 Connection test sent", "info");
+    } catch (error) {
+      addMessage(
+        "❌ Failed to test connection",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
 
   const sendHeartbeat = () => {
-    if (!isBrowser || !ws.value) return
-    // Send heartbeat logic
-  }
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot send heartbeat: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "ping",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+      lastHeartbeatTime = Date.now();
+    } catch (error) {
+      addMessage(
+        "❌ Failed to send heartbeat",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
 
   const executeDatabaseQuery = async (query: string) => {
-    if (!isBrowser || !ws.value) return
-    // Database query logic
-  }
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      throw new Error("Not connected");
+    }
+
+    try {
+      const message = {
+        type: "database_query",
+        query,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+      return { success: true, message: "Database query sent successfully" };
+    } catch (error) {
+      throw new Error(
+        `Failed to execute database query: ${
+          error instanceof Error ? error.message : String(error)
+        }`
+      );
+    }
+  };
 
   const triggerNotification = async (message: string) => {
-    if (!isBrowser || !ws.value) return
-    // Notification logic
-  }
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      throw new Error("Not connected");
+    }
+
+    try {
+      const notificationData = {
+        type: "notification",
+        message,
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(notificationData));
+      return { success: true, message: "Notification sent successfully" };
+    } catch (error) {
+      throw new Error(
+        `Failed to trigger notification: ${
+          error instanceof Error ? error.message : String(error)
+        }`
+      );
+    }
+  };
 
   const getStats = () => {
-    if (!isBrowser || !ws.value) return
-    // Get stats logic
-  }
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot get stats: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "get_stats",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+    } catch (error) {
+      addMessage(
+        "❌ Failed to request stats",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
 
   const getMonitoringData = () => {
-    if (!isBrowser || !ws.value) return
-    // Get monitoring data logic
-  }
+    if (!isBrowser || !ws.value || ws.value.readyState !== WebSocket.OPEN) {
+      addMessage("❌ Cannot get monitoring data: not connected", "error");
+      return;
+    }
+
+    try {
+      const message = {
+        type: "get_monitoring",
+        timestamp: Date.now(),
+      };
+
+      ws.value.send(JSON.stringify(message));
+    } catch (error) {
+      addMessage(
+        "❌ Failed to request monitoring data",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
 
   const clearMessages = () => {
-    if (!isBrowser) return
-    messages.value = []
-    messageCount = 0
-  }
+    if (!isBrowser) return;
+    messages.value = [];
+    messageCount = 0;
+  };
 
   const clearActivityLog = () => {
-    if (!isBrowser) return
-    activityLog.value = []
-  }
+    if (!isBrowser) return;
+    activityLog.value = [];
+  };
 
   const getMessagesByType = (type: string) => {
-    return messages.value.filter(msg => msg.type === type)
-  }
+    return messages.value.filter((msg) => msg.type === type);
+  };
 
   const getRecentMessages = (count: number = 10) => {
-    return messages.value.slice(0, count)
-  }
+    return messages.value.slice(0, count);
+  };
 
   const stopHeartbeat = () => {
-    if (!isBrowser) return
-    // Stop heartbeat logic
-  }
+    if (!isBrowser) return;
+
+    if (heartbeatInterval) {
+      clearInterval(heartbeatInterval);
+      heartbeatInterval = null;
+    }
+    if (heartbeatTimeout) {
+      clearTimeout(heartbeatTimeout);
+      heartbeatTimeout = null;
+    }
+    missedHeartbeats = 0;
+  };
+
+  const cleanupConnection = () => {
+    if (!isBrowser) return;
+
+    if (ws.value) {
+      ws.value.close();
+      ws.value = null;
+    }
+    cleanupTimers();
+  };
+
+  const cleanupTimers = () => {
+    if (!isBrowser) return;
+
+    if (reconnectTimeout) {
+      clearTimeout(reconnectTimeout);
+      reconnectTimeout = null;
+    }
+    stopHeartbeat();
+    stopUptimeTimer();
+  };
+
+  const scheduleReconnect = () => {
+    if (!isBrowser || !config.autoReconnect) return;
+
+    if (reconnectAttempts >= config.maxReconnectAttempts) {
+      addMessage("❌ Max reconnection attempts reached", "error");
+      return;
+    }
+
+    reconnectAttempts++;
+    const delay = Math.min(
+      config.reconnectDelay * Math.pow(2, reconnectAttempts - 1),
+      config.maxReconnectDelay
+    );
+
+    addMessage(
+      `🔄 Reconnecting in ${delay}ms (attempt ${reconnectAttempts}/${config.maxReconnectAttempts})`,
+      "info"
+    );
+
+    reconnectTimeout = window.setTimeout(() => {
+      connect();
+    }, delay);
+  };
+
+  const startHeartbeat = () => {
+    if (!isBrowser || !config.heartbeatEnabled) return;
+
+    stopHeartbeat();
+
+    heartbeatInterval = window.setInterval(() => {
+      if (ws.value && ws.value.readyState === WebSocket.OPEN) {
+        const heartbeatMessage = {
+          type: "ping",
+          timestamp: Date.now(),
+        };
+        ws.value.send(JSON.stringify(heartbeatMessage));
+        lastHeartbeatTime = Date.now();
+
+        // Set timeout for heartbeat response
+        heartbeatTimeout = window.setTimeout(() => {
+          missedHeartbeats++;
+          if (missedHeartbeats >= config.maxMissedHeartbeats) {
+            addMessage(
+              "❌ Heartbeat timeout - connection unhealthy",
+              "warning"
+            );
+            connectionHealth = "warning";
+          }
+        }, config.heartbeatTimeout);
+      }
+    }, config.heartbeatInterval);
+  };
+
+  const handleIncomingMessage = (event: MessageEvent) => {
+    if (!isBrowser) return;
+
+    try {
+      const data = JSON.parse(event.data);
+
+      // Handle heartbeat response
+      if (data.type === "pong") {
+        missedHeartbeats = 0;
+        connectionHealth = "excellent";
+        const latency = Date.now() - lastHeartbeatTime;
+        connectionState.connectionLatency = latency;
+        return;
+      }
+
+      // Handle connection info
+      if (data.type === "connection_info") {
+        connectionState.clientId = data.clientId;
+        connectionState.staticId = data.staticId;
+        connectionState.currentRoom = data.room;
+        connectionState.userId = data.userId;
+        connectionState.ipAddress = data.ipAddress;
+        return;
+      }
+
+      // Handle welcome message (server sends connection info in welcome message)
+      if (data.type === "welcome") {
+        console.log("Received welcome message:", data);
+
+        // Map server snake_case fields to camelCase for Vue components
+        if (data.client_id) {
+          connectionState.clientId = data.client_id;
+          console.log("Set clientId:", data.client_id);
+        }
+        if (data.static_id) {
+          connectionState.staticId = data.static_id;
+          console.log("Set staticId:", data.static_id);
+        }
+        if (data.room) {
+          connectionState.currentRoom = data.room;
+          console.log("Set currentRoom:", data.room);
+        }
+        if (data.user_id) {
+          connectionState.userId = data.user_id;
+          console.log("Set userId:", data.user_id);
+        }
+        if (data.ip_address) {
+          connectionState.ipAddress = data.ip_address;
+          console.log("Set ipAddress:", data.ip_address);
+        }
+        if (data.connected_at) {
+          connectionState.connectionStartTime = data.connected_at * 1000;
+          console.log("Set connectionStartTime:", data.connected_at * 1000);
+        }
+
+        // Force reactive update by triggering a change
+        connectionState.connectionHealth =
+          connectionState.connectionHealth === "good" ? "excellent" : "good";
+
+        console.log("Updated connectionState:", connectionState);
+        addMessage(
+          "🟢 Connection established successfully",
+          "success",
+          "Welcome message processed"
+        );
+        return;
+      }
+
+      // Handle stats
+      if (data.type === "stats") {
+        stats.value = data;
+        return;
+      }
+
+      // Handle monitoring data
+      if (data.type === "monitoring") {
+        monitoringData.value = data;
+        return;
+      }
+
+      // Handle online users
+      if (data.type === "online_users") {
+        onlineUsers.value = data.users;
+        return;
+      }
+
+      // Handle activity log
+      if (data.type === "activity") {
+        activityLog.value.unshift(data);
+        if (activityLog.value.length > 100) {
+          activityLog.value = activityLog.value.slice(0, 100);
+        }
+        return;
+      }
+
+      // Handle server info
+      if (data.type === "server_info") {
+        serverInfo.value = data;
+        return;
+      }
+
+      // Handle system health
+      if (data.type === "system_health") {
+        systemHealth.value = data;
+        return;
+      }
+
+      // Handle regular messages
+      addMessage(data.type || "message", data, data.messageId);
+    } catch (error) {
+      addMessage(
+        "❌ Failed to parse message",
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const getCloseReason = (code: number): string => {
+    switch (code) {
+      case 1000:
+        return "Normal closure";
+      case 1001:
+        return "Going away";
+      case 1002:
+        return "Protocol error";
+      case 1003:
+        return "Unsupported data";
+      case 1004:
+        return "Reserved";
+      case 1005:
+        return "No status received";
+      case 1006:
+        return "Abnormal closure";
+      case 1007:
+        return "Invalid frame payload data";
+      case 1008:
+        return "Policy violation";
+      case 1009:
+        return "Message too big";
+      case 1010:
+        return "Mandatory extension";
+      case 1011:
+        return "Internal server error";
+      case 1012:
+        return "Service restart";
+      case 1013:
+        return "Try again later";
+      case 1014:
+        return "Bad gateway";
+      case 1015:
+        return "TLS handshake";
+      default:
+        return "Unknown reason";
+    }
+  };
 
   const isMessageLimitReached = computed(() => {
-    return messages.value.length >= config.maxMessages
-  })
+    return messages.value.length >= config.maxMessages;
+  });
 
   const shouldShowMessageWarning = computed(() => {
-    return messages.value.length >= config.messageWarningThreshold
-  })
+    return messages.value.length >= config.messageWarningThreshold;
+  });
 
   return {
     // State
@@ -313,6 +1068,6 @@ export const useWebSocket = () => {
     isMessageLimitReached,
     shouldShowMessageWarning,
     connectionHealthColor,
-    connectionHealthText
-  }
-}
+    connectionHealthText,
+  };
+};
diff --git a/examples/clientsocket/types/websocket.ts b/examples/clientsocket/types/websocket.ts
index d42eafb4..98720dbd 100644
--- a/examples/clientsocket/types/websocket.ts
+++ b/examples/clientsocket/types/websocket.ts
@@ -1,180 +1,182 @@
 export interface WebSocketMessage {
-  type: string
-  data: any
-  timestamp?: number
-  client_id?: string
-  message_id?: string
+  type: string;
+  data: any;
+  timestamp?: number;
+  client_id?: string;
+  message_id?: string;
 }
 
 export interface ConnectionInfo {
-  client_id: string
-  static_id: string
-  ip_address: string
-  room: string
-  user_id: string
-  connected_at: number
-  id_type: string
+  client_id: string;
+  static_id: string;
+  ip_address: string;
+  room: string;
+  user_id: string;
+  connected_at: number;
+  id_type: string;
 }
 
 export interface ClientInfo {
-  id: string
-  static_id: string
-  ip_address: string
-  user_id: string
-  room: string
-  connected_at: number
-  last_ping: number
-  is_active?: boolean
+  id: string;
+  static_id: string;
+  ip_address: string;
+  user_id: string;
+  room: string;
+  connected_at: number;
+  last_ping: number;
+  is_active?: boolean;
 }
 
 export interface OnlineUser {
-  client_id: string
-  static_id: string
-  user_id: string
-  room: string
-  ip_address: string
-  connected_at: number
-  last_ping: number
+  client_id: string;
+  static_id: string;
+  user_id: string;
+  room: string;
+  ip_address: string;
+  connected_at: number;
+  last_ping: number;
 }
 
 export interface ConnectionStats {
-  connected_clients: number
-  unique_ips: number
-  static_clients: number
-  active_rooms: number
-  ip_distribution: Record<string, number>
-  room_distribution: Record<string, number>
-  message_queue_size: number
-  queue_workers: number
-  uptime: number
-  timestamp: number
+  connected_clients: number;
+  unique_ips: number;
+  static_clients: number;
+  active_rooms: number;
+  ip_distribution: Record<string, number>;
+  room_distribution: Record<string, number>;
+  message_queue_size: number;
+  queue_workers: number;
+  uptime: number;
+  timestamp: number;
 }
 
 export interface SystemHealth {
-  databases: any
-  available_dbs: string[]
-  websocket_status: string
-  uptime_seconds: number
+  databases: any;
+  available_dbs: string[];
+  websocket_status: string;
+  uptime_seconds: number;
 }
 
 export interface PerformanceMetrics {
-  messages_per_second: number
-  average_latency_ms: number
-  error_rate_percent: number
-  memory_usage_bytes: number
+  messages_per_second: number;
+  average_latency_ms: number;
+  error_rate_percent: number;
+  memory_usage_bytes: number;
 }
 
 export interface MonitoringData {
-  stats: ConnectionStats
-  recent_activity: ActivityLog[]
-  system_health: SystemHealth
-  performance: PerformanceMetrics
+  stats: ConnectionStats;
+  recent_activity: ActivityLog[];
+  system_health: SystemHealth;
+  performance: PerformanceMetrics;
 }
 
 export interface ActivityLog {
-  timestamp: number
-  event: string
-  client_id: string
-  details: string
+  timestamp: number;
+  event: string;
+  client_id: string;
+  details: string;
 }
 
 export interface MessageHistory {
-  timestamp: Date
-  type: string
-  data: any
-  messageId?: string
-  size: number
+  timestamp: Date;
+  type: string;
+  data: any;
+  messageId?: string;
+  size: number;
+  icon?: string;
+  timeString?: string;
 }
 
 export interface ConnectionState {
-  isConnected: boolean
-  isConnecting: boolean
-  connectionStatus: 'disconnected' | 'connecting' | 'connected' | 'error'
-  clientId: string | null
-  staticId: string | null
-  currentRoom: string | null
-  userId: string
-  ipAddress: string | null
-  connectionStartTime: number | null
-  lastPingTime: number | null
-  connectionLatency: number
-  connectionHealth: 'poor' | 'warning' | 'good' | 'excellent'
-  reconnectAttempts: number
-  messagesReceived: number
-  messagesSent: number
-  uptime: string
+  isConnected: boolean;
+  isConnecting: boolean;
+  connectionStatus: "disconnected" | "connecting" | "connected" | "error";
+  clientId: string | null;
+  staticId: string | null;
+  currentRoom: string | null;
+  userId: string;
+  ipAddress: string | null;
+  connectionStartTime: number | null;
+  lastPingTime: number | null;
+  connectionLatency: number;
+  connectionHealth: "poor" | "warning" | "good" | "excellent";
+  reconnectAttempts: number;
+  messagesReceived: number;
+  messagesSent: number;
+  uptime: string;
 }
 
 export interface WebSocketConfig {
-  wsUrl: string
-  userId: string
-  room: string
-  staticId?: string
-  useIPBasedId?: boolean
-  autoReconnect: boolean
-  heartbeatEnabled: boolean
-  maxReconnectAttempts: number
-  reconnectDelay: number
-  maxReconnectDelay: number
-  heartbeatInterval: number
-  heartbeatTimeout: number
-  maxMissedHeartbeats: number
-  maxMessages: number
-  messageWarningThreshold: number
-  actionThrottle: number
+  wsUrl: string;
+  userId: string;
+  room: string;
+  staticId?: string;
+  useIPBasedId?: boolean;
+  autoReconnect: boolean;
+  heartbeatEnabled: boolean;
+  maxReconnectAttempts: number;
+  reconnectDelay: number;
+  maxReconnectDelay: number;
+  heartbeatInterval: number;
+  heartbeatTimeout: number;
+  maxMissedHeartbeats: number;
+  maxMessages: number;
+  messageWarningThreshold: number;
+  actionThrottle: number;
 }
 
 export type MessageType =
-  | 'welcome'
-  | 'broadcast'
-  | 'direct_message'
-  | 'room_message'
-  | 'ping'
-  | 'pong'
-  | 'heartbeat'
-  | 'heartbeat_ack'
-  | 'connection_test'
-  | 'connection_test_result'
-  | 'get_online_users'
-  | 'online_users'
-  | 'get_server_info'
-  | 'server_info'
-  | 'error'
-  | 'message_received'
-  | 'broadcast_sent'
-  | 'direct_message_sent'
-  | 'room_message_sent'
-  | 'db_insert'
-  | 'db_query'
-  | 'db_custom_query'
-  | 'query_result'
-  | 'admin_kick_client'
-  | 'admin_kill_server'
-  | 'get_server_stats'
-  | 'get_system_health'
-  | 'admin_clear_logs'
-  | 'get_stats'
-  | 'get_room_info'
-  | 'join_room'
-  | 'leave_room'
-  | 'database_change'
-  | 'data_stream'
-  | 'server_heartbeat'
-  | 'system_status'
-  | 'clients_by_ip'
-  | 'client_info'
-  | 'get_clients_by_ip'
-  | 'get_client_info'
-  | 'health_check'
-  | 'database_list'
-  | 'connection_stats'
-  | 'trigger_notification'
-  | 'notification_sent'
-  | 'API_TEST'
-  | 'manual_test'
-  | 'retribusi_created'
-  | 'retribusi_updated'
-  | 'retribusi_deleted'
-  | 'peserta_changes'
-  | 'retribusi_changes'
-  | 'system_changes'
+  | "welcome"
+  | "broadcast"
+  | "direct_message"
+  | "room_message"
+  | "ping"
+  | "pong"
+  | "heartbeat"
+  | "heartbeat_ack"
+  | "connection_test"
+  | "connection_test_result"
+  | "get_online_users"
+  | "online_users"
+  | "get_server_info"
+  | "server_info"
+  | "error"
+  | "message_received"
+  | "broadcast_sent"
+  | "direct_message_sent"
+  | "room_message_sent"
+  | "db_insert"
+  | "db_query"
+  | "db_custom_query"
+  | "query_result"
+  | "admin_kick_client"
+  | "admin_kill_server"
+  | "get_server_stats"
+  | "get_system_health"
+  | "admin_clear_logs"
+  | "get_stats"
+  | "get_room_info"
+  | "join_room"
+  | "leave_room"
+  | "database_change"
+  | "data_stream"
+  | "server_heartbeat"
+  | "system_status"
+  | "clients_by_ip"
+  | "client_info"
+  | "get_clients_by_ip"
+  | "get_client_info"
+  | "health_check"
+  | "database_list"
+  | "connection_stats"
+  | "trigger_notification"
+  | "notification_sent"
+  | "API_TEST"
+  | "manual_test"
+  | "retribusi_created"
+  | "retribusi_updated"
+  | "retribusi_deleted"
+  | "peserta_changes"
+  | "retribusi_changes"
+  | "system_changes";