2013年12月19日木曜日

WebSocketの使い方と実際に使えそうなアプリを考えてみる

に(ry

Hello world.

B14(B3)のSasakiです.

本日12/19はわたしが更新します.


ちゅーわけで WebSocket
ってなんですか!?!?
  • 通信規格のひとつ
  • 1つのコネクションで全てのデータの送受信ができる.
そういうことです。 WebSocketの接続を確立するためには,
クライアント側はハンドシェイク要求を送信,
サーバ側はハンドシェイク応答
を返さなければなりません。

以下はウェブブラウザがサーバに送る要求
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: AAA
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
サーバ側が返す応答
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: BBB
Sec-WebSocket-Protocol: chat



…という感じで、接続が確立できるます.


で、WebSocketにはJavaScriptAPIが用意されてます.
これが、比較的充実している模様.
IE FireFox Chrome Safari iOS Safari Android Browser
10.0 6.0 12.1 ×


WebSocket接続を確立する。
  //接続開始
  var ws = new WebSocket('ws://localhost:2000/chat');

  //確立したら呼び出される
  ws.onopen = dunction(){};

  //データの送信
  ws.send('Hello');

  //データが到着したら呼び出される
  ws.onmessage = function(e){
    var data = e.data;
  }

  //接続を切る(クライアントから)
  ws.close();

  //(サーバから)データがついたら呼出し
  ws.onclose = function(e){
    var wasClean = e.wasClean; 
    var code = e.code;
    var reason = e.reason;
  }


などなどの基本操作がAPIとして用意されてます.

めっちゃ便利.



で、そもそも、何に使えんのこれ、って話です


ミソは、大量のデータをサーバに送れること
であると思ってます.
で、双方向通信なのでサーバからクライアントにもデータ渡したりができる(?)の.

つまり、
  • チャット→多数のテキストデータを送信/DBに更新があったらクライアントに反映
  • おえかき→常に動くカーソルの座標を送信し続ける/カーソルの動きが他のクライアントから見られる

などのサービスに用いられるのですね.


ちなみに,実装において一番ポピュラーなのはnode.jsだそう.
phpでもできます.


実装編は、また今度ということで許してください.

0 件のコメント:

コメントを投稿