Socket.IOを使ってNode.jsでリアルタイムWebアプリを開発する

Web開発

技術解説

連載 :

eXcaleで始めるNode.js

2013年3月27日(水)

西谷圭介

クライアント側実装

続いてクライアント側の実装です。とはいってもクライアント側の実装も基本的にはサーバ側と変わりません。同様にサーバへの接続、メッセージの送受信時の処理を定義します。

今回はexpressを使ってひな形を作成したのでユーザーがアクセスするためのページとして自動で生成されたHTMLページを使い、そこにJavaScriptで処理を実装していきます。ひな形を作成した際のテンプレートエンジンにはデフォルトのjadeが使われていますので基本的なHTMLはjadeで書いていきます。views/index.jadeを以下のように編集してください。

doctype 5
html
 head
  link(rel='stylesheet', href='/stylesheets/style.css')
  script(src="/socket.io/socket.io.js",type="text/javascript")
  script(type="text/javascript")
   var socket = io.connect('/');
   socket.on('msg', function (data) {
    document.getElementById("message").innerHTML += data.date + "  " + data.message + "<br>";
   });
 
   function submit(){
     var message = document.getElementById("msg").value;
     socket.emit("msg",{message : message});
     document.getElementById("msg").value = "";
   }
 body
  input(name='msg')#msg
  button(onclick='submit()') Submit
  hr
  #message

出力されるHTMLは以下のようになります。
※ここでは実際に出力されるHTMLを読みやすいように筆者にて適宜改行を入れています。

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="/stylesheets/style.css">
  <script src="/socket.io/socket.io.js" type="text/javascript"></script>
  <script type="text/javascript">
    var socket = io.connect('/');
    socket.on('msg', function (data) {
      document.getElementById("message").innerHTML += data.date + "  " + data.message + "<br>";
    });
 
    function submit(){
      var message = document.getElementById("msg").value;
      socket.emit("msg",{message : message});
      document.getElementById("msg").value = "";
    }
   </script>
  </head>
  <body>
    <input name="msg" id="msg">
    <button onclick="submit()">Submit</button>
    <hr>
    <div id="message"></div>
  </body>
 </html>

図1：作成したHTML（クリックで拡大）

基本的にはサーバ側の実装と同じです。サーバにio.connect()で接続を行い、socket.onで受信時の処理、socket.emitで送信処理を記述しています。

今回はボタンのonClickイベントでsubmit()という関数を呼び出す形式としています。このsubmit()の中でテキストボックスの値を取得し、その内容をメッセージとして送信しています。受信時の処理では受け取ったメッセージの内容を"message"というidのdiv内に追記していく処理を記述しています。

デプロイと確認

それでは、変更を全てコミットした上で実際にデプロイして確認をしてみます。

デプロイ先のアプリケーションは前回の内容で作成したものでもいいですし、新たに作成したものでも構いません。新たに作成する場合は前回の内容や下記のリンクを参考に作成してください。
→　Node.jsアプリケーションのデプロイ

今回作成したアプリケーションのディレクトリに移動した上で、gitを使用するように初期化して、リモートリポジトリとして全ファイルを追加した上でコミットします。

git init
git add .
git commit -m "initial commit"

最後に、eXcale上でアプリケーションを作成した際に用意されたリポジトリURLを追加し、masterブランチをプッシュします。このURLは「詳細」画面の「Git接続先」から確認することができます。

git remote add excale <Git接続先>
git push excale master

デプロイが完了したらブラウザからアクセスしてみます。複数ウィンドウもしくは複数のタブからアクセスしてみてください。また、スマートフォン等をお持ちであればそれらのブラウザからアクセスしてみるのもいいでしょう。

アクセスすると当初はテキストボックスのみの画面が表示されています。早速テキストボックスに何か文字列を入力してSubmitボタンを押してみてください。開いている全てのブラウザ画面上に入力したメッセージが表示されるはずです。

図2：PC上のブラウザ（Chrome）での表示（クリックで拡大）

図3：iPhoneのSafariでの表示（クリックで拡大）

まとめ

全3回にわたってNode.jsを利用したアプリケーション開発の基本についてeXcaleを利用して駆け足で解説を行ってきました。しかし、今回の連載で解説をしたのは非常に基本的な部分だけです。Node.jsは現在も非常に活発に開発が行われており、積極的な機能追加や性能向上が行われています。また、バージョンアップの頻度も非常に速いです。

本連載ではDB等を利用したアプリケーション開発は行いませんでしたが、もちろん開発も可能です。特にMongoDBとの組み合わせがよく利用されているようですが、eXcaleで提供しているMySQLも利用可能です。興味をお持ちになった場合はぜひ公式サイトなどを参考にいろいろ試してみてください。