[유민] react + socket.io 의 대환장 콜라보레이션

[qhahd78]

서비스 설명

React와 socket.io 를 사용하여 실시간 채팅 서비스를 만들었습니다.
git : https://github.com/OranguTalk/OranguTalk_FE

프론트엔드 시작하고 얼마 안 되어 쓴 코드 + javaScript 라 퀄리티가 많이 떨어지지만, 소켓이 붙어있는 나름 재밌는 코드라 이야기 나눠보면 좋을 것 같아 가져와봤어요.

아래는 참고용 서비스 화면입니다. (무쓸모한 서비스를 만드는 해커톤이라서 오랑우탄과 대화하는 서비스를 만든 것이니 이상하게 생각하지 말아주세요)

코드 설명

• 채팅 목록 화면입니다.
  • 화면 들어오자마자 socket connect
  • 방 만들 때 socket emit

논의점

• 지금처럼 화면 들어오자마자 socket connect 하는 것이 좋을까요? 혹은 socket connect 를 따로 관리할 수 있는 방법이 있을까요 ?
• socket 객체를 하위컴포넌트로 내려주는데, 전역으로 관리하는 것이 좋을지?
• 소켓을 다뤄보신 분이 있으면 얘기할 것이 많을 것 같아요. React.js 안에서 소켓 관리법?

function ChatList() {
  // 현재 로그인된 유저
  const user = useRecoilValue(userState);
  // 참가자 리스트 recoil 에서 불러오기
  const [Participants, setParticipants] = useRecoilState(participantState);
  // 만드는 방 이름 recoil 에서 불러오기
  const roomName = useRecoilValue(CreateRoomState);
  // 채팅방 개수
  const roomNum = useRecoilValue(RoomNumState);
  const token = user.userToken;
  const user_id = user.userId;
  const [Users, setUsers] = useState([]);
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const users = (await AllUsersInfo()).data;
        setUsers(users);
      } catch (error) {
        console.log(error);
      }
    };
    fetchUsers();
  }, []);
  // 서버세팅
  const [currentSocket, setCurrentSocket] = useState();
  useEffect(() => {
    // 서버와 연결
    setCurrentSocket(
      io.connect('localhost:5000', { transports: ['websocket'] }),
    );
  }, []);
  // 방 만드는 함수
  const CreateRoom = () => {
    // 방 제목 없을 시 생성 안 되도록
    if (!roomName) {
      window.alert('방 제목을 정해주세요.');
    } else {
      currentSocket.emit('roomCreate', {
        accessToken: token,
        roomname: roomName,
        participant: Participants,
      });
      setParticipants([]);
      window.location.replace('/chatmain');
    }
    // 생성 후 recoil 초기화 하고 main 으로.
  };

  // 다크모드 설정
  const current = useRecoilValue(modeState);
  const bgColor2 = current.bgColor2;
  const textColor2 = current.textColor2;

  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <ChatListDIv bgColor2={bgColor2}>
      <p>
        <p>
          채팅
          <span> ({roomNum})</span>
        </p>

        <p onClick={handleOpen}>+</p>
      </p>
      <Modal
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <ModalDiv className={classes.paper}>
            {/* <p>채팅방 생성</p> */}
            {/* <p>채팅방을 생성해보세요.</p> */}
            <UserList users={Users} />
            <CreateBtn onClick={CreateRoom}>생성</CreateBtn>
          </ModalDiv>
        </Fade>
      </Modal>
      <ListDiv>
        <List
          socket={currentSocket}
          token={token}
          textColor2={textColor2}
          bgColor2={bgColor2}
        />
      </ListDiv>
    </ChatListDIv>
  );
}

export default ChatList;

---

코드 설명

• 채팅 화면입니다. 카카오톡 채팅방을 생각하시면 됩니다.
  • 최초 진입 시 chat list API call
  • 최초 진입 시 socket.on 으로 채팅 발생 이벤트 받음
  • 이전 대화 리스트들 + socket 으로 들어오는 새로운 채팅들 합쳐서 화면에 보여주게 됨.

논의점

• 이전 대화 리스트와 현재 진행되는 채팅을 합쳐서 화면에 보여주도록 하고 있는데, 제가 기억하기론 실시간으로 화면에 그려지지 않았던 걸로 기억해요. 로직을 개선할 방법이 있을지 ..
• 하단에 스크롤이 항상 고정되어야하는데, 어떤 방법이 좋을까요?
• 위 내용에 이어서, 새로운 채팅이 올 때마다 스크롤을 아래로 내려야하는데 어떻게 해야할까요?

