init

src/components/WebSocketComponent.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useSharedWebSocket, WsDataType } from '../composables/useSharedWebSocket'
+
+const message = ref('')
+
+const { messages, chats, isConnected, error, send } = useSharedWebSocket({
+  // onMessage: (data) => {
+  //   console.log('Received message:', data)
+  // },
+})
+
+const sendMessage = () => {
+  if (message.value.trim()) {
+    send({
+      type: WsDataType.MESSAGE,
+      data: {
+        text: message.value,
+      },
+    })
+    message.value = ''
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div class="status" :class="{ isConnected, disconnected: !isConnected }">
+      status: {{ isConnected ? 'connected' : 'disconnected' }}
+    </div>
+
+    <div v-if="error" class="error">Error: {{ error }}</div>
+
+    <hr />
+
+    <div>
+      <div>chats</div>
+      <div v-for="chat in chats" :key="chat.id">
+        <div>{{ chat.id }}</div>
+        <div>{{ chat.users }}</div>
+      </div>
+    </div>
+
+    <hr />
+
+    <div>
+      <div>messages:</div>
+      <div v-for="message in messages" :key="message.id">
+        {{ message }}
+      </div>
+    </div>
+
+    <div class="controls">
+      <input v-model="message" @keyup.enter="sendMessage" placeholder="Type message..." />
+      <button @click="sendMessage" :disabled="!isConnected">Send</button>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>