이번 포스트에서는 SocketIO를 이용해 실시간 채팅 사이트를 만들고, 실제 웹사이트 배포까지 하는 과정을 다루어보겠습니다.
먼저 완성된 웹사이트의 작동 화면은 다음과 같습니다.
HTTP vs WebSocket
모두들 HTTP에 대해서는 많이 들어보셨을 것입니다.
우리가 인터넷 주소 맨 앞에 작성하는 'http'는 클라이언트(우리)가 웹 서버에 요청을 보내고, 서버가 응답을 보내는 하나의 정해진 통신 규칙입니다.
우리가 한글을 사용하는 것과 같이 http라는 프로토콜에 따라 서버에 요청을 보내고 웹 페이지를 받아와서 우리가 화면을 볼 수 있는 것입니다.
WebSocket은 HTTP와 비교되는 개념입니다.
HTTP에서 페이지가 업데이트 되려면 클릭을 하거나 페이지를 이동하는 등 새로운 '요청'을 보내야 합니다.
하지만 WebSocket은 지속적으로 연결을 유지하는 규칙을 가지고 있기 때문에, 실시간으로 데이터를 주고받을 수 있습니다.
예를 들어 채팅을 구현했다고 가정해 봅시다.
HTTP 통신으로 새로운 채팅이 왔는지 확인을 하기 위해서는, 페이지를 새로고침해야 합니다.
하지만 WebSocket으로 구현된 채팅의 경우에는 페이지를 띄워놓기만 해도 채팅이 업데이트 될 수 있습니다.
SocketIO란?
SockeIO는 WebSocket 기능을 쉽게 구현할 수 있게 해주는 JavaScript 라이브러리입니다.
WebSocket 통신에 필요한 기능들이 많이 구현되어 있어서 쉽게 가져다 쓸 수 있습니다.
또한 백엔드와 프론트엔드 사이에서 호출할 이벤트의 이름들을 직접 정의하고 사용할 수 있다는 점, 함수를 포함한 다양한 객체들을 쉽게 주고받을 수 있다는 점이 매우 큰 장점입니다.
코드 작성하기
작성된 전체 코드는 아래의 Github 프로젝트 레포지토리에 있습니다.
전체적인 코드는 노마드코더의 '줌 클론코딩' 코스를 통해 학습하면서 작성했고, 그 이후로 필요한 기능들은 스스로 코딩하여 추가하였습니다!
아직 코드를 정리하지 않아서 코드 순서를 한눈에 보기 쉽지 않지만, 코드의 양이 크게 많지는 않습니다.
GitHub - yeohj0710/SocketIO-practice: A project for practicing SocketIO
A project for practicing SocketIO. Contribute to yeohj0710/SocketIO-practice development by creating an account on GitHub.
github.com
실제로 코드를 작성한 파일은 server.js, app.js, home.pug 3개뿐이고 그마저도 다 합쳐서 300줄 이내이므로, SocketIO가 얼마나 간편한 라이브러리인지 알 수 있습니다.
핵심 기능은 io().on(이벤트명, 객체) 함수라고 생각합니다.
이 함수를 이용하면 위에서 언급한대로 이벤트의 이름을 정의하고, 프론트엔드와 백엔드 사이에서 이벤트를 발생시키고 다양한 객체를 실시간으로 전송할 수 있습니다.
로컬에서 프로젝트 빌드하기
코드 작성이 끝났으면 이제 프로젝트를 빌드해 주어야 합니다.
빌드 명령어 'build'와 app 시작 명령어 'start'를 다음과 같이 정의해 줍니다.
그 다음 두 명령어를 각각 실행해서 build와 start가 잘 작동하는지 확인해 줍니다.
build 명령어 실행 후에는 최적화된 자바스크립트 코드가 build 폴더에 들어가 있어야 하고,
start 명령어를 실행하면 build 명령어를 통해 빌드된 프로젝트가 정상적으로 실행이 되어야합니다.
실제 웹사이트로 배포하기 (Koyeb 이용)
코드가 로컬에서 제대로 작동하는 것을 확인했으면 이제 실제 웹사이트 링크로 배포가 가능합니다.
원래는 배포에 Heroku를 사용했는데, 유료로 전환된 관계로 대체할만한 플랫폼을 찾은 끝에 Koyeb을 사용합니다.
Koyeb의 장점은 당연히 무료이고, 신용카드 등록을 하지 않을 뿐더러(즉 사이트가 공격을 받더라도 자동결제 될 일이 없다는 것이죠), 배포가 어렵지 않습니다.
Koyeb에 회원가입을 하고, Github에 프로젝트를 업로드한 뒤 github 계정 권한을 받아 해당 프로젝트를 Koyeb과 연결해 줍니다.
Settings 탭에서 위와 같이 npm 명령어를 똑같이 맞춰줍니다.
그래야 Koyeb 서버에서 빌드 후 app을 시작할 수 있습니다.
Build 완료 후 프로젝트 실행이 정상적으로 완료되면 위와 같이 Active 표시가 뜹니다.
그러면 Public URL을 통해 실제로 외부에서 사이트에 접속이 가능한지 확인할 수 있습니다.
사이트 배포가 성공적으로 완료되어 정상적으로 작동하는 것을 확인할 수 있습니다.