vip

src/components/WebSocketComponent.vue

@@ -5,29 +5,29 @@ import { useSharedWebSocket, WsDataType } from '../composables/useSharedWebSocke
 const message = ref('')
 const selectedChat = ref('')
 
-const { messages, chats, isConnected, error, send } = useSharedWebSocket({
+// const { messages, chats, isConnected, error, send } = useSharedWebSocket({
   // onMessage: (data) => {
   //   console.log('Received message:', data)
   // },
-})
+// })
 
 const onChatClick = (id: string) => {
   console.log(id)
   selectedChat.value = id
-  send({
-    type: WsDataType.GET_MESSAGES,
-    data: { chat_id: id },
-  })
+  // send({
+  //   type: WsDataType.GET_MESSAGES,
+  //   data: { chat_id: id },
+  // })
 }
 
 const sendMessage = () => {
   if (message.value.trim()) {
-    send({
-      type: WsDataType.CREATE_MESSAGE,
-      data: {
-        chat_id: selectedChat.value,
-        text: message.value,
-      },
+    // send({
+    //   type: WsDataType.CREATE_MESSAGE,
+    //   data: {
+    //     chat_id: selectedChat.value,
+    //     text: message.value,
+    //   },
     })
     message.value = ''
   }
@@ -37,29 +37,29 @@ const sendMessage = () => {
 <template>
   <v-row>
     <v-col>
-      <div class="status" :class="{ isConnected, disconnected: !isConnected }">
-        status: {{ isConnected ? 'connected' : 'disconnected' }}
-      </div>
+      <!--      <div class="status" :class="{ isConnected, disconnected: !isConnected }">-->
+      <!--        status: {{ isConnected ? 'connected' : 'disconnected' }}-->
+      <!--      </div>-->
       <div>selected chat {{ selectedChat }}</div>
-      <div class="error">Error: {{ error }}</div>
+      <!--      <div class="error">Error: {{ error }}</div>-->
     </v-col>
   </v-row>
   <v-row>
     <v-col>
       <div>
-        <div v-for="chat in chats" :key="chat.id" @click="onChatClick(chat.id)">
-          <div>{{ chat.id }}</div>
-          <div>{{ chat.users }}</div>
-        </div>
+        <!--        <div v-for="chat in chats" :key="chat.id" @click="onChatClick(chat.id)">-->
+        <!--          <div>{{ chat.id }}</div>-->
+        <!--          <div>{{ chat.users }}</div>-->
+        <!--        </div>-->
       </div>
     </v-col>
     <v-col>
       <v-sheet border class="pa-4 border-opacity-50">
         <div v-if="selectedChat">
           <v-sheet height="400px" class="overflow-y-auto">
-            <div v-for="message in messages" :key="message.id">
-              <div>{{ message }}</div>
-            </div>
+            <!--            <div v-for="message in messages" :key="message.id">-->
+            <!--              <div>{{ message }}</div>-->
+            <!--            </div>-->
           </v-sheet>
 
           <div class="d-flex align-center ga-1">
@@ -72,13 +72,13 @@ const sendMessage = () => {
               placeholder="Type message..."
             >
             </v-text-field>
-            <v-btn
-              :disabled="!isConnected"
-              variant="elevated"
-              color="primary"
-              icon="mdi-send"
-              @click="sendMessage"
-            />
+            <!--            <v-btn-->
+            <!--              :disabled="!isConnected"-->
+            <!--              variant="elevated"-->
+            <!--              color="primary"-->
+            <!--              icon="mdi-send"-->
+            <!--              @click="sendMessage"-->
+            <!--            />-->
           </div>
         </div>
       </v-sheet>