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

Web開発

技術解説

連載 :

今さら聞けないHTML5総おさらい

2012年5月15日(火)

飯島聡（著）山田祥寛（監修）

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

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

図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）

HTML5のコミュニケーション機能サンプル

3542_1.zip

著者

飯島聡（著）山田祥寛（監修）

この著者の記事一覧この著者の
記事一覧

WINGSプロジェクト

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