Socket.io

최스탑·2022년 6월 6일
0
post-thumbnail

프로젝트와 최종 발표까지 모두 끝난 시점이긴 하지만,
socket.io를 활용해 보고 싶어서 추가 기능으로 선택!
socket.io를 통해 웹을 이용중인 유저간의 자유로운 실시간 채팅 구현 💬

Socket.io 란?

  • websocket 기반으로 클라이언트와 서버간의 양방향 통신을 가능하게 해주는 이벤트 기반의 JavaScript 라이브러리
  • 브라우저에서 실행되는 클라이언트 측 라이브러리와 Node.js용 서버 측 라이브러리의 두 부분으로 구성

//이벤트를 받아 콜백함수 실행
socket.on("받을 이벤트 명", (msg) => {
})

//이벤트명을 지정하여 메세지 보냄
socket.emit("전송할 이벤트 명", msg)
  • useEffect를 통해 첫 렌더링 때 전체 메세지 리스트를 받아 화면에 출력한다.
  • 채팅을 구독하는 로직 역시 필요하다. 채팅을 입력했을 때 해당 전체 채팅 리스트에 바로 반영되어 출력되어야하기 때문!
    처음에 이 부분을 제외하고 구현을 했더니 역시 제대로 되지 않았다,,,정말 언제나 빠지지 않는 렌더링의 늪.
  • 추가적으로, useRef - ScrollIntoView를 적용해서 채팅 리스트 위치를 컨트롤하였다.
chatScroll.current.scrollIntoView({ behavior: "smooth", block: "end" });

profile
try & catch

0개의 댓글