vue-wiguet-chatweb 0.0.34 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiguet-chatweb",
-  "version": "0.0.34",
+  "version": "0.1.0",
   "type": "module",
   "files": [
     "dist",
@@ -35,6 +35,7 @@
     "@vueuse/core": "^10.0.0",
     "axios": "^1.4.0",
     "luxon": "^3.0.0",
+    "socket.io-client": "^4.7.2",
     "uuid": "^9.0.1",
     "vue": "^3.2.0"
   },

package/src/components/Chat.vue

@@ -45,12 +45,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick, PropType, watch } from "vue";
+import { ref, onMounted, nextTick, PropType, watch, onUnmounted } from "vue";
 import { v4 as uuidv4 } from "uuid";
 
-import { RabbitMQService } from "vue-rabbit-frontend";
 import {
   type SendMessageBody,
+  ChatInformation,
   ListMessageBody,
   Message,
 } from "../dto/app.dto";
@@ -66,10 +66,10 @@ import { getInformationApi } from "../store";
 import MessageList from "./MessageList.vue";
 import Loader from "./Loader.vue";
 import { searchFromLast } from "../resources/functions.helpers";
-import { RABBIT_EVENTS } from "../dto/app.dto";
+import { io } from "socket.io-client";
+import { APP_TYPE } from "../dto/chat.dto";
 
 //DATA
-const rabbitMQServiceListen: any = ref(null);
 const message = ref("");
 const notViewed = ref(0);
 
@@ -77,7 +77,7 @@ const messagesData = ref<{ data: Message[]; canLoadMoreMessages: boolean }>({
   data: [],
   canLoadMoreMessages: false,
 });
-const virtualHost: any = ref({ virtualhost: "" });
+
 const appChatId = ref("");
 const isLoading = ref(false);
 
@@ -121,31 +121,15 @@ watch(
       setVistoToTrueApi(appChatId.value, props.tokenAuth);
     }
 
-    if (virtualHost.value && appChatId.value) return;
+    if (appChatId.value) return;
 
     const resp = await getInformationApi(props.tokenAuth);
 
     if(resp) {
-      virtualHost.value = resp.virtualHost;
       appChatId.value = resp.appChat.id;
-      connectMsRabbit();
     }
   }
 );
-onMounted(async () => {
-  if (virtualHost.value && appChatId.value) return;
-    
-  const resp = await getInformationApi(props.tokenAuth);
-  
-  if(!resp) return;
-
-  virtualHost.value = resp.virtualHost;
-  appChatId.value = resp.appChat.id;
-  emit("not-viewed-total", resp.appChat.totalNoVistosCliente);
-  notViewed.value = resp.appChat.totalNoVistosCliente;
-  getMessages();
-  connectMsRabbit();
-});
 
 const submitMessage = async (event: Event) => {
   if (message.value?.length > 300) {
@@ -183,7 +167,6 @@ const submitMessage = async (event: Event) => {
       msPersonaId: props.user.msPersonaId,
     },
   };
-
   
   const idx = messagesData.value.data.push(newMessage) - 1;
   
@@ -202,6 +185,14 @@ const submitMessage = async (event: Event) => {
       });
     } else {
       messagesData.value.data[idx] = newMsg;
+      
+      socketService.value.emit(
+        'sendMessage',
+        { roomId: information?.value?.appChat.id, message: newMsg },
+        (response: any) => {
+          console.log('🚀 ~ socketService.value.emit ~ response:', response);
+        }
+      );
     }
   });
 
@@ -268,48 +259,17 @@ const retryMessage = async (message: Message) => {
       );
       
       messagesData.value.data[idx] = { ...msg, error: undefined };
+
+      socketService.value.emit(
+        'sendMessage',
+        { roomId: information?.value?.appChat.id, message },
+      );
     }
 
     scrollToBottom();
   });
 };
 
-const connectMsRabbit = (app: any = "webchat") => {
-  const { virtualhost } = virtualHost.value;
-  let data = sessionStorage.getItem("tabBrowser");
-  if (!data) {
-    let tab = Date.now();
-    sessionStorage.setItem("tabBrowser", `${tab}`);
-  }
-  rabbitMQServiceListen.value = new RabbitMQService(
-    `${virtualhost}`,
-    `widget_chat_${sessionStorage.getItem("tabBrowser")}`
-  );
-  rabbitMQServiceListen.value.connect();
-
-  rabbitMQServiceListen.value.subscribe(async (val: any) => {
-    if (
-      val.event &&
-      val.event === RABBIT_EVENTS.NEW_MESSAGE &&
-      !val.message.esCliente
-    ) {
-      messagesData.value.data.push(val.message);
-      if (props.visible === true) {
-        setVistoToTrueApi(appChatId.value, props.tokenAuth);
-      }
-      if (props.visible === false) {
-        notViewed.value = notViewed.value + 1;
-        emit("new-message");
-      }
-      scrollToBottom();
-    }
-  });
-};
-
-const disconnectMsRabbit = () => {
-  rabbitMQServiceListen.value?.disconnectClient();
-};
-
 const scrollToBottom = () => {
   nextTick(() => {
     if (messageContainerRef.value) {
@@ -342,6 +302,63 @@ function autoAdjustHeight() {
   textAreaRef.value.style.height = textAreaRef.value.scrollHeight + "px"
 }
 
+const socketService = ref();
+const information = ref<ChatInformation>();
+
+function connectMsWebSocket (userChat: ChatInformation ,app: APP_TYPE = APP_TYPE.WEBCHAT) {
+  if (!userChat) throw new Error('user chat is required')
+
+  socketService.value = io(window.VITE_SOCKET_URI, {
+    query: {
+      // TODO: confirmar si se quita o no
+      usuarioId: `${userChat?.chat?.persona?.funcionarioId}`, 
+      aplicacion: app,
+    },
+    extraHeaders: { Authorization: props.tokenAuth },
+  });
+
+  socketService.value.on('connect', () => {
+    console.log('Conectado al servidor de sockets');
+
+    socketService.value.emit(
+      'joinRoom',
+      `${userChat?.appChat?.id}`
+    );
+  })
+
+  socketService.value.on('disconnect', () => {
+    console.log('Desconectado del servidor de sockets');
+  });
+
+  socketService.value.on('receiveMessage', (data: any) => {
+    console.log('Mensaje recibido:', data.message, userChat);
+    
+    if (data.message.sender.msPersonaId === userChat?.chat?.persona?.msPersonaId) return
+
+    messagesData.value.data.push(data.message);
+    setVistoToTrueApi(data.message.appChatId, props.tokenAuth);
+    scrollToBottom();
+  });
+}
+
+onMounted(async () => {
+  if (appChatId.value) return;
+    
+  const resp = await getInformationApi(props.tokenAuth);
+  
+  if(!resp) return;
+  
+  information.value = resp;
+  appChatId.value = resp.appChat.id;
+  notViewed.value = resp.appChat.totalNoVistosCliente;
+  connectMsWebSocket(resp)
+  getMessages();
+  emit("not-viewed-total", resp.appChat.totalNoVistosCliente);
+});
+
+onUnmounted(() => {
+  socketService.value.off();
+});
 </script>
 
 <style scoped>

package/src/components/Widget.vue

@@ -57,7 +57,6 @@
 import { PropType, ref } from "vue";
 import Chat from "./Chat.vue";
 import IconWidget from "./IconWidget.vue";
-import { VirtualHost } from '../dto/app.dto';
 import IconTelegram from "./IconTelegram.vue";
 import IconWhatsApp from "./IconWhatsApp.vue";
 import IconChat from "./IconChat.vue";