HTML5が注目され始めた当初はcanvas要素やvideo要素といったものが話題の中心でしたが、
最近はWebSocketなどが話題になる機会が増えているのではないでしょうか？

本エントリーでは、マルチデバイスLab.で公開されているNode.js（WebSocket）を使ったリアルタイムWebの実例をご紹介します。

Node.jsとは

サーバサイドJavaScriptの一つ。正式名称はNodeのようですが一般的に認知されているNode.jsと表記します。
既にご存知の方が多いと思うので誤解を恐れずに一言で説明すると、サーバ側のコード（実装）がJSで書けるようになります。

サーバサイドJavaScriptの中でもNode.jsが注目されている理由は、Socket.IO（WebSocketのブラウザ互換性を吸収するライブラリ）にいち早く対応した事と、高速かつ安全なアーキテクチャにあると言われています。
また、急速なスマホの普及によりJavaScriptエンジニアが増加したため、クライアント／サーバサイドを同じ言語（JavaScript）で実装出来る事が大きなメリットになりつつある、といった背景もあります。

WebSocketとは

従来のXMLHttpRequest（以下Ajax）の欠点を解決する技術として策定されています。

Ajaxではクライアントからサーバにリクエストを送信することでデータ取得（レスポンスを得る）が可能ですが、逆方向（サーバからクライアントへ）のプッシュ配信が難しいなどのデメリットがあります。
また、httpリクエストが発生するため不要なhttpヘッダーを都度送受信する事になります。

一方、WebSocketはサーバとクライアントが一度接続した後は、接続を維持するため通信ロスを省くことができ、またAjaxの苦手とするプッシュ配信が効率的に実現出来ます。
TwitterやFacebookで新しいメッセージを受け取るとリアルタイムで通知されますが、そういったプッシュ配信が必要なケースで利用されています。

WebSocketを使ったリアルタイムWebの紹介

対応ブラウザ（Chrome、Firefox、iOS Safariなど）で下記ページを複数ブラウザで同時に開いてマウスを動かして下さい。
すると、ブラウザや端末を越えてリアルタイムにマウスの軌跡が共有されます。

マルチデバイスLab. ティザーサイト

閲覧方法

• 例）PCのみで閲覧する場合
  ChromeとFirefoxで同時に閲覧
• 例）PCとスマホで閲覧する場合
  Chrome（PC）とSafari（スマホ）で同時に閲覧

WebSocketの可能性

今回ご紹介した例はマウスの軌跡を共有する、といった内容でしたが
WebSocketにより、リアルタイムWebが実現されつつあります。
切り口を変えれば色々なアイデアが実現できるのではないでしょうか？

今後の予定

今後もNode.jsを中心に研究開発を続けていきます。
また、研究の成果を当Labでご紹介したいと考えています。