채팅방을 만들기위한 webSocket 개요!

 

WebSocket... 쓰기전에

 

webSocket을 왜? 쓰는지부터 파악을해보자!

 

우리가 갑자기  프로젝트에서 실시간 채팅방 시스템을 만들어야한다!!

 

여기서 말하는 "실시간"은   나와 상대방이 계속 연결되어 있어야한다.

 

헌데, 우리가 메세지를 보내는 행위는 POST 요청을 할것이다.

 

HTTP 기초를 배웠다면,  기본적으로 통신은 무상태(stateless) 이다.

 

이유는 간단한데, 서버와 클라이언트를 계속 유지시키는건 서버낭비가 심하기때문이다.

 

이런 무상태에서 메세지를 보내면(POST) , 기본적으로 Re-Rendering (새로고침) 이 발생하고,

기존에 적었던 채팅메세지는 전부 홀라당 까먹어버린다.

 

그리하여, 실시간 채팅 또는 화상통화 같은경우  연결상태(Stateful) 가 되야한다.

 

그 Stateful를 지원하는것이 WebSocket이다.

 

 

웹 소켓 vs http통신

 

 

 

 

https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket

WebSocket() - Web APIs | MDN

 

 

 

Socket.IO

 

Chat GPT

 

Websockets와 Socket.IO는 모두 클라이언트와 서버 간의 실시간 통신을 위한 기술입니다. 그러나 그들은 몇 가지 차이가 있습니다

 

Websocket: Websockets는 클라이언트와 서버 간의 양방향 실시간 통신을 위한 프로토콜입니다. 하나의 TCP 연결을 통해 전이중(low-latency) 채널을 제공합니다. Websockets는 모든 프로그래밍 언어와 함께 사용할 수 있으며, 브라우저에서 WebSocket API를 사용하여 구현할 수 있습니다.

 

Socket.IO: Socket.IO는 클라이언트와 서버 간의 이벤트 기반 실시간 통신을 가능하게 하는 라이브러리입니다. WebSocket과 폴백(fallback) 메커니즘을 제공하여 WebSockets를 지원하지 않는 오래된 브라우저에서도 실시간 통신이 가능합니다. Socket.IO는 Node.js에서 구현되며, 많은 프로그래밍 언어와 함께 사용할 수 있습니다.

 

요약하면, WebSockets는 하나의 TCP 연결을 통해 실시간 통신을 가능하게 하는 프로토콜이며, Socket.IO는 WebSocket을 기반으로하며 오래된 브라우저에서도 실시간 통신을 제공하는 폴백 메커니즘을 제공하는 라이브러리입니다. Socket.IO는 WebSockets 위에 구축되며, 실시간 통신을 위한 간단하고 신뢰성있는 API를 제공합니다.

 

 

이와같이 socket.io는 websocket을 활용한 라이브러리 라고 생각하면된다.

 

실제로 socket.io의 메소드가 훨씬 채팅방 만들기 수월한 기능을 많이 내포하고, 생산성도 좋다.

 

 

 

실제로, socket.io의 메소드들을 살펴보자.

socket.emit('message', "this is a test"); //sending to sender-client only
 
socket.broadcast.emit('message', "this is a test"); //sending to all clients except sender
 
socket.broadcast.to('game').emit('message', 'nice game'); //sending to all clients in 'game' room(channel) except sender
 
socket.to('game').emit('message', 'enjoy the game'); //sending to sender client, only if they are in 'game' room(channel)
 
socket.broadcast.to(socketid).emit('message', 'for your eyes only'); //sending to individual socketid
 
io.emit('message', "this is a test"); //sending to all clients, include sender
 
io.in('game').emit('message', 'cool game'); //sending to all clients in 'game' room(channel), include sender
 
io.of('myNamespace').emit('message', 'gg'); //sending to all clients in namespace 'myNamespace', include sender
 
socket.emit(); //send to all connected clients
 
socket.broadcast.emit(); //send to all connected clients except the one that sent the message
 
socket.on(); //event listener, can be called on client to execute on server
 
io.sockets.socket(); //for emiting to specific clients
 
io.sockets.emit(); //send to all connected clients (same as socket.emit)
 
io.sockets.on() ; //initial connection from a client.

 

webSocket에서 지원하지않는 다양한 상황을  한줄메소드로 구현이 가능하다! 

 

특히 채팅방처럼 Room을 만들어줘야하는경우는 매우 유용한 기술이다.

 

 

다음 포스팅은 이 Soket.io로 실제로 간단한 채팅방을 만들어보려고한다!