// 채팅 리스트 불러오는 api
const Chatroom = ({ socket, room_id }) => {
  // recoil 값 저장
  // const user = useRecoilValue(userState);
  // 유민 :: recoil 값이 잘 안 받아와지는 것 같아서 일단 localStorage 값으로 해놨습니다.
  const userid = localStorage.userid;
  const [Chats, setChats] = useState([]);
  const [recentChat, setRecentChat] = useState({});
  const [NewChats, setNewChats] = useState([]);
  const scroll = useRef();

  // 스크롤 고정 함수
  const scrollFix = () => {
    // console.log(scroll.current);
    scroll.current.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
    });
  };
  useEffect(() => {
    const fetchChats = async () => {
      try {
        const chats = (await ChatList(room_id)).data.chatInfo;
        // console.log(chats);
        setChats(chats);
      } catch (error) {
        console.log(error);
      }
    };
    fetchChats();
  }, []);
  // 메세지 보내면 recentChat 에 저장.
  useEffect(() => {
    // setRecentChat({});
    socket.on('receiveMessage', (data) => {
      try {
        setRecentChat({
          user_id: data.userData.user_id,
          user_name: data.userData.user_name,
          send_time: data.userData.createdAt,
          message: data.message,
        });
        console.log('On 실행됨');
        console.log(data);
        console.log(recentChat);
      } catch {
        console.log('Message Receive Error');
      }
    });
  }, []);

  useEffect(() => {
    if (Chats.length > 0 && Chats.concat(recentChat).length > Chats.length) {
      //새로운 채팅의 길이 저장
      const reChats = NewChats.concat(recentChat);
      // console.log(reChats);
      // const delRe = _.uniqBy(reChats, 'id');
      setNewChats(reChats);
      console.log(NewChats);
    } else {
      console.log('........ no Change ........');
    }
  }, [recentChat]);

  const renderChatList = () =>
    Chats.length > 0 &&
    Chats.map(
      (info) =>
        // 유민 :: userid 값이 string 이라서 int 값으로 교체 했어요
        (info.chatInfo.user_id === Number(userid) && (
          <My
            chat={info.chatInfo.message}
            time={
              new Date(info.chatInfo.send_time).getHours() +
              ':' +
              new Date(info.chatInfo.send_time).getMinutes()
            }
          />
        )) || (
          <Other
            username={info.userInfo.user_name}
            chat={info.chatInfo.message}
            time={
              new Date(info.chatInfo.send_time).getHours() +
              ':' +
              new Date(info.chatInfo.send_time).getMinutes()
            }
          />
        ),
    );

  return (
    <div>
      <Container ref={scroll}>
        {/* <button onClick={scrollFix}>클릭하면 아래로</button> */}
        {Chats.length > 0 &&
          Chats.map(
            (info) =>
              // 유민 :: userid 값이 string 이라서 int 값으로 교체 했어요
              (info.chatInfo.user_id === Number(userid) && (
                <My
                  chat={info.chatInfo.message}
                  time={
                    new Date(info.chatInfo.send_time).getHours() +
                    ':' +
                    new Date(info.chatInfo.send_time).getMinutes()
                  }
                />
              )) || (
                <Other
                  username={info.userInfo.user_name}
                  chat={info.chatInfo.message}
                  time={
                    new Date(info.chatInfo.send_time).getHours() +
                    ':' +
                    new Date(info.chatInfo.send_time).getMinutes()
                  }
                />
              ),
          )}
        {NewChats.length > 0 &&
          NewChats.map(
            (item) =>
              (Number(item.user_id) === Number(userid) && (
                <My
                  chat={item.message}
                  time={
                    new Date(item.send_time).getHours() +
                    ':' +
                    new Date(item.send_time).getMinutes()
                  }
                />
              )) || (
                <Other
                  username={item.user_name}
                  chat={item.message}
                  time={
                    new Date(item.send_time).getHours() +
                    ':' +
                    new Date(item.send_time).getMinutes()
                  }
                />
              ),
          )}
      </Container>
    </div>
  );
};

export default Chatroom;

[Wisesaturn]

역싀,,, 대장님,,, 소켓까지 마스터하셨군여,,,
첫 프로젝트다보니 한 파일에 왕창 모아둔 건 왠지 익숙하군여,,, (눈물)

사실 제 첫 프로젝트도 살짝 소켓이 가미된 프로젝트였습니다 ㅋㅋㅋ
그 때 개발한 프로젝트에서 어떻게 했는지 뒤져보면

// socket.js
import io from 'socket.io-client';
export default io('localhost:3001', { reconnection: true });

하나의 소켓 연결을 만든 후에 다른 곳에서 socket.emit 혹은 socket.connect로 사용하였네요
이렇게 하면 React랑 사실 별개로 돌아가서 대장님이 짜신 코드보다 더 별로인 느낌이,,,

지금 곰곰히 생각해봤을 때 저라면 커스텀 훅을 하나 만들 것 같아요

const useSocket = (url: string) => {
  const [socket, setSocket] = useState<Socket | null>(null);

  useEffect(() => {
    const newSocket = io(url);
    setSocket(newSocket);

    return () => {
      newSocket.close();
    };
  }, [url]);

  return socket;
};

뭐 좀 더 확장해서 Context API랑 연결짓거나 상태 라이브러리 (Recoil, Zustand)랑 연결짓기도 편할 거 같네요!
상태 라이브러리랑 연결지으면 useState보단 useRef를 써서 리렌더링을 방지하는 게 좋아보입니다

---

두 번째 코드는 뭔가 소켓에서 내용을 받았을 때 receiveChat을 받는 useEffect를 하나 더 만들어야 할 것 같아요
그 useEffect 안에선 스크롤을 최하단으로 내리는 로직이 있으면 좋아보이는..? 어렵네요 ㅠㅠ
이 부분은 조금 많이 훑어봐야 할 것 같습니다

[bbearcookie]

3년 전부터 WebSocket을 섭렵하고 계셨다니 역시 대장님이십니다.. 👍👍
저는 컴포넌트 안에서 몇 가지 관심사를 분리해볼 수 있겠다는 생각이 들었어요!

1. 데이터 패칭에 대한 부분
   • SWR이나 TanStack Query같은 데이터 패칭 라이브러리를 사용하는 방법이 가장 수월하겠지만, API 응답에 대한 상태를 관리하는 useFetch 같은 훅으로 분리하는 것도 하나의 방법이 될 수 있을 것 같아요 😁
2. 재한님이 코멘트해주신 내용처럼 소켓 연결 및 해제를 담당하는 부분

새로운 채팅이 올 때마다 스크롤을 아래로 내려야하는데 어떻게 해야할까요?

저도 이전에 새로운 컨텐츠가 생길 때 스크롤을 하단으로 이동시키기 위한 기능을 구현해야 했던 적이 있는데, 유민님과 비슷한 방식으로 구현했던 것 같네요! (ref 객체로 화면 하단의 DOM을 등록하고, 스크롤을 하단으로 이동시키는 API 사용)
소켓을 통해 메세지를 받았을 때 scrollFix 함수를 호출하는 방법으로 구현할 것 같은데, 채팅 메시지 상태가 아직 업데이트 되지 않은 상태여서, 화면이 먼저 그려지는 걸 기다리기 위해 태스크 큐에 스케줄링했던 기억이 있네요! (임시 방편의 hack 느낌이어서 더 좋은 방법이 있을지..)

const useScrollController = () => {
  const target = useRef(null);

  const scrollToBottom = () => {
    queueMicrotask(() => {
      target.current?.scrollTo({
      top: target.current.scrollHeight,
    });
  );

  return { target, scrollToBottom };
};

[KyuTae98]

대 유 민..

저도 websocket으로 다양한 프로젝트 해봤는데 참고가 되는 코드가 많군요!!

일단은 컴포넌트와 비즈니스 로직을 분리하는게 좋다고 생각합니다!! 재한남의 의견처럼 custom hook으로 나눈다면 재사용성면에서도 더 좋을수 있다고 생각합니다! ->( 웹소켓의 연결과 헤제, 데이터가 오는 부분 그리고 메세지가 오는 부분 )

  useEffect(function fetchChats async () {
      try {
        const chats = (await ChatList(room_id)).data.chatInfo;
        // console.log(chats);
        setChats(chats);
      } catch (error) {
        console.log(error);
      }
  }, []);

요 부분도 저번에 재한님의 코드에 있던 것처럼 useEffect에 바로 함수를 사용해면 디버깅에도 좋다고 생각합니당!!

[regularPark]

저도 이전에 과제를 진행할 때 소켓을 사용해보았는데, 당시에 저도 웹소켓 로직을 훅으로 분리해서 사용했던 기억이 납니다.

당시 기억을 좀 떠올려보자면 에러 핸들링을 할 때에 socket도 onopen, onmessage, onerror 등 메서드가 나름 잘 갖춰져 있어 데이터 가공과 에러 핸들링이 용이했습니다.

try ~ catch문을 사용하신 것도 물론 좋지만, socket에서 제공하는 메서드를 사용해보시는 것도 좋을지도?😁