12장 웹 소켓으로 실시간 데이터 전송하기

[yellow-jam]

1. 웹 소켓 이해하기
2. ws 모듈로 웹 소켓 사용하기
3. Socket.IO 사용하기
4. 실시간 GIF 채팅방 만들기
5. 미들웨어와 소켓 연결하기
6. 채팅 구현하기
7. 프로젝트 마무리하기

[yellow-jam]

1. 웹 소켓 이해하기

• 폴링: 클라이언트->서버 단방향 통신. 서버에 새로운 업데이트가 있는지 확인 요정, 있다면 새로운 내용 가져옴
• 웹 소켓: 양방향 통신! HTML5의 등장 이후 지속적으로 연결된 라인을 통해 실시간으로 데이터를 주고받음. HTTP 프로토콜과 포트를 공유할 수 있으며, 성능도 매우 개선됨.
• 서버센트 이벤트(SSE): 서버->클라이언트 단방향 통신. Event Source 객체 사용, 처음 한 번만 연결하면 서버가 클라이언트에 지속적으로 데이터를 보냄 (예: 주식 차트, SNS에서 새 게시물 가져오기)
• Socket.IO 라이브러리: 웹 소켓을 편하게 사용할 수 있도록 도와줌. 웹 소켓을 지원하지 않는 브라우저(IE9)에서는 알아서 웹 소켓 대신 폴링 방식을 사용해 실시간 데이터 전송을 가능하게 함.

이번 장에서는

• 클라이언트 측에서 웹 소켓 연결이 끊겼다면 자동으로 재연결을 시도하고, 채팅방을 쉽게 구현할 수 있도록 메서드를 구현함

[yellow-jam]

2. ws 모듈로 웹 소켓 사용하기