Pusher 를 이용한 실시간 채팅 웹앱 만들기 #1 (w/ Laravel, Nuxt)

Pusher Logo

`Pusher`?

채팅 서비스나 구글 Docs의 동시 문서편집 같이 웹 페이지를 통해 클라이언트들이 실시간으로 상호작용을 해야 하는 기능을 깔끔하게 개발하려면 웹소켓을 사용해야 합니다.

웹소켓을 사용하려면, 직접 웹소켓 서버를 구현해야 하는데 이 과정이 복잡하고 최종적으로 완성할 서비스에 비해 웹소켓 구현만을 위한 개발시간이 과도하게 사용될 수 있습니다.

Pusher는 이러한 상황에서 서버-클라이언트 간 실시간 통신에 필요한 기능들을 미리 구현해 API와 플랫폼/언어별 라이브러리로 제공하는 Real-Time Communication 솔루션입니다.

이 Pusher를 사용하면 실시간 통신이 필요한 기능들을 내 서비스의 비즈니스 로직만 신경 써서 쉽고 간단하게 구현할 수 있습니다.

이번 시리즈에서는 Laravel, Vue, 그리고 Pusher를 사용해서 실시간 채팅 서비스를 만들어보겠습니다.

백엔드 프레임워크로는 러닝 커브가 상대적으로 완만하고 빌트인 기능이 비교적 많은 Laravel을 쓰고, 프론트엔드 프레임워크는 Vue와 Nuxt를 사용하겠습니다. 기타 사용하는 라이브러리들은 포스팅 하단에 목록으로 정리해두겠습니다.

경고

본 시리즈에서는 Nuxt 2, Laravel 8을 사용하였습니다.

이후 버전을 사용하는 경우 API가 달라질 수 있습니다.

처음에는 '채팅 프로그램' 의 가장 필수적인 기능들만 개발하여 서버에 배포해보고, 점차 기능들을 추가해나가며 완성형의 채팅 서비스를 만들 예정입니다.

이 과정에서 배포 방식도 Container와 Kubernetes를 사용하는 방식으로 점차 바꾸어보고, 동시에 마이크로서비스 구조로 바꾸어보겠습니다.