FIRE-332-fe-캐릭터-위에-채팅-구현

src/adapters/video/videoSocket.ts

@@ -0,0 +1,12 @@
+import { io } from 'socket.io-client';
+
+const videoSocket = io(process.env.REACT_APP_SOCKET_VIDEO_URL as string);
+
+function videoSocketInit(payload) {
+  videoSocket.on('connect', () => {
+    console.log('socket server connected.');
+    videoSocket.emit('joinRoom', payload);
+  });
+}
+
+export { videoSocketInit, videoSocket };

src/components/room/LocalScreen.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import MyAvatar from '../../assets/avatar/MyAvatar';
 import controlModal from '../../stores/controlModal';
 import { useCreateMediaStream } from '../rtc/hooks/useCreateLocalStream';
 
-export default function LocalScreen({ nickname, avatar, uid }) {
+export default function LocalScreen({ nickname, avatar, uid, messages }) {
   const { userMediaStream, createMediaStream } = useCreateMediaStream();
+  const [currentTime, setCurrentTime] = useState<Date>(new Date());
   useEffect(() => {
     createMediaStream();
   }, []);
@@ -24,14 +25,29 @@ export default function LocalScreen({ nickname, avatar, uid }) {
     }
   }, [videoRef, userMediaStream]);
 
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 250);
+    return () => clearInterval(timer);
+  }, []);
+
+  const newMessages = messages.filter(
+    (message) =>
+      message.uid === uid &&
+      new Date(message.createdAt).getTime() > currentTime.getTime() - 5000,
+  );
   return (
     <Container onClick={OpenModal}>
       <Video ref={videoRef} autoPlay playsInline muted />
       <ControlBar>
         <ChatContainer>
           <ChatInner>
-            <Chats>Lorem ipsum dolor sit amet,</Chats>
-            <Chats>Vestibulum sit amet tellus suscipit</Chats>
+            {newMessages.map((message) => (
+              <Chats key={message.createdAt}>{message.message}</Chats>
+            ))}
+            {/* <Chats>Lorem ipsum dolor sit amet,</Chats> */}
+            {/* <Chats>Vestibulum sit amet tellus suscipit</Chats> */}
           </ChatInner>
         </ChatContainer>
         <AvatarPosition>

src/components/room/ScreenShare.tsx

@@ -5,7 +5,7 @@ import SingleScreen from './SingleScreen';
 import LocalScreen from './LocalScreen';
 import connectedUsersStore from '../../stores/connectedUsersStore';
 
-export default function ScreenShare() {
+export default function ScreenShare({ messages }) {
   const navigate = useNavigate();
   const { connectedUsers } = connectedUsersStore();
   useEffect(() => {
@@ -22,13 +22,15 @@ export default function ScreenShare() {
           nickname={localStorage.getItem('nickname')}
           avatar={localStorage.getItem('avatar')}
           uid={localStorage.getItem('uid')}
+          messages={messages}
         />
         {connectedUsers.map((user) => (
           <SingleScreen
             key={user.nickname}
             nickname={user.nickname}
             avatar={user.avatar}
             uid={user.uid}
+            messages={messages}
           />
         ))}
       </ScreenWrapper>

src/components/room/SingleScreen.tsx

@@ -1,33 +1,38 @@
+import { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import MyAvatar from '../../assets/avatar/MyAvatar';
 import controlModal from '../../stores/controlModal';
 
-export default function SingleScreen({
-  nickname,
-  avatar,
-  uid,
-}: {
-  nickname: string;
-  avatar: string;
-  uid: string;
-}) {
+export default function SingleScreen({ nickname, avatar, uid, messages }) {
   const { toggleModal, setNickname, setAvatar, setUid } = controlModal();
+  const [currentTime, setCurrentTime] = useState<Date>(new Date());
+
   const OpenModal = () => {
     setNickname(nickname);
     setAvatar(avatar);
     setUid(uid);
     toggleModal();
   };
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 250);
+    return () => clearInterval(timer);
+  }, []);
+  const newMessages = messages.filter(
+    (message) =>
+      message.uid === uid &&
+      new Date(message.createdAt).getTime() > currentTime.getTime() - 5000,
+  );
+
   return (
     <Container onClick={OpenModal}>
       <ChatContainer>
         <ChatInner>
-          <Chats>Lorem ipsum dolor sit amet,</Chats>
-          <Chats>Vestibulum sit amet tellus suscipit</Chats>
-          <Chats>
-            Fusce eget lacus eu magna finibus interdum vel vel felis.
-          </Chats>
-          <Chats>Last Chat</Chats>
+          {newMessages.map((message) => (
+            <Chats key={message.createdAt}>{message.message}</Chats>
+          ))}
         </ChatInner>
       </ChatContainer>
       <AvatarPosition>

src/pages/Room.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import io from 'socket.io-client';
 import axios from 'axios';
 import { useEffect, useState, useCallback } from 'react';
+import { io } from 'socket.io-client';
 import { useParams } from 'react-router-dom';
 import Header from '../components/room/Header';
 import ScreenShare from '../components/room/ScreenShare';
@@ -20,21 +20,21 @@ import {
 } from '../adapters/chat/socketio';
 
 export default function Room() {
-  const uid = localStorage.getItem('uid');
-  const videoSocket = io(process.env.REACT_APP_SOCKET_VIDEO_URL as string);
   const [userList, setUserList] = useState({});
   const [messages, setMessages] = useState([]);
   const [prev, setPrev] = useState('');
   const { isOpen } = controlModal();
   const { roomId } = useParams();
   const { enablePrevent, disablePrevent } = usePreventLeave();
   const { connectedUsers, appendUser, removeUser } = connectedUsersStore();
+  const myuid = localStorage.getItem('uid');
 
   useEffect(() => {
+    const videoSocket = io(process.env.REACT_APP_SOCKET_VIDEO_URL as string);
+
     videoSocket.on('connect', () => {
-      console.log('video socket connected');
-      const payload = { room: roomId, uid: localStorage.getItem('uid') };
-      console.log('payload', payload);
+      console.log('socket server connected.');
+      const payload = { room: roomId, uid: myuid };
       videoSocket.emit('joinRoom', payload);
     });
 
@@ -78,7 +78,7 @@ export default function Room() {
       removeUser(user.socketId);
     });
     socketInit();
-    emitJoinChatRoom(roomId, uid);
+    emitJoinChatRoom(roomId, myuid);
     onJoinedRoom(receiveJoin);
     onChatMessage(receiveMessage);
     onLeftRoom();
@@ -146,7 +146,7 @@ export default function Room() {
       <Component>
         <Header />
         <Contents>
-          <ScreenShare />
+          <ScreenShare messages={messages} />
           <Sidebar messages={messages} />
         </Contents>
       </Component>