เพิ่ม Socket เข้าสู่หน้าหลัก , เปิดห้องแซท , รับ-ส่ง ข้อความ

src/modules/00_support/store/Main.ts

@@ -3,14 +3,30 @@ import { ref } from "vue";
 import { io } from "socket.io-client";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
 import { useCounterMixin } from "@/stores/mixin";
 import type {
   SupportMessageResponse,
   SupportIssueResponse,
+  SupportStatusUser,
 } from "@/modules/00_support/interface/index/Main";
 import keycloak from "@/plugins/keycloak";
 
 export const useSupportStore = defineStore("supportServiceStore", () => {
+  const { showLoader, hideLoader } = useCounterMixin();
+  const userId = ref<string>(keycloak.subject);
+  const issue = ref<SupportIssueResponse>();
+  const message = ref<SupportMessageResponse>();
+  const statusUser = ref<SupportStatusUser>([]);
+  const currentIssue = ref<string>("");
+  const currentTitle = ref<string>("");
+  const items = ref<string>([{}, {}, {}, {}, {}, {}, {}]);
+  const scrollContainer = ref();
+
+  function scrollToEnd() {
+    scrollContainer.value.setScrollPosition("vertical", 10000);
+  }
+
   const socket = io("http://192.168.1.10:3000/", {
     auth: { token: keycloak.token },
   });
@@ -19,21 +35,40 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     // console.log(users);
   });
 
-  socket.on("message", (r) => {
+  socket.on("online", (r) => {
     console.log(r);
-  });
-  const { showLoader, hideLoader } = useCounterMixin();
+    statusUser.value.push({
+      socketId: r.socketId,
+      userId: r.userId,
+      name: r.name,
+      role: r.role,
+    });
 
-  const userId = ref<string>(keycloak.subject);
-  const issue = ref<SupportIssueResponse>();
-  const message = ref<SupportMessageResponse>();
-  const items = ref<string>([{}, {}, {}, {}, {}, {}, {}]);
-  const scrollTargetRef = ref();
+    console.log(statusUser.value);
+
+    // console.log(JSON.stringify(r, null, -2));
+  });
+
+  socket.on("message", (r) => {
+    message.value.result.message.push({
+      id: r.id,
+      fromUserId: r.fromUserId,
+      fromUserName: r.fromUserName,
+      createdAt: r.createdAt,
+      updatedAt: r.updatedAt,
+      content: r.content,
+      read: r.read,
+      issueId: r.issueId,
+    });
+    socket.emit("mark-read", { currentIssue });
+  });
 
   function sendMessage(content: string, to: string) {
-    console.log(content);
-    console.log(to);
     socket.emit("message", { to, content });
+
+    setTimeout(() => {
+      scrollToEnd();
+    }, 100);
   }
 
   async function fetchMessage(issueId: string) {
@@ -47,17 +82,19 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
         hideLoader();
       });
     if (res && res.data) {
-      message.value = res.data;
-
-      console.log(res.data);
+      message.value = await res.data;
+      message.value.result.message.reverse();
       socket.emit("join-issue", { issueId });
       socket.emit("mark-read", { issueId });
+
+      setTimeout(() => {
+        scrollToEnd();
+      }, 3);
     }
   }
 
   async function fetchIssue() {
     showLoader();
-
     const res = await http
       .get(config.API.supportIssue)
       .catch((err) => {
@@ -69,7 +106,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
 
     if (res && res.data) {
       issue.value = res.data;
-      console.log(JSON.stringify(res.data, null, -2));
+      // console.log(JSON.stringify(res.data, null, -2));
     }
   }
 
@@ -80,7 +117,10 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     fetchIssue,
     fetchMessage,
     sendMessage,
-    scrollTargetRef,
     items,
+    scrollToEnd,
+    scrollContainer,
+    currentIssue,
+    currentTitle,
   };
 });