이미지를 포함한 채팅

마지막으로 GIF 이미지를 전송하는 것을 구현해보겠습니다. 

프론트 화면에서 이미지를 선택해 업로드하는 이벤트 리스너를 추가합니다. 

POST /room/{{room._id}}/gif 주소에 상응하는 라우터를 작성합니다. 

9장의 이미지 업로드와 방식이 같습니다. 

uploads 폴더에 사진을 저장하고, 파일명에 타임스탬프(Date.now())를 붙이고, 사이즈를 제한했습니다. 

파일이 업로드된 후에는 내용을 데이터베이스에 저장하고, 방 안에 있는 모든 소켓에 채팅 데이터를 보냅니다. 

이제 이미지를 제공할 uploads 폴더를 express.static 미들웨어로 연결해봅시다.

핵심 정리:

• 웹 소켓과 HTTP는 같은 포트를 사용할 수 있으므로 따로 포트를 설정할 필요가 없습니다.
• 웹 소켓은 양방향 통신이므로 서버 뿐만 아니라 프론트 엔드 쪽 스크립트도 사용할 수 있습니다.
• Socket.IO를 사용하면 웹 소켓을 지원하지 않는 브라우저에서까지 실시간 통신을 구현할 수 있습니다.
• Socket.IO 네임스페이스와 방 구분을 통해 실시간 데이터를 필요한 사용자에게만 보낼 수 있습니다.
• app.set('io', io)로 소켓 객체를 익스프레스와 연결하고, req.app.get('io')로 라우터에서 소켓 객체를 가져오는 방식을 기억해둡시다.
• 소켓 통신과 함께 데이터베이스 조작이 필요한 경우, 소켓만으로 해결하기보다는 HTTP 라우터를 거치는 것이 좋습니다.