Merge pull request #39 from PBTP/feat/socket-chat

[refact]: useSocket refact WIP

src/App.tsx

@@ -1,7 +1,6 @@
-import { useEffect } from 'react';
 import { RootRouter } from './router/RootRouter';
 import { setUserAuth } from './stores/useAuthStore';
-import { showiOSInfo, webviewInit } from './webview/utils';
+import { showiOSInfo } from './webview/utils';
 
 if (!window.handleIosWebviewToken) {
   window.handleIosWebviewToken = (token, uuid) => {
@@ -15,10 +14,6 @@ if (!window.handleIosWebviewToken) {
 }
 
 function App() {
-  useEffect(() => {
-    webviewInit();
-  }, []);
-
   return <RootRouter />;
 }
 

src/hooks/socket/useSocket.ts

@@ -2,6 +2,9 @@ import { useAuthStore } from '@/stores/useAuthStore';
 import { useEffect, useMemo } from 'react';
 import { io } from 'socket.io-client';
 
+const MAX_ACK_TIME = 10000;
+const INITIAL_RETRY = 3;
+
 export const useSocket = (path: 'chat' = 'chat') => {
   const token = useAuthStore((state) => state.accessToken);
 
@@ -13,16 +16,40 @@ export const useSocket = (path: 'chat' = 'chat') => {
       extraHeaders: {
         Authorization: `Bearer ${token}`,
       },
+      ackTimeout: MAX_ACK_TIME,
+      retries: INITIAL_RETRY,
+      autoConnect: false,
     });
   }, [token, path]);
 
   useEffect(() => {
     if (!socket) return;
 
+    socket.connect();
+
     return () => {
+      socket.off('receive');
       socket.disconnect();
     };
   }, [socket]);
 
-  return socket;
+  const sendMessage = (message: object, senderUuid: string) => {
+    if (socket) {
+      const socketUniqueId = `${socket.id}-${senderUuid}`;
+      socket.emit('send', message, socketUniqueId);
+    }
+  };
+
+  const onMessage = (getMessage: (message: string[]) => void) => {
+    if (socket) socket.on('receive', getMessage);
+  };
+
+  interface joinRoomProps {
+    roomId: string;
+  }
+  const joinRoom = ({ roomId }: joinRoomProps) => {
+    if (socket) socket.emit('join', roomId);
+  };
+
+  return { socket, sendMessage, onMessage, joinRoom };
 };

src/pages/Chat/ChatRoom/ChatRoom.tsx

@@ -22,38 +22,33 @@ const ChatRoom = () => {
   const { data: previousMessages } = useChatRoomMessages({
     chatRoomId,
   } as ReqChatRoomMessages);
-  const socket = useSocket();
+  const { socket, sendMessage, onMessage, joinRoom } = useSocket();
 
   const [chatMessageType, setChatMessageType] =
     useState<ChatMessageType>('TEXT');
 
   const [chatMsgs, setChatMsgs] = useState([...previousMessages]);
 
   const sendMsg = () => {
-    if (!socket) return;
-    socket.emit('send', {
-      chatRoomId,
-      chatMessageId,
-      senderUuid,
-      chatMessageType,
-      chatMessageContent,
-    });
+    sendMessage(
+      {
+        chatRoomId,
+        chatMessageId,
+        senderUuid,
+        chatMessageType,
+        chatMessageContent,
+      },
+      senderUuid
+    );
   };
 
   useEffect(
     function handleChatRoom() {
-      if (!socket || !chatRoomId) return;
-
       const getMessage = (msg: string[]) => {
         setChatMsgs([...chatMsgs, ...msg]);
       };
-
-      socket.emit('join', { chatRoomId });
-      socket.on('receive', getMessage);
-
-      return () => {
-        socket.off('receive');
-      };
+      onMessage(getMessage);
+      joinRoom(chatRoomId);
     },
     [socket, chatRoomId]
   );

src/pages/Loading/LoadingSpinner.tsx

@@ -1,6 +1,6 @@
 import Lottie from 'lottie-react';
 import spinnerData from './mongleloading.json';
-import styles from './Loading.module.scss';
+import styles from './LoadingSpinner.module.scss';
 
 const LoadingSpinner = () => {
   return (