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

2014年 10月 09日
PDF (847 KB)
 

IBM Bluemix™ にサインアップ
無償のサービス、ランタイム、インフラを含むクラウド・プラットフォームが、新たなモバイルや Web アプリのクイックな構築とデプロイを実現します。

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 アプリケーションに名前を付ける

    クリックして大きなイメージを見る

  3. Bluemix ダッシュボード上で、新しく作成したアプリケーションの URL へナビゲートして、Node-RED のメイン・ページを起動します。Bluemix 上で Node-RED アプリケーションの URL へナビゲートして表示された画面
  4. 「Go to your Node-RED flow editor (Node-RED フロー・エディターを開く)」をクリックします。Node-RED のメイン・ページ

    クリックして大きなイメージを見る

  5. 空白のシートが表示されるので、このシート上でアプリケーションの構築を開始することができます。Node-RED を使用する際には、このグラフィカル・エディター・インターフェースを使用して必要なブロックをつなぎ合わせるという方法で、アプリケーションを構築します。左のメニューに表示されているブロックを画面中央のワークスペースにドラッグ・アンド・ドロップし、ブロック同士を接続するだけで、新しいフローを作成することができます。Node-RED 上の空白のシート

    クリックして大きなイメージを見る

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

 

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

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

    クリックして大きなイメージを見る

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

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

 
  1. メニュー・ボタンの隣にある赤い「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 番目のフロー

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

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

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

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

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

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

まとめ

 

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

コメントの追加

注意: HTML コードは、コメント内ではサポートされません。


残り 1000 文字

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。

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