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 in
Function
WebSocket 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 にセットアップすることができます。この単純なチャット・アプリケーションは、さらに新しいノードを追加し、新しいフローを作成して既存のフローに接続することで、さらに機能を強化することができます。