Redis、Websocket、Vue.jsを使用して通知サービスを作成する方法

Webアプリケーションでナビゲートするときに、リアルタイムの通知を受け取ることは非常に一般的です。通知は、チャットボット、アラートシステムから送信されるか、アプリが1人以上のユーザーにプッシュするイベントによってトリガーされる可能性があります。通知のソースが何であれ、開発者はますますRedisを使用して通知サービスを作成しています。

マイクロサービスアーキテクチャを利用した最新のアプリケーションでは、Redisは単純なキャッシュおよびプライマリデータベースとしてよく使用されます。ただし、有名なPub / Sub（パブリッシュ/サブスクライブ）コマンドを使用する軽量のイベントシステムであるRedisStreamsを利用した永続的なメッセージングレイヤーを使用するサービス間の通信レイヤーとしても使用されます。

このブログ投稿では、Redis Pub / Subを使用して、Vue.js、Node.js、およびWebSocketsで開発されたWebアプリケーションにメッセージを送信する小さな通知サービスを簡単に作成できることを示します。

前提条件

このデモサービスは以下を使用します：

• Docker
• Redis 5.0.x以降（このデモではRedis Dockerコンテナを使用）
• Node.js 10.xとノードパッケージマネージャー（npm）
• nodemon、開発中にアプリケーションを自動的に再起動するシンプルなツール
• Vue 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サーバーに使用するポートを構成するために使用されています。ご覧のとおり、非常に簡単です。

WebSocketサーバーの実行

nodemonをまだインストールしていない場合 、今すぐインストールしてください。次に、次のコマンドを使用してWebSocketサーバーを起動します。

次に、通知を受信して​​ユーザーに印刷するフロントエンドを作成しましょう。

Vue.jsを使用したフロントエンドの作成

新しいターミナルを開き、通知から次のコマンドを実行します ディレクトリ：

Vue CLIツールをまだインストールしていない場合は、コマンド npm install -g @ vue / cliを使用してインストールします。 。

このコマンドは、実行および拡張の準備ができている新しいVueプロジェクトを作成します。

このデモ用にインストールする最後のパッケージはBootstrapVueです。これにより、人気のあるBootstrapフレームワークのCSSライブラリとコンポーネントを簡単に使用できます。

お気に入りのコードエディタでweb-clientディレクトリを開き、新しく作成したVueアプリケーションを起動します。

最後のコマンドは、ページを提供するVue開発サーバーを起動し、ページを変更すると自動的にページを再読み込みします。

ブラウザを開き、http：// 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 、 package.json 、 package-lock.json 、 node_modules ）はプロジェクトの構成に使用されます。少なくとも今のところ、最も興味深い部分は srcにあります ディレクトリ：

• main.js fileは、アプリケーションのメインJavaScriptファイルであり、すべての一般的な要素をロードして、 App.vueを呼び出します。 メインスクリーン。後で変更して、ブートストラップサポートを追加します。
• App.vue 特定のページまたはテンプレートのHTML、CSS、およびJavaScriptに含まれるファイルです。アプリケーションのエントリポイントとして、この部分はデフォルトですべての画面で共有されるため、このファイルに通知クライアントの部分を書き込むのに適した場所です。

public / index.html DOMがロードされる静的エントリポイントです。これを見ると、

{{message}}表記を使用して、次のブロックで定義するメッセージ変数のコンテンツを出力するようにVueに指示しています。