IE10で動くHTML5アプリ実装例
「Node.jsとSocket.IOを使用したリアルタイムアプリ」
最新ブラウザ「Internet Explorer10」と「HTML5」のAPI情報(3)
本連載は、「Developers Summit 2012」(デブサミ2012)において、2月16日に行われた日本マイクロソフト株式会社 春日井 良隆氏によるセッション「次期Internet Explorer、IE10とHTML5 API」(セッション資料はこちら)をもとに、Internet Explorer 10の新機能やHTML5 APIとの関連について、3回に分けて特集します。第3回目の今回は、Node.jsとSocket.IOを使用してリアルタイムアプリを作成してみます。
はじめに
Internet Explorer 10(以下、IE10)では、HTML5や関連APIの実装が大きく進みますが、中でもWebSocketに対応することはアプリケーション開発者にとって非常に重要です。
WebSocketは、HTTPリクエストで確立した接続を「繋ぎっぱなし」にすることで、サーバとクライアントの双方向で効率的な通信を実現する技術です。WebSocketは新しい通信プロトコルです(RFC)が、HTTPと同じポート番号を使用するためファイアウォールを越えやすいのと、JavaScript APIに関する仕様もあらかじめ用意されており、Webアプリケーションとの親和性が非常に高いのも特徴です。
WebSocketは、IE10だけではなくGoogle Chrome、Firefox、Safariと言ったブラウザでもサポートされています(Operaでは、デフォルトで無効にされていますが、実装は提供されています)。
ここでは、Developers Summit 2012の「次期Internet Explorer、IE10とHTML5 API」というセッションで使用したWebSocketのサンプルを題材に、WebSocketの可能性について知っていただくことを主眼としています。
このデモンストレーションのソースコードは、こちらからダウンロードすることができます。
このサンプルでは、WebSocketのAPIを直接使用するのではなく、Node.jsとSocket.IOを使用して実装しました。Node.jsは最近人気が急上昇しているプラットフォームで、JavaScriptを使用してサーバやスタンドアローンのプログラムを作成することのできる環境です。Socket.IOはNode.jsの上で動作するフレームワークで、WebSocketプロトコルの実装と使いやすいAPIを提供してくれます。
また、このサンプルはWindows Azure上でホスティングされています。Windows Azureは昨年からNode.jsアプリケーションを実行できるようになりました。
Node.jsとSocket.IOを使ってこのサンプルの実装を行った結果、そのパフォーマンスの高さと開発生産性に驚きました。こうした、2つの意味での「速さ」についても、この記事から伝われば幸いです。
この記事は参考になりましたか?
- 最新ブラウザ「Internet Explorer10」と「HTML5」のAPI紹介連載記事一覧
-
- IE10で動くHTML5アプリ実装例 「Node.jsとSocket.IOを使用したリアル...
- IE10で動くHTML5アプリ実装例 「Indexed Database APIを使用した...
- IE10で動くHTML5アプリ実装例 「File APIを利用したアプリ」
- この記事の著者
-
白石 俊平(株式会社シーエー・モバイル Web先端技術フェロー)(シライシ シュンペイ(カブシキガイシャシーエー・モバイル ウェブセンタンギジュツフェロー))
現在はシーエー・モバイルにて「日本のWebシーンで最先端の企業にする」というミッションに従事中。その他、html5j.org管理人、Google API Expert (HTML5)、Microsoft IE MVPなどを務める。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社
この記事は参考になりましたか?
この記事をシェア
