Socket.io로 채팅 웹사이트 구현 들어가기
Socket.io를 이용해 실시간 통신이 가능한 소켓 서버와 이것과 연결된 클라이언트를 개발하여 채팅 웹사이트를 만드는 프로젝트를 여러 편의 포스팅에 걸쳐서 진행하려고 합니다. 먼저 Node.js에서 동작하는 소켓 서버를 만들 것이고, 그다음에는 React.js를 이용해 클라이언트를 만들 것입니다. 이 둘은 서로 실시간 통신이 가능할 것이고, 결과적으로 그럴싸한 그렇지만 정말 간단한 채팅 웹사이트가 탄생할 것입니다.
WebSocket과 Socket.io의 차이점
WebSocket은 양방향 메시지 송수신을 가능하게 만들기 위해 나온 HTML5 표준 기술입니다. 표준 기술이기 때문에 추가적인 라이브러리 설치 없이 사용할 수 있으나, 오래된 버전의 웹 브라우저는 이 기술을 지원하지 않습니다.
Socket.io는 WebSocket기술을 활용하는 라이브러리입니다. WebSocket뿐만 아니라 FalshSocket, AJAX Long Polling, AJAX Multi part Streaming, IFrame, JSONP Polling 등의 실시간 웹 기술들을 활용하여 브라우저의 종류에 상관없이 실시간 양방향 통신을 지원합니다. 라이브러리기 때문에 사용을 위해 추가 설치가 필요합니다. 또한 WebSocket보다 코드를 직관적이고 편리하게 짤 수 있으며 room이라는 기능이 있어 room별로 송신을 보낼 수 있습니다.
Socket.io 공식문서에서 사용법과 API에 대해 찾아볼 수 있습니다.
WebSocket Handshake 원리
WebSocket의 handshake 과정은 HTTP로 이루어집니다.
먼저, 클라이언트가 서버에 HTTP로 핸드셰이크 요청을 보냅니다.
이때, 잘못된 값을 가지거나 형식이 잘못된 헤더를 가진 요청을 보낸 경우, 서버는 400 Bad Request 응답을 보내 소켓을 종료시켜야 합니다.
올바른 요청을 보냈다면, 서버는 클라이언트에게 HTTP로 핸드셰이크 응답을 보냅니다.
클라이언트가 응답을 받으면 핸드셰이크는 성공적으로 끝난 것입니다.
이제부터는 클라이언트와 서버가 서로 실시간으로 웹소켓 프로토콜을 통해 양방향 통신을 할 수 있게 됩니다.
이 Handshake 원리는 MDN Web Docs 웹소켓 서버 작성하기를 참조하여 요약했습니다.
다음 장. [채팅 웹사이트 구현 - 2장] Node.js에서 Socket.io를 이용하여 소켓 서버 만들기
최근댓글