[Mini/채팅] Socket.IO, React, express를 이용한 채팅 프로젝트 - 소개

[Mini/채팅] Socket.IO, React, express를 이용한 채팅 프로젝트 - 소개

WebSocket을 사용하면서 우연히 Socket.IO 라이브러리를 보게 되었다. Socket.IO는 간단하게 실시간 양방향 이벤트 처리를 할 수 있는 라이브러리이다. 실시간 이벤트 처리하는 프로젝트의 경우 사용하면 좋을 것 같아 간단하게 공부해보며 프론트는 react, 서버는 express를 이용하여 채팅을 구현해보기러 하였다.

WebSocket vs Socket.IO (장단점)

Socket.IO는 WebSocket을 사용하면서 보았다고 하였는데, 그럼 2개의 차이가 무엇일까? 그냥 WebSocket을 쉽게 사용할 수 있도록 하는 라이브러리라고 생각하는 사람도 있겠지만 필자는 어느 정도는 맞지만 어느 정도는 틀렸다고 생각한다. 왜냐하면 Socket.IO는 WebSocket을 사용하지만 그렇지 못 한 경우에는 HTTP를 이용하여 polling하기 때문이다.

공식 문서에 위와 같이 설명이 되어있다. 그리고 WebSocket에 비해 더 편해졌다. 예를들면 message event를 받기 위해서는 아래와 같이 작성해주어야 했다.

ws.on("message", (data) => {
  // ... working
})

callback에 있는 data의 경우 string으로 고정이 되어 있었다. 그러나 Socket.IO를 사용하면 아래와 같이 사용할 수 있다.

socket.on(eventName, (data) => {
  // ... working 
})

무슨 차이가 있지? 라고 생각할 수 있지만 많은 차이가 있다. 우선 eventName을 내가 원하는 것으로 작성할 수 있다는 것과 data에 string 외 다른 타입도 넣어서 보낼 수 있다. 이 뿐만이 아닌 WebSocket에서는 변수로 group 개념을 관리해주어야 하지만 Socket.IO는 room 이라는 개념이 내재되어 있어 더 편리하다. 그러나 장점이 있으면 역시 단점도 있다. 가장 생각하기 쉬운 단점은 라이브러리 크기이다. WebSocket의 경우 154KB 밖에 하지 않는다. 그러나 Socket.IO의 경우 서버의 경우 984KB, 클라이언트의 경우 977KB로 WebSocket 보다 엄청 큰 편이다.

Socket.IO, React, express를 이용한 채팅 프로젝트

위 프로젝트는 게시글 제목에서 볼 수 있듯이 Socket.IO, React, express를 이용하여 실시간 채팅하는 프로젝트이다. 해당 게시글 프로젝트 시리즈 게시글은 거의 설명이 없다고 보면 된다. 따라서 react hook, express 를 모르는 경우 이해하기 힘들다. 아직 구현하진 않았지만 결과물은 다음과 같을 것 같다.

로그인 -> 닉네임 설정 -> 방 만들기 or 방 들어가기 -> 채팅하기

1 계정 - 1 채팅방

위 방식으로 채팅할 수 있는 프로젝트가 완성될 것 같다. 실시간으로 화면이 변경되니 재미있을 것 같다.

◆ 참고자료

• Socket.IO 공식홈페이지
• npm websocket
• npm socket.io
• npm socket.io-client

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.