AngularとSocket.IOによるチャットアプリケーション

BY admin
|

はじめに

RxJS, Angular, express (Node.js) & Socket.IO を使用して、チャットアプリケーションを作成する予定です。 このシナリオでは、RxJSがどのように役立つかを確認することができます。 物事をスムーズかつ簡単にするために、Angular CLIを使用して基本的なクライアント構造を生成し、最もシンプルに動作するAngularアプリケーションの定型文を作成します。 バックエンドでは、Node.jsとexpress、そしてSocket.IOを使用する予定です。 その理由は、Socket.IOはセットアップと動作が非常に簡単だからです。 さらに、サーバー側とクライアント側の両方のライブラリが提供されています。

RxJS を使用してチャット メッセージを処理する部分に直接移動したい場合は、ここをクリックしてください。IO サーバーのセットアップ

Angular CLI をインストールしていない場合は、簡単にインストールできます。

npm i -g @angular/cli

フォルダ構造のセットアップ

整理するために、この小さなプロジェクトに新しい rxjs-chat フォルダを作成することになります。 これは、Angular および Socket.IO アプリのルート フォルダとして機能します。

Angular CLI を使用して、基本的な Angular アプリを作成しましょう。 プロジェクトフォルダでお気に入りのターミナルを起動し、次のコマンドを実行します:

ng new rxjs-chat

少し時間をおいてください。 基本構造の作成とnpmパッケージのインストールが完了したら、新しく作成したAngularプロジェクトフォルダをclientにリネームします。 その後、同じルートフォルダに、Socket.IOサーバ用にserverフォルダを作成します。 これで rxjs-chat フォルダ内に 2 つのフォルダができました:

  • client – Angular クライアントアプリ
  • server – Node の Socket.IO サーバ
Installing local packages

server フォルダに package.を生成します。

npm init -y

その後、依存関係をインストールして package.json に保存します。

npm install express socket.io --save

同じフォルダに、サーバー アプリ用の index.js ファイルを作成します。 ファイルの内容は次のとおりです。

Express のインスタンスを作成し、変数 app に格納します。 その後、httpモジュールでサーバーを作成します。 そして、expressをhttp.Server()メソッドに渡す。 Expressはサーバへのリクエストを処理するハンドラとして機能する。

次の2行では、http server:

let socketIO = require('socket.io');

let io = socketIO(server);

その後、ソケットIOの接続イベントを待ち、ユーザーがサーバーに接続するとログを出力します。 最後に、サーバーを起動し、指定されたポート（この例ではポート 3000）をリッスンします。
server フォルダで以下を実行して、実際にサーバーを起動しましょう。 “ポートで開始しました。 3000”.

Connecting to Socket.IO

ポート3000でサーバーが動作していることが確認できました。 それでは、Angular アプリからサーバーに接続する方法を見てみましょう。 そのためには、Socket.IOクライアントライブラリをインストールする必要があります。 クライアント フォルダで次のコマンドを実行します:

npm install socket.io-client --save

ついでに Angular CLI を使用して Angular アプリを実行します:

ng serve -o

さて、アプリが実行されました。 デフォルトのブラウザーで localhost を指す新しいタブが開かれたことが確認できます。

Creating service for communication with the server

これを chat.service.ts app.chat.service.ts と名付け、src フォルダに配置します。

Adding the service to module providers

Also, add our ChatService to providers list inside the AppModule in app.module.ts file:

Injecting the service in our component

Finally, we will be import and use the service inside our app.component.ts.TS ファイル:

import { ChatService } from './app.chat.service';

そして、コンストラクターで ChatService をインジェクトします:

constructor(chatService: ChatService) { }

その結果、次のファイルが作成されました。

変更を保存した後、すべてが予想どおりに進んでいれば、ノード アプリを起動したターミナルに「ユーザー接続」メッセージが表示されるはずです。

Socket.IO イベントでメッセージを送信する。

これを動作させるには、AppComponent から sendMessage() を使用する必要があります。

最後に、ユーザーに簡単なテキスト入力とボタンを提供し、ユーザーがメッセージを送信できるようにすることができます。

ChatService から発信される ‘new-message’ イベントをサーバー上でリッスンする必要があります。7125>

If you want to play around the code you can find it at my GitHub repo – rxjs-chat.

他のユーザーとのコミュニケーション

メッセージを他のユーザーに伝えるには、console.log(message) ‘new-message’ イベント コールバック内を io.emit(message):

The io.emit() do what does io?

ChatService を介してサーバーと通信してみましょう。 この目的のために、サービスに新しいメソッドを追加します – getMessages. このメソッドは、Observable.create()メソッドで作成するObservableを返します。

その後、AppComponent からこの Observable を購読します。

新しい messages 配列を作成し、サーバーから受け取ったメッセージを格納します。 これらのメッセージは、テンプレートに表示する必要があります。 これは ngFor の完璧なユースケースです。