서울시 Sesac에서 풀스택 실무프로젝트 과정을 들으며 진행했던 팀 프로젝트 [PocaZ], 아이돌 포토카드 거래 플랫폼에서 구현했던 socket.IO를 이용한 채팅 연결을 상세히 기록해보고자 한다.

Live Demo

PocaZ, 아이돌 포토카드 거래 플랫폼

프로젝트 구현 전에 통신의 개념을 먼저 알아보도록 하자

데이터 통신🫡

네트워크를 통해 서버로부터 데이터를 가져오기 위한 통신으로는 크게 HTTP 통신과 Socket 통신 2가지가 있다.

HTTP : 단방향 통신

(HyperText Transfer Protocol) HTTP protocol에서 client 와 server 는 stateless

초기 웹의 탄생 목적은 문서 전달과 하이퍼링크를 통한 문서 연결이 전부였기 때문에 HTTP 프로토콜이 완벽히 그 목적에 부합했지만, 시대가 변하고 웹에 동적인 표현과 상호작용이 더욱 요구되며 전이중 통신, 즉 쌍방 통신의 새로운 기술이 필요하게 되었다.

• server는 너를 기억하지 못하고, 너에게 답해줄 수만 있다.
• Polling 이나 Long Polling 등의 방식을 실시간에 준하는 방식을 구현할 수 있음.

기존 HTTP 프로토콜은 서버와 클라이언트 사이의 연결이 유지 되지 않는다. 보다 쉽게 상호작용하는 웹 페이지를 만들려면 브라우저와 웹 서버 사이에 더 자유로운 양방향 메세지 송수신이 필요하다.

Websocket : 양방향 통신

HTTP를 바탕으로 Handshake 과정을 통해 연결이 수립되면 응용 프로그램 계층 프로토콜이 HTTP에서 웹 소켓으로 업그레이드가 된다. 👍업그레이드가 되면 HTTP는 사용되지 않고, 웹 소켓 연결이 닫힐 때까지 두 끝 점에서 웹 소켓 프로토콜을 사용하여 데이터를 주고 받게 된다. 웹 소켓 연결은 주로 새로고침이나 창 닫기 등의 이벤트 발생 시 닫힌다.

ws protocol에서는 request를 보낸다. accept 하게 되면 연결이 지속된 상태 connection !!!! 전화통화 같은 것

browser(client)와 server 사이에 bi-directional(양 방향)한 연결이 있어서 서로에게 바로 갈 수 있는 길이 있다. 웹 소켓 은 클라이언트와 서버간 접속이 유지되며 요청과 응답 개념이 아닌 서로 데이터를 주고 받는 형식이다.

근데 websocket이 socketIO랑 다른건가?

socketIO는 websocket의 부가기능이 아니라고요!

Socket.IO는 node.js 기반으로 만들어진 기술로, 거의 모든 웹 브라우저와 모바일 장치를 지원하는 실시간 웹 애플리케이션 지원 라이브러리이다. 다시 말해, Socket.IO는 자바스크립트를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술이다. 웹 브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용한다.

특장점 : 호환성👌

실시간, 양방향, event 기반의 통신

HTML5 웹소켓은 매우 유용한 기술이지만, 브라우저별로 지원하는 웹소켓 버전이 다르며 오래된 브라우저의 경우 아예 지원하지 않는다. 따라서 자바스크립트를 이용하여 브라우저에 상관없이 실시간 웹을 구현할 수 있는 Socket.IO를 좀 더 많이 사용하고 있다.

SocketIO는 websocket을 사용하지만, websocket을 지원하지 않으면 다른 것을 사용한다.

• 자동재연결 기능 ( 크로스 브라우징 )
• 신뢰성이 높음
• string 이외의 것들도 보낼 수 있음. 예를 들어 object

위와 같은 이유로 socket.io 라이브러리를 통해 1:1 채팅을 구현하기로 마음먹었다.

채팅 서비스 설계

1. 1:1 채팅만 지원
2. 웹 앱의 웹뷰 형태로 지원
3. 트래픽 규모 (DAU 1,000명 이내)
4. 채팅을 join 하는 경로 2곳

1. 장터 - detail 에서 채팅으로 연결하기 기존 채팅이 있는 경우 / 기존 채팅이 없는 경우
2. 채팅리스트에서 기존채팅 연결하기

5. 채팅 이력 mysql DB 보관

다음 기록에서는 채팅 서비스 설계를 가지고 실제로 구현해보는 과정을 만들어보자