PR

クロスドキュメントメッセージングやWebSocketを使ってみる

2012年5月15日(火)
飯島 聡(著)山田 祥寛(監修)

コンピュータ間でチャットをするサンプル

以下のサンプルは、コンピュータ間でチャットするものです。1つのクライアントから送信したメッセージを、サーバー側で接続している全てのクライアントにエコーする事で実装しています。

 図7:PC間でチャット(クリックで拡大)

サーバー側のコードは、WebSocket-Node用の話題となり、本稿の守備範囲を超えますので、ここでは割愛します。サンプルダウンロードの「HTML5_4_WS_server.js」を参照ください。

以下では、ブラウザ側のコードについてのみ確認していきます。

[サンプル] ブラウザ側のコード(HTML5_4_sample4.html)

<script>
  //ウインドウのloadイベントに下記の初期化メソッドinitを関連付ける
  window.addEventListener("load",init,true);
  //WebSocket対応サーバーのホストへwsで接続するURL				・・・(1)
  var wsServerUrl="ws://localhost";

  var websocket,ta1,ta2,bConnect,bClose,bSend;
  //初期化メソッド
  function init(){
    ta1 = document.getElementById("ta1"); 
    ta2 = document.getElementById("ta2");
    bConnect = document.getElementById("bConnect");
    bSend = document.getElementById("bSend");
    bClose = document.getElementById("bClose");
    //入力フィールドではCtrl+Enter(control+return)で送信
    ta1.onkeydown = 
      function(e){if (e.keyCode==13 && e.ctrlKey) {bSend.click();}};
    //非対応のブラウザの場合アラートを表示する					・・・(2)
    if(!window.WebSocket){
      alert("このブラウザではWebSocketを使用出来ません。");
    }
    //websoketオブジェクトの作成
    connect(wsServerUrl); 
  }
  //websoketオブジェクトの作成とイベントハンドラの設定
  function connect(url){
    //WebSocketオブジェクトの作成(接続の開始)					・・・(3)
    websocket = new WebSocket(url);
    //接続した時											・・・(4)
    websocket.onopen = 
          function(e) {writeToTextArea("[接続しました]");
                      bConnect.disabled = true;
                      bSend.disabled = false;
                      bClose.disabled = false;
                  }; 
    //エラー発生時											・・・(5)
    websocket.onerror =
          function(e) {writeToTextArea("[エラーが起きました]");};
    //切断した時											・・・(6)
    websocket.onclose = 
        function(e) {writeToTextArea("[切断しました]");
                      bConnect.disabled = false;
                      bSend.disabled = true;
                      bClose.disabled = true;
                  }; 
    //サーバーからメッセージを受信した時							・・・(7)
    websocket.onmessage = 
        function(e) {writeToTextArea(">"+e.data);}; 
  }
  //メッセージを送信する										・・・(8)
  function send(msg){
    websocket.send(msg);
    ta1.value="";
    ta1.select();
  }
  //切断する												・・・(9)
  function closeWS(){
    websocket.close();
  }
  //テキストをテキストエリアに書く
  function writeToTextArea(text){
    ta2.value += text+"\r\n";
    ta2.scrollTop = ta2.scrollHeight;
  }
</script>
・・・(HTML部分)・・・
<body>
  <h1>Web Socket サンプル</h1>
  <form name="form1">
    <h4>メッセージ入力</h4>
    <textarea rows="3" cols="80" id="ta1" 
      placeholder="Ctrl+Enter(control+return)で送信"></textarea><br>
    <input type="button" id="bConnect" value="接続" onclick="connect(wsServerUrl);">
    <input type="button" id="bClose" value="切断" onclick="closeWS();">
    <input type="button" id="bSend" value="メッセージ送信" onclick="send(ta1.value)"><br>
    <h4>サーバーからの応答</h4>
    <textarea rows="10" cols="80" id="ta2"></textarea>
  </form>
</body>

以下の事を行っています。

  • (1) WebSocketサーバーのURLを代入しています。WebSocketプロトコルは「ws://」ではじまります。ポートはHTTP同様に80が既定です。サーバーでのListenに合わせてください。
  • (2) 非対応のブラウザではwindow.WebSocketに値がないため、これを用いて非対応ブラウザではアラートを表示しています。ただし、個別のプロトコルバージョンの対応/非対応はこの方法では判定出来ません。
  • (3) サーバーのURLを引数に指定して、WebSocketオブジェクトを作成しています。通信が開始されます。
  • (4) 接続が確立した時の処理を、openのイベントハンドラに記述します。
  • (5) エラーが発生した時の処理を、errorのイベントハンドラに記述します。
  • (6) 接続が終了した時の処理を、closeのイベントハンドラに記述します。
  • (7) メッセージを受信した時の処理を、messageのイベントハンドラに記述します。なお、メッセージはイベント引数eのdataプロパティに入っています。
  • (8) ブラウザ側からのメッセージ送信は、sendメソッドを使用します。引数にメッセージを指定します。
  • (9) ブラウザ側から接続を終了させるには、closeメソッドを使用します。

まとめ

今回は、コミュニケーション系のHTML5新機能に関して説明しました。これらの機能によって、今までよりもWebサービス連携が柔軟となり、操作性やリアルタイム性の高いアプリケーションが構築出来ます。

以上、本連載では4回にわたって、HTML5新機能の一部を見てきました。本連載では文書作成言語としての新機能、マルチメディア機能、ドラッグ&ドロップ機能やファイルAPI、メッセージング機能やリアルタイムコミュニケーション機能を紹介しました。

連載では説明出来ませんでしたがそのほかにも、関連仕様として、ブラウザから現在位置情報を取得する機能や、オフライン環境でもWebアプリケーションを実行出来る機能などがあります。これらの機能を概観すると、HTMLは「Web文書」を記述する言語から、「Webアプリケーション」を構築する言語を目指して進化し続けていると実感出来ます。さらにブラウザの実装が進めば、HTML5は「非Webアプリケーション」も構築可能なアプリケーション開発汎用言語となっていく事が期待出来ます。

W3CのHTMLサイトのよくある質問「When will HTML5 be done?」の回答によれば、W3Cは2014年までの正式勧告を目指しているそうです。それまでには各ブラウザが対応もほぼ終わっていて、そのころに環境に依存せずに利用出来るアプリケーションを構築する場合には、まずHTML5の利用を検討しなければならないでしょう。

【参考文献】

<リンク先最終アクセス:2012.05>

<編集部より>1ページ目に一部誤りがあったため、文言を修正しました。(2012.05.16)

Think IT会員限定特典
  • HTML5のコミュニケーション機能サンプル

著者
飯島 聡(著)山田 祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています