Node-RED を使用してリアルタイムのチャット・アプリケーションを 5 分で作成する
Node-RED という、IBM Emerging Technology チームが作成した新しいオープンソース・ツールでは、さまざまなブロックをつなぎ合わせるだけでアプリケーションを構築することができます。これらのブロックは、ハードウェア・デバイスであったり、Web API、またはオンライン・サービスであったりすることもあります。
“IBM Cloud を使用して、Node-RED 上でリアルタイムのチャット・アプリケーションをたった 5 分で作成する方法を紹介します。”
IBM Cloud 上で新しい Node-RED ランタイムを作成するのは簡単です。数回クリックするだけで、新しいアプリケーションを作成するための作業環境を用意することができます。この記事では、IBM Cloud を使用して、Node-RED 上でリアルタイムのチャット・アプリケーションをわずか数分で作成する方法を説明します。
必要なもの
- IBM Cloudライト・アカウント
- HTML、CSS、および JavaScript の基礎知識。必要なコードはすべて用意してありますが、これらのテクノロジーの基本を把握していると、詳細を理解しやすくなります。
ステップ 1. Node-RED アプリケーションを作成する
- IBM Cloud アカウントにログインし、Node-RED ボイラープレートを新規に作成します。
- アプリケーションに名前を付けて、「CREATE (作成)」をクリックします。
- IBM Cloud ダッシュボードから、新しく作成したアプリケーションの「Overview (概要)」ページにナビゲートし、「Visit... (アクセス...)」リンクをクリックして Node-RED のメイン・ページを起動します。アプリケーションが起動するまでには、しばらく時間がかかる場合があります。起動して使用できる状態になると、緑色の丸と「Running (実行中)」というテキストが表示されます。
- 初めてサイトにアクセスするときは、基本的な構成を行うよう求められます。それが完了した後、「Go to your Node-RED flow editor (Node-NED フロー・エディターを表示)」をクリックすると、Node-NED フロー・エディターが開きます。
- 空白のフローが表示されるので、ここで、アプリケーションの構築を開始することができます。Node-RED を使用する際には、このグラフィカル・エディター・インターフェースを使用して必要なブロックをつなぎ合わせるという方法で、アプリケーションを構築します。左のメニューに表示されているブロックを画面中央のワークスペースにドラッグ・アンド・ドロップし、ブロック同士を接続するだけで、新しいフローを作成することができます。
ステップ 2. コードをインポートする
JSON フォーマットを使用して、あらゆる Node-RED アプリケーションのインポートおよびエクスポートを実行することができます。早速、このチャット・アプリケーションを新しいシートにインポートしましょう。
- プロジェクト・リポジトリーにアクセスして、
nodechat.jsonファイルを開きます。 - ファイルの内容全体をコピーしてから、ブラウザーの Node-RED に戻ります。
- 右上隅のメニュー・ボタンをクリックして、「
Import from…(インポート…)」 > 「Clipboard…(クリップボード…)」の順に選択します。
- リポジトリーからコピーしたファイルの内容を貼り付けて、「Import (インポート)」をクリックします。
- 空白のシート上のどこかをクリックして、インポートされたノードを追加します。
各ブロックの役割については、この記事の後のほうで説明することとし、次はアプリケーションをデプロイして実行します。
ステップ 3. アプリケーションをデプロイして実行する
- メニュー・ボタンの隣にある赤い「Deploy (デプロイ)」ボタンをクリックして、アプリケーションを有効にします。
- 最上部に、デプロイに成功したことを通知するメッセージが表示されて、ノードに示されていた青色のドットが消えているはずです。青色のドットは、ノードに変更が加えられたものの、まだデプロイされていないことを意味します。
- ブラウザーで新しいタブを開き、
http://[app name].mybluemix.net/chatにアクセスします。[app name]は、アプリケーションに付けた名前に変更してください。
- これで、チャット・アプリケーションが実行中の状態になったので、左側のフィールドにユーザー名を入力し、右側のボックスにメッセージを書き込んでから、「Send (送信)」をクリックします。
- 2 つ目のウィンドウでチャット・アプリケーションを開くか、リンクを友達に送信してチャットを楽しんでください。メッセージが瞬時に返されるはずです。
ステップ 4. コードの説明 (オプション)
このセクションでは、このアプリケーションのコードについて詳細に説明します。このセクションを読み飛ばしても構いませんが、このセクションを読んで、アプリケーションがどのように構築されているのかをよく理解し、Node-RED の仕組みについて詳しく学ぶことをお勧めします。
- 最初のセクションには、次の 3 つのノードがあります。
WebSocket inFunctionWebSocket out
これらのブロックは、通信チャネルを作成し、WebSocket プロトコルを使用してリアルタイムでメッセージを処理するためのものです。
Functionブロックは極めて単純で、WebSocket に接続している全クライアントにメッセージがブロードキャストされるように、msgオブジェクトから_sessionの値を削除するだけです。
- 2 番目のフローは、クライアント・サイドのコードを扱います。このフローには、
HTTP inノード、HTML ページをレンダリングするTemplate、レスポンス用のHTTP outノードがあります。
HTTP inノード ([get] /chat) は、GET リクエストを受信するエンドポイントを作成し、これらのリクエストをTemplateに転送します。HTTP outノードは、テンプレートのレンダリング後にユーザーに送り返す、適切なレスポンスを作成します。 - テンプレートは、ページ構造、メッセージ処理、ビジュアルという 3 つの部分に分けられます。
- ページ構造の部分は、すべてのチャット・メッセージを受け取る
divと、メッセージを送信するためのフィールドを保持するフッターが含まれるだけの単純な HTML ページです。
- メッセージ処理は、JavaScript を使用して行われます。まず始めに、Node-RED を使用して作成した WebSocket エンドポイントへの接続をオープンします。
次に、サーバーとの接続のオープンまたはクローズ、新規メッセージの受信といった、各イベントを処理するための
wsオブジェクトのイベント・ハンドラーを登録します。
- ユーザーがメッセージを送信したら、そのユーザー名とメッセージを設定したオブジェクトを作成します。そして、
wsオブジェクトに含まれるsendメソッドを使用して、作成したオブジェクトをサーバーに送信します。
- ビジュアルの部分には、単純な CSS ルール (この記事では説明しません) が使用されます。
まとめ
Node-RED には、コードの開発を簡単に行えるようにするために、すぐに接続して使用できる一連のノードが用意されています。この記事で説明したように、ほんのわずかな作業で、プロジェクトで使用するサーバーを IBM Cloud にセットアップすることができます。この単純なチャット・アプリケーションは、さらに新しいノードを追加し、新しいフローを作成して既存のフローに接続することで、さらに機能を強化することができます。