Angular と Socket.io を使用してリアルタイム アプリを作成するチュートリアル

このチュートリアルの全ソース コードはこちらでご覧になれます: elliotforbes/angular-socket-io-example

このチュートリアルでは、Angular 4 と Socket.io ライブラリを使用してリアルタイム アプリを作成する方法を見ていくことになります。 以前のチュートリアルで、生の Web ソケットを利用し、RxJS ライブラリを使用して observable に変換する方法について説明しましたが、それはこちらでご覧になれます。

npm install socket.io-clientnpm install @types/socket.io-client

Websocket を RxJS Subjects に変換する

RxJS Subjects は Observable と Observer の両方があります。 このシナリオでは、Websocket サービスとチャット サービスの両方を作成します。Websocket サービスはソケットとの直接通信を処理し、チャット サービスは他のコンポーネントが簡単に相互作用できるシンプルなインターフェイスを公開します。sendMsg() 関数のみを備えています。

チャット サービスの使用

新しく作成したチャット サービスの使用を開始する場合、次のようになります。 app.module.ts プロバイダー配列で新しく作成したサービスを指定している限り、socket.io ベースの Web サーバーからメッセージを送受信できるアプリケーションを作成することができます。 7539> という名前の新しいファイルを作成し、次のコードを追加します。

このコードを実行する前に、適切なノードの依存関係がインストールされていることを確認する必要があります。 これを行うには、npm i express http socket.io と入力します。 このサーバーを実行するには、node app.js と入力します。

結論

これを実行すると、次のような出力が Web ソケット サーバーに表示されることが確認できます。 まず5000番ポートで起動し、Angularクライアントを開くとuser connectedにログが記録され、クライアントからメッセージを送信するたびに、そのメッセージの内容が以下のように出力されます：

 $ node app.jsstarted on port 5000user connectedMessage Received: "Test Message"Message Received: "Test Message"