目次


Node-RED を使用してリアルタイムのチャット・アプリケーションを 5 分で作成する

Comments

Node-RED という、IBM Emerging Technology チームが作成した新しいオープンソース・ツールでは、さまざまなブロックをつなぎ合わせるだけでアプリケーションを構築することができます。これらのブロックは、ハードウェア・デバイスであったり、Web API、またはオンライン・サービスであったりすることもあります。

Bluemix を使用して、Node-RED 上でリアルタイムのチャット・アプリケーションをたった 5 分で作成する方法を紹介します。

IBM Bluemix 上で新しい Node-RED ランタイムを作成するのは簡単です。数回クリックするだけで、新しいアプリケーションを作成するための作業環境を用意することができます。この記事では、Bluemix を使用して、Node-RED 上でリアルタイムのチャット・アプリケーションをわずか数分で作成する方法を説明します。

アプリを実行するコードを入手する

必要なもの

  • Bluemix アカウント
  • HTML、CSS、および JavaScript の基礎知識。必要なコードはすべて用意してありますが、これらのテクノロジーの基本を把握していると、詳細を理解しやすくなります。

ステップ 1. Node-RED アプリケーションを作成する

  1. IBM Bluemix アカウントにログインし、Node-RED ボイラープレートを新規に作成します。
  2. アプリケーションに名前を付けて、「CREATE (作成)」をクリックします。Node-RED アプリケーションに名前を付ける
    Node-RED アプリケーションに名前を付ける
  3. Bluemix ダッシュボード上で、新しく作成したアプリケーションの URL へナビゲートして、Node-RED のメイン・ページを起動します。Bluemix 上で Node-RED アプリケーションの URL へナビゲートして表示された画面
    Bluemix 上で Node-RED アプリケーションの URL へナビゲートして表示された画面
  4. 「Go to your Node-RED flow editor (Node-RED フロー・エディターを開く)」をクリックします。Node-RED のメイン・ページ
    Node-RED のメイン・ページ
  5. 空白のシートが表示されるので、このシート上でアプリケーションの構築を開始することができます。Node-RED を使用する際には、このグラフィカル・エディター・インターフェースを使用して必要なブロックをつなぎ合わせるという方法で、アプリケーションを構築します。左のメニューに表示されているブロックを画面中央のワークスペースにドラッグ・アンド・ドロップし、ブロック同士を接続するだけで、新しいフローを作成することができます。Node-RED 上の空白のシート
    Node-RED 上の空白のシート

ステップ 2. コードをインポートする

JSON フォーマットを使用して、あらゆる Node-RED アプリケーションのインポートおよびエクスポートを実行することができます。早速、このチャット・アプリケーションを新しいシートにインポートしましょう。

  1. IBM DevOps Services のプロジェクト・リポジトリーにアクセスして、nodechat.json ファイルを開きます。
  2. ファイルの内容全体をコピーしてから、ブラウザーの Node-RED に戻ります。
  3. 右上隅のメニュー・ボタンをクリックして、「Import from… (インポート…)」 > 「Clipboard… (クリップボード…)」の順に選択します。Node-RED のインポート・メニュー
    Node-RED のインポート・メニュー
  4. リポジトリーからコピーしたファイルの内容を貼り付けて、「OK」をクリックします。】インポートするコードを貼り付ける領域
    】インポートするコードを貼り付ける領域
  5. 空白のシート上のどこかをクリックして、インポートされたノードを追加します。
    Node-RED 内でアプリケーションをインポートする
    Node-RED 内でアプリケーションをインポートする

各ブロックの役割については、この記事の後のほうで説明することとし、次はアプリケーションをデプロイして実行します。

ステップ 3. アプリケーションをデプロイして実行する

  1. メニュー・ボタンの隣にある赤い「Deploy (デプロイ)」ボタンをクリックして、アプリケーションを有効にします。
    Node-RED の「Deploy (デプロイ)」ボタン
    Node-RED の「Deploy (デプロイ)」ボタン
  2. 最上部に、デプロイに成功したことを通知するメッセージが表示されて、ノードに示されていた青色のドットが消えているはずです。青色のドットは、ノードに変更が加えられたものの、まだデプロイされていないことを意味します。
    成功メッセージ
    成功メッセージ
  3. ブラウザーで新しいタブを開き、http://[app name].mybluemix.net/chat にアクセスします。[app name] は、アプリケーションに付けた名前に変更してください。
    チャット・アプリケーションを実行する
    チャット・アプリケーションを実行する
  4. これで、チャット・アプリケーションが実行中の状態になったので、左側のフィールドにユーザー名を入力し、右側のボックスにメッセージを書き込んでから、「Send (送信)」をクリックします。
    チャット・アプリケーションでメッセージを送信する
    チャット・アプリケーションでメッセージを送信する
  5. 2 つ目のウィンドウでチャット・アプリケーションを開くか、リンクを友達に送信してチャットを楽しんでください。メッセージが瞬時に返されるはずです。
    複数のユーザー間でのリアルタイムの会話
    複数のユーザー間でのリアルタイムの会話

ステップ 4. コードの説明 (オプション)

このセクションでは、このアプリケーションのコードについて詳細に説明します。このセクションを読み飛ばしても構いませんが、このセクションを読んで、アプリケーションがどのように構築されているのかをよく理解し、Node-RED の仕組みについて詳しく学ぶことをお勧めします。

  1. 最初のセクションには、次の 3 つのノードがあります。
    • WebSocket in
    • Function
    • WebSocket out
    アプリケーションの 1 番目のフロー
    アプリケーションの 1 番目のフロー

    これらのブロックは、通信チャネルを作成し、WebSocket プロトコルを使用してリアルタイムでメッセージを処理するためのものです。Function ブロックは極めて単純で、WebSocket に接続している全クライアントにメッセージがブロードキャストされるように、msg オブジェクトから _session の値を削除するだけです。

    メッセージをブロードキャストするコード
  2. 2 番目のフローは、クライアント・サイドのコードを扱います。このフローには、HTTP in ノード、HTML ページをレンダリングする Template、レスポンス用の HTTP out ノードがあります。アプリケーションの 2 番目のフロー
    アプリケーションの 2 番目のフロー

    HTTP in ノード ([get] /chat) は、GET リクエストを受信するエンドポイントを作成し、これらのリクエストを Template に転送します。HTTP out ノードは、テンプレートのレンダリング後にユーザーに送り返す、適切なレスポンスを作成します。

  3. テンプレートは、ページ構造、メッセージ処理、ビジュアルという 3 つの部分に分けられます。
  4. ページ構造の部分は、すべてのチャット・メッセージを受け取る div と、メッセージを送信するためのフィールドを保持するフッターが含まれるだけの単純な HTML ページです。 アプリケーションの HTML 構造
    アプリケーションの HTML 構造
  5. メッセージ処理は、JavaScript を使用して行われます。まず始めに、Node-RED を使用して作成した WebSocket エンドポイントへの接続をオープンします。
    WebSocket 接続をオープンする
    WebSocket 接続をオープンする

    次に、サーバーとの接続のオープンまたはクローズ、新規メッセージの受信といった、各イベントを処理するための ws オブジェクトのイベント・ハンドラーを登録します。

    イベント・ハンドラーを登録する
    イベント・ハンドラーを登録する
  6. ユーザーがメッセージを送信したら、そのユーザー名とメッセージを設定したオブジェクトを作成します。そして、ws オブジェクトに含まれる send メソッドを使用して、作成したオブジェクトをサーバーに送信します。 新規メッセージを送信するコード
    新規メッセージを送信するコード
  7. ビジュアルの部分には、単純な CSS ルール (この記事では説明しません) が使用されます。

まとめ

Node-RED には、コードの開発を簡単に行えるようにするために、すぐに接続して使用できる一連のノードが用意されています。この記事で説明したように、ほんのわずかな作業で、プロジェクトで使用するサーバーを Bluemix にセットアップすることができます。この単純なチャット・アプリケーションは、さらに新しいノードを追加し、新しいフローを作成して既存のフローに接続することで、さらに機能を強化することができます。


ダウンロード可能なリソース


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing
ArticleID=985239
ArticleTitle=Node-RED を使用してリアルタイムのチャット・アプリケーションを 5 分で作成する
publish-date=10092014