SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

最新ブラウザ「Internet Explorer10」と「HTML5」のAPI紹介(AD)

IE10で動くHTML5アプリ実装例
「Node.jsとSocket.IOを使用したリアルタイムアプリ」

最新ブラウザ「Internet Explorer10」と「HTML5」のAPI情報(3)

  • X ポスト
  • このエントリーをはてなブックマークに追加

(3)サーバからコマンドを受け取り、黒板を更新する

 (3)はクライアント側のJavaScriptコードになります。"command"イベントを受け取ってCanvasへの描画を行う処理になりますが、Socket.IOを使用すると以下のようなコードになります。

// "command"イベントの監視
socket.on('command', function(command) {
    ...
    processCommand(command);
});

サンプルのパフォーマンスについて

 このサンプルのコードをもう少し読むと、パフォーマンスを高めるような努力が一切行われていないことがわかります。マウスイベントが発生するたびにサーバに対して送信を行っているため、非常に頻繁にサーバとの通信を行っています。

 しかしWebSocketのパフォーマンスが非常に良いため、これほどシンプルな実装でも、5,6人程度の同時接続数であれば、全く遅延なくアプリを利用できます。今回は本格的なサービスではなく、あくまでデモンストレーションですので、このレベルのパフォーマンスで十分と判断しました。

まとめ

 この記事でお伝えしたかったことは以下の2つです。

  • Node.jsやSocket.IOの生産性の高さ:サンプルのコア部分は、非常にシンプルなコードで実現できています。
  • WebSocketのパフォーマンスの高さ:全くパフォーマンスチューニングを行っていないにもかかわらず、一定のリアルタイム性を備えています。

 Node.jsとSocket.IOを使えば、リアルタイムなアプリケーションを非常に容易に実現できます。そこにHTML5の表現力が加われば、魅力的なアプリケーションを短期間で実装することができます。

 今後やってくるリアルタイムWebのイノベーションに備えて、今からWebSocketに親しんでおくとよいのではないでしょうか。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
最新ブラウザ「Internet Explorer10」と「HTML5」のAPI紹介連載記事一覧

もっと読む

この記事の著者

白石 俊平(株式会社シーエー・モバイル Web先端技術フェロー)(シライシ シュンペイ(カブシキガイシャシーエー・モバイル ウェブセンタンギジュツフェロー))

現在はシーエー・モバイルにて「日本のWebシーンで最先端の企業にする」というミッションに従事中。その他、html5j.org管理人、Google API Expert (HTML5)、Microsoft IE MVPなどを務める。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6502 2012/04/18 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング