2014年11月10日月曜日

Node.jsとSoket.ioとSilverlight(2)

●WebSoket
 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 件のコメント:

コメントを投稿