[QUIZ-3][fix-socket] fix: fix socket

src/components/group/comment/ListReply.vue

@@ -7,11 +7,11 @@ import { apiError } from '@/utils/exceptionHandler'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import type { IPaging } from '@/types'
-import { useSocketStore } from '@/stores/socket'
+import { useGroupSocketStore } from '@/stores/socket/group'
 import { useConfirmDialog } from '@/stores/modal'
 
 const confirmDialog = useConfirmDialog()
-const socketStore = useSocketStore()
+const socketStore = useGroupSocketStore()
 
 const getMessage = computed(() => {
   return socketStore.getMessage

src/components/room/lobby.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Button } from '../ui/button'
 import { useRoomStore } from '@/stores/room'
-import { useSocketStore } from '@/stores/socket'
+import { useRoomSocketStore } from '@/stores/socket/room'
 import type { ILocked, IMember, IKickMem } from '@/types'
 import QRCodeVue3 from 'qrcode-vue3'
 import { avatars } from '@/utils/avatar'
@@ -16,7 +16,7 @@ const router = useRouter()
 const loadingStore = useLoadingStore()
 const authStore = useAuthStore()
 const roomStore = useRoomStore()
-const socketStore = useSocketStore()
+const socketStore = useRoomSocketStore()
 
 const detailRoom = computed(() => {
   return roomStore.getRoomInfo

src/components/room/play/PlayHostView.vue

@@ -6,9 +6,9 @@ import type {
   SocketSummaryAnswer,
   SocketUserAnswerQuestion,
 } from '@/types/socket'
-import { useSocketStore } from '@/stores/socket'
+import { useRoomSocketStore } from '@/stores/socket/room'
 import type { Quiz } from '@/types/question'
-const socketStore = useSocketStore()
+const socketStore = useRoomSocketStore()
 import AnswerStatistic from './AnswerStatistic.vue'
 import { useRoomStore } from '@/stores/room'
 import SlideEditor from '@/components/quizzfly/create/slide/SlideEditor.vue'

src/components/room/play/Ranking.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { SocketLeaderboard } from '@/types/socket'
 import { Button } from '@/components/ui/button'
-import { useSocketStore } from '@/stores/socket'
+import { useRoomSocketStore } from '@/stores/socket/room'
 import { avatars } from '@/utils/avatar'
 
 const props = defineProps<{
   leaderboardData: SocketLeaderboard
 }>()
 
-const socketStore = useSocketStore()
+const socketStore = useRoomSocketStore()
 
 function getRandomAvatar(): string {
   // random avatar in avatars array

src/main.ts

@@ -13,7 +13,7 @@ import GuestLayout from '@/layouts/GuestLayout.vue'
 import NoSideBarLayout from '@/layouts/NoSideBarLayout.vue'
 import QuizCreateLayout from './layouts/QuizCreateLayout.vue'
 import RoomLayout from './layouts/RoomLayout.vue'
-import { initAuthStore } from './stores'
+import { initAuthStore, initWebSocketStore } from './stores'
 
 /* plugins */
 import { plugin as VueTippy } from 'vue-tippy'
@@ -24,8 +24,6 @@ import 'tippy.js/dist/tippy.css' // optional for styling
 import 'vue-awesome-paginate/dist/style.css'
 import { setupI18n } from './plugins/i18n'
 import Vue3Toastify from './plugins/toast'
-import { useSocketStore } from './stores/socket'
-import { useAuthStore } from './stores/auth'
 import vue3GoogleLogin from 'vue3-google-login'
 import sanitizeHTML from 'sanitize-html'
 
@@ -57,7 +55,6 @@ const initApp = async () => {
   app.component('QuizCreateLayout', QuizCreateLayout)
   app.component('RoomLayout', RoomLayout)
   app.use(createPinia())
-  await useSocketStore().setupSocketStore()
   app.use(vue3GoogleLogin, {
     clientId:
       import.meta.env.VITE_GOOGLE_CLIENTID ||
@@ -66,10 +63,10 @@ const initApp = async () => {
   app.config.globalProperties.$sanitize = sanitizeHTML
 
   await initAuthStore()
-  if (useAuthStore().getUser?.id) {
-    useSocketStore().setupGroupSocketStore()
-  }
-  // await initWebSocketStore();
+  // if (useAuthStore().getUser?.id) {
+  //   await useGroupSocketStore().setupGroupSocketStore()
+  // }
+  await initWebSocketStore()
   // await initMasterStore();
   app.use(router)
   router.isReady().then(() => {

src/pages/groups/detail/post-detail.vue

@@ -10,7 +10,7 @@
 import { Card } from '@/components/ui/card'
 import { useGroupStore } from '@/stores/group/group'
 import { usePostStore } from '@/stores/group/post'
-import { useSocketStore } from '@/stores/socket'
+import { useGroupSocketStore } from '@/stores/socket/group'
 import { formatDateTime } from '@/utils/time'
 import { getPostDetailApi } from '@/services/group'
 import { showToast } from '@/utils/toast'
@@ -26,7 +26,7 @@
 const postStore = usePostStore()
 const route = useRoute()
 const router = useRouter()
-const socketStore = useSocketStore()
+const socketStore = useGroupSocketStore()
 
 const groupId = route.params.groupId as string
 const postId = route.params.postId as string
@@ -168,7 +168,7 @@
                   <div
                     class="text-gray-900 font-normal mt-2 content-format"
                     @click="handleHtmlLinkClick"
                     v-html="$sanitize(postInfo?.content)"
                   ></div>
 
                   <div

src/pages/room/host-play/show-quizzfly.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import BarWrapper from '@/components/room/BarWrapper.vue'
 import { useLoadingStore } from '@/stores/loading'
-import { useSocketStore } from '@/stores/socket'
+import { useRoomSocketStore } from '@/stores/socket/room'
 import PlayHostView from '@/components/room/play/PlayHostView.vue'
 import type { SocketLeaderboard, SocketQuizStarted } from '@/types/socket'
 import Ranking from '@/components/room/play/Ranking.vue'
 import RankingFinal from '@/components/room/play/RankingFinal.vue'
 import { useRoomStore } from '@/stores/room'
 
 const loadingStore = useLoadingStore()
-const socketStore = useSocketStore()
+const socketStore = useRoomSocketStore()
 const roomStore = useRoomStore()
 
 const isShowRanking = ref(false)

src/pages/room/member-play/instructions-play.vue

@@ -5,7 +5,7 @@ import type { SocketLeaderboard, SocketQuizStarted, SocketResultAnswer } from '@
 import PlayLoading from '@/components/room/play/PlayLoading.vue'
 import PlayUserResult from '@/components/room/play/PlayUserResult.vue'
 import RankingFinal from '@/components/room/play/RankingFinal.vue'
-import { useSocketStore } from '@/stores/socket'
+import { useRoomSocketStore } from '@/stores/socket/room'
 import { useRoomStore } from '@/stores/room'
 import type { IKickPlayer, IMember } from '@/types'
 import SlideEditor from '@/components/quizzfly/create/slide/SlideEditor.vue'
@@ -16,7 +16,7 @@ const socketMessage = computed(() => {
 })
 
 const router = useRouter()
-const socketStore = useSocketStore()
+const socketStore = useRoomSocketStore()
 const roomStore = useRoomStore()
 
 const socketData = ref<SocketQuizStarted>()

src/pages/room/play.vue

@@ -3,12 +3,12 @@ import BarWrapper from '@/components/room/BarWrapper.vue'
 import Lobby from '@/components/room/lobby.vue'
 import { useRoomStore } from '@/stores/room'
 import { useLoadingStore } from '@/stores/loading'
-import { useSocketStore } from '@/stores/socket'
+import { useRoomSocketStore } from '@/stores/socket/room'
 import { useAuthStore } from '@/stores/auth'
 import type { IRoomSocket } from '@/types'
 
 const loadingStore = useLoadingStore()
-const socketStore = useSocketStore()
+const socketStore = useRoomSocketStore()
 const authStore = useAuthStore()
 
 const roomStore = useRoomStore()

src/stores/index.ts

@@ -1,5 +1,6 @@
 import { useAuthStore } from './auth'
-import { useSocketStore } from './socket'
+import { useRoomSocketStore } from './socket/room'
+import { useGroupSocketStore } from './socket/group'
 import { showToast } from '@/utils/toast'
 
 export const initAuthStore = async () => {
@@ -24,8 +25,11 @@ export const initMasterStore = async () => {
 }
 
 export const initWebSocketStore = async () => {
-  const socketStore = useSocketStore()
-  socketStore.setupSocketStore()
+  const socketStore = useRoomSocketStore()
+  socketStore.setupRoomSocketStore()
+  if (useAuthStore().getUser?.id) {
+    useGroupSocketStore().setupGroupSocketStore()
+  }
 }
 
 export { useUserStore } from './user'

src/stores/socket/group.ts

@@ -0,0 +1,81 @@
+import { defineStore } from 'pinia'
+import { io } from 'socket.io-client'
+import { useAuthStore } from '../auth'
+import type { SocketMessage } from '@/types/socket'
+import type { IComment, IPost } from '@/types/group'
+
+const BASE_URL_SOCKET__GROUP =
+  import.meta.env.VITE_BASE_URL_SOCKET_GROUP || 'https://api.quizzfly.site/groups'
+
+export const useGroupSocketStore = defineStore({
+  id: 'socketGroup',
+  state: () => ({
+    client: null as any,
+    connected: false,
+    message: {} as SocketMessage,
+    resolveCallback: null as any,
+  }),
+  actions: {
+    async setupGroupSocketStore() {
+      this.clearSocketStore()
+
+      this.client = io(BASE_URL_SOCKET__GROUP, {
+        query: { user_id: useAuthStore().getUser?.id },
+      })
+
+      this.client.on('connect', () => {
+        this.connected = true
+        this.resolveCallback && this.resolveCallback()
+        console.log('Connected to socket group server') // Debug
+      })
+
+      this.client.on('disconnect', () => {
+        console.log('Disconnected from socket server') // Debug
+        this.connected = false
+      })
+
+      this.client.on('connect_error', () => {
+        console.log('Connection error') // Debug
+        this.connected = false
+      })
+
+      await new Promise((resolve) => {
+        this.resolveCallback = resolve
+      })
+
+      this.client.on('createPost', (newContent: IPost) => {
+        this.message = {
+          event: 'createPost',
+          data: newContent,
+        }
+
+        console.log(newContent, 'check comment')
+      })
+      this.client.on('commentPost', (newContent: any) => {
+        this.message = {
+          event: 'commentPost',
+          data: newContent,
+        }
+      })
+      this.client.on('reactPost', (newContent: IComment) => {
+        this.message = {
+          event: 'reactPost',
+          data: newContent,
+        }
+      })
+      await new Promise((resolve) => {
+        this.resolveCallback = resolve
+      })
+    },
+    clearSocketStore() {
+      if (this.client) {
+        this.client.disconnect()
+        this.client = null
+        this.connected = false
+      }
+    },
+  },
+  getters: {
+    getMessage: (state) => state.message,
+  },
+})

src/stores/socket.ts → src/stores/socket/room.ts

@@ -8,34 +8,31 @@ import type {
   IKickMem,
   IKickPlayer,
 } from '@/types/room'
-import { useRoomStore } from './room'
+import { useRoomStore } from '../room'
 import { showToast } from '@/utils/toast'
 import { apiError } from '@/utils/exceptionHandler'
 import router from '@/routers/router'
-import { useAuthStore } from './auth'
+import { useAuthStore } from '../auth'
 import type {
   SocketLeaderboard,
   SocketMessage,
   SocketResultAnswer,
   SocketUserAnswerQuestion,
 } from '@/types/socket'
-import type { IComment, IPost } from '@/types/group'
 
 const BASE_URL_SOCKET__ROOM =
   import.meta.env.VITE_BASE_URL_SOCKET_ROOM || 'https://api.quizzfly.site/rooms'
-const BASE_URL_SOCKET__GROUP =
-  import.meta.env.VITE_BASE_URL_SOCKET_GROUP || 'https://api.quizzfly.site/groups'
 
-export const useSocketStore = defineStore({
-  id: 'socket',
+export const useRoomSocketStore = defineStore({
+  id: 'socketRoom',
   state: () => ({
     client: null as any,
     connected: false,
     message: {} as SocketMessage,
     resolveCallback: null as any,
   }),
   actions: {
-    async setupSocketStore() {
+    async setupRoomSocketStore() {
       const roomStore = useRoomStore()
       this.clearSocketStore()
 
@@ -192,57 +189,6 @@ export const useSocketStore = defineStore({
         this.resolveCallback = resolve
       })
     },
-    async setupGroupSocketStore() {
-      // this.clearSocketStore()
-
-      this.client = io(BASE_URL_SOCKET__GROUP, {
-        query: { user_id: useAuthStore().getUser?.id },
-      })
-
-      this.client.on('connect', () => {
-        this.connected = true
-        this.resolveCallback && this.resolveCallback()
-        console.log('Connected to socket group server') // Debug
-      })
-
-      this.client.on('disconnect', () => {
-        console.log('Disconnected from socket server') // Debug
-        this.connected = false
-      })
-
-      this.client.on('connect_error', () => {
-        console.log('Connection error') // Debug
-        this.connected = false
-      })
-
-      await new Promise((resolve) => {
-        this.resolveCallback = resolve
-      })
-
-      this.client.on('createPost', (newContent: IPost) => {
-        this.message = {
-          event: 'createPost',
-          data: newContent,
-        }
-
-        console.log(newContent, 'check comment')
-      })
-      this.client.on('commentPost', (newContent: any) => {
-        this.message = {
-          event: 'commentPost',
-          data: newContent,
-        }
-      })
-      this.client.on('reactPost', (newContent: IComment) => {
-        this.message = {
-          event: 'reactPost',
-          data: newContent,
-        }
-      })
-      await new Promise((resolve) => {
-        this.resolveCallback = resolve
-      })
-    },
     handleCreateRoomData(data: IRoomSocket) {
       this.client.emit('createRoom', data)
     },