[채팅 웹 사이트 구현 #1] WebSocket과 Socket.io

이번 실전 프로젝트에서 실시간 채팅을 구현하기로 하였다.

지금껏 한번도 socket.io를 다뤄본적도, 사실 그게 뭔지도 모르기 때문에

혼자서 socket.io를 이용해서 실시간 채팅 웹 사이트를 구현해보기로 했다.🌝

 

---

 

What Socket.IO is​

Socket.IO is a library that enables real-time, bidirectional and event-based communication between the browser and the server. It consists of:

• a Node.js server: Source | API
• a Javascript client library for the browser (which can be also run from Node.js): Source | API

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 indeed uses WebSocket as a transport when possible, but a WebSocket client will not be able to connect to a Socket.IO server, and a Socket.IO client will not be able to connect to a WebSocket server”.

라고 한다.

즉, socket.Io는 송수신 수단으로써 webSocket을 쓸 수 있다.

그러나 webSocke 클라이언트는 socket.Io 서버를 사용할 수 없고, socket.Io 클라이언트는 webSocke 서버에 연결할 수 없다.

다시말해 각 클라이언트는 소통 할 수 있는 정해진 짝이 있다.

 

WebSocket의 원리

WebSocket의 handshake. 즉 연결은 http에 의해 이루어진다.

클라이언트에서 데이터 타입이나 헤더를 올바르게 보내면 handshake 응답을 보내고, 그렇지 않으면 400번대 애러를 띄워 소켓을 종료한다. 클라이언트에서 응답을 잘 받았다면 handshake는 종료된다.

Sokcet.io의 작동원리

먼저 클라이언트 단에서는 웹소켓과의 연결이 되는 부분을 만들어야 한다.

웹소켓은 기본적으로 서버와 브라우저 간의 커뮤니케이션 프로토콜이며 송수신이 빠르고 각각 독립된 회선을 사용한다.

 

---

 

다음 장 부터는 서버와 클라이언트 간에 실시간으로 웹소켓 프로토콜을 통해 양방향 통신을 하는 것을

node.js로 만든 소켓 서버와 react 클라이언트 페이지로 나누어진 채팅 사이트를 만들며 알아보겠다.