Redis, Websockets 및 Vue.js를 사용하여 알림 서비스를 만드는 방법

웹 애플리케이션에서 탐색할 때 실시간 알림을 받는 것은 매우 일반적입니다. 알림은 채팅 봇, 경고 시스템에서 오거나 앱이 한 명 이상의 사용자에게 푸시하는 이벤트에 의해 트리거될 수 있습니다. 알림의 출처가 무엇이든 개발자는 점점 더 Redis를 사용하여 알림 서비스를 만들고 있습니다.

마이크로서비스 아키텍처로 구동되는 최신 애플리케이션에서 Redis는 종종 단순 캐시와 기본 데이터베이스로 사용됩니다. 그러나 잘 알려진 Pub/Sub(Publish/Subscribe) 명령을 사용하는 경량 이벤트 시스템인 Redis Streams로 구동되는 영구 메시징 계층을 사용하는 서비스 간의 통신 계층으로도 사용됩니다.

이 블로그 게시물에서는 Vue.js, Node.js 및 WebSockets로 개발된 웹 애플리케이션에 메시지를 보내기 위해 Redis Pub/Sub를 사용하여 작은 알림 서비스를 만드는 것이 얼마나 쉬운지 보여줄 것입니다.

전제조건

이 데모 서비스는 다음을 사용합니다:

• 도커
• Redis 5.0.x 이상(이 데모에서는 Redis Docker 컨테이너 사용)
• Node 패키지 관리자(npm)가 있는 Node.js 10.x
• 개발 중 애플리케이션을 자동으로 다시 시작하는 간단한 도구인 nodemon
• 뷰 CLI

Redis 서버 시작

Redis 인스턴스가 아직 실행되지 않은 경우 Docker를 사용하여 시작할 수 있습니다. 터미널에서 다음 명령을 실행하십시오:

> docker run -it --rm --name redis-server -p 6379:6379 redis

이제 Redis가 실행되고 연결을 수락할 준비가 되었습니다.

Node.js로 WebSocket 서버 만들기

적절한 구조로 프로젝트를 구성하려면 터미널을 열고 다음 명령을 입력하십시오.

npm을 사용하여 새 Node.js 프로젝트를 만듭니다. (-y 매개변수는 모든 값을 기본값으로 설정합니다) :

위의 마지막 명령은 WebSocket 및 Redis 종속성을 프로젝트에 추가합니다. 이제 코드를 작성할 준비가 되었습니다!

WebSocket 서버 작성

즐겨 사용하는 Node.js용 코드 편집기(저는 Visual Studio Code 사용)를 열고 “code .” 코드를 입력하기만 하면 됩니다. 현재 디렉토리를 엽니다. 편집기에서 server.js라는 새 파일을 만듭니다. .

이 간단한 Node.js 프로그램은 데모로 제한되며 다음에 중점을 둡니다.

• Redis에 연결(9행)
• “app:notifications”의 메시지 구독 채널(10행)
• WebSocket 서버 시작(13행)
• 사용자 클라이언트 연결 등록(16행)
• Redis 구독 이벤트 듣기(19행)
• 모든 WebSocket 클라이언트(21)에 메시지를 보냅니다.

5행과 6행은 단순히 Redis 서버 위치와 웹 소켓 서버에 사용할 포트를 구성하는 데 사용됩니다. 보시다시피 매우 간단합니다.

WebSocket 서버 실행

nodemon을 아직 설치하지 않은 경우 , 지금 설치하십시오. 그런 다음 다음 명령을 사용하여 WebSocket 서버를 시작합니다.

이제 알림을 수신하고 사용자에게 인쇄할 프런트엔드를 만들어 보겠습니다.

Vue.js로 프론트엔드 만들기

새 터미널을 열고 알림에서 다음 명령을 실행합니다. 디렉토리:

Vue CLI 도구를 아직 설치하지 않았다면 지금 npm install -g @vue/cli 명령을 사용하여 설치하세요. .

이 명령은 실행 및 확장할 준비가 된 새 Vue 프로젝트를 생성합니다.

이 데모를 위해 설치할 마지막 패키지는 BootstrapVue로, 인기 있는 Bootstrap 프레임워크의 CSS 라이브러리와 구성 요소를 쉽게 사용할 수 있습니다.

즐겨 사용하는 코드 편집기에서 웹 클라이언트 디렉토리를 연 다음 새로 생성된 Vue 애플리케이션을 시작합니다.

마지막 명령은 페이지를 제공할 Vue 개발 서버를 시작하고 페이지를 변경할 때 페이지를 자동으로 다시 로드합니다.

브라우저를 열고 https://localhost:8080으로 이동합니다. 기본 Vue 시작 페이지가 표시되어야 하는 위치:

프런트엔드에 WebSocket 추가

Vue 프레임워크는 매우 간단하며 이 게시물에서는 코드를 최대한 단순하게 유지합니다. 디렉토리 구조를 빠르게 살펴보겠습니다.

├── README.md
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    └── main.js

루트 수준의 파일(babel.config.js , 패키지.json , 패키지 잠금.json , 노드_모듈 )는 프로젝트를 구성하는 데 사용됩니다. 적어도 현재로서는 가장 흥미로운 부분은 src에 있습니다. 디렉토리:

• main.js file은 모든 공통 요소를 로드하고 App.vue를 호출하는 애플리케이션의 기본 JavaScript 파일입니다. 메인 화면. 나중에 Bootstrap 지원을 추가하도록 수정하겠습니다.
• App.vue 특정 페이지 또는 템플릿에 대한 HTML, CSS 및 JavaScript에 포함된 파일입니다. 애플리케이션의 진입점으로 이 부분은 기본적으로 모든 화면에서 공유되므로 이 파일에 알림 클라이언트 부분을 작성하는 것이 좋습니다.

public/index.html DOM이 로드될 정적 진입점입니다. 보시면

{{message}} 표기법을 사용하여 Vue가 다음 블록에서 정의할 메시지 변수의 내용을 인쇄하도록 지정합니다.