HTML5仕様を構成する要素の一つで、JavascriptのWebSocket APIとサーバサイドのWebSocketで双方向通信を可能にします。
HTTPとの違いはクライアントとサーバ間で、
・アプリケーション的に繋ぎっぱなし(クライアントがサーバからの情報を即座に受け取れる)
・双方向データ通信
が可能となります。
HTTPは、各リクエスト間で状態(ステート)を共有しません(通信ごとにHTTPコネクションを開く・閉じるのを繰り返す)。
WebSoketは一度クライアントとサーバとの間で接続が確立されると、その後のやり取りで状態を共有することができます。
以上から、HTTPのことをステートレスと呼ぶのに対し、WebSoketのことをステートフルと呼びます。
HTTPでは、今までは、ステートを共有できないので、情報共有するため、以下の方法を使用しました。
・クッキーに情報を保存する
・リクエストのURIパラメータにすべての値を指定する(例:http://example.com/?val=[a,b,c])
WebSocketは、状態共有できていますので、このようは事をせずに済みます。
また、WebSoketではつなぎっぱなしなので、HTTPヘッダ送信といった無駄なトラフィックを省略できます。
そしてWebSocketのステートフルな性質を利用することで「サーバサイドプッシュ」を実現することができます。
必要なときにサーバサイドから情報を送ることができれば、ムダなトラフィックを減らすことができます。
WebSocketをブラウザから使うためのJavaScript 例は次のようになります。
---------------------------------------------------------------
//wsはhttpの代わりで、WebSoketコンストラクタ引数に接続先を指定します
var ws = new WebSocket("ws://localhost:8080/WebSocketSample/
wsdemo");
// オープン時の処理を指定します
ws.onopen = function() {
// サーバにメッセージ送信
ws.send("message to send");
};
// メッセージ受信時の処理を指定します
ws.onmessage = function (evt) { var received_msg = evt.data; ... };
// 終了時の処理を指定します
ws.onclose = function() { // websocket is closed. };
---------------------------------------------------------------
参考URL:
http://labs.opentone.co.jp/?p=2522
http://www.atmarkit.co.jp/ait/articles/1010/05/news133_2.html
http://www.atmarkit.co.jp/ait/articles/1111/11/news135.html
サーバサイド、クライアントサイドのサンプルはこちらの方がわかりやすいです。
http://chitan.hateblo.jp/entry/2012/07/08/220030
注意点は、IEの場合、WebSocketから使えるのはIE10からとなります。
●Socket.IO
Node.js環境のWebSocketのリアルタイム通信を実現するラッパーライブラリとなります。
WebSoketは、Google ChromeやFirefoxの最新版など、WebSocketに対応したモダンブラウザでなければ動作しません。
Socket.IOは「リアルタイムWeb技術の実装方式を隠蔽し、すべてのブラウザ・モバイルデバイスでリアルタイム通信を可能とすること」を目指して開発されています。
つまり、Socket.IO APIを用いてサーバ側・ブラウザ側の実装を行えば、ネットワークやブラウザの状況から最適なリアルタイムWeb技術が選択され、IE5.5といった古い ブラウザからiPhone/Androidのブラウザまで、幅広いブラウザでリアルタイム双方向通信が可能です。
(Soket.IOの方で、Socket接続(Adobe Flash Socket)、Comet(Ajax long polling、Ajax multipart streaming、Forever Iframe)、ポーリング(JSONP Polling)を選択します)
参考URL:
http://codezine.jp/article/detail/7075
http://codezine.jp/article/detail/6502
0 件のコメント:
コメントを投稿