HTML5-WebSockets

WebSocketsは、単一のソケット上で動作し、HTML 5準拠のブラウザーのJavaScriptインターフェースを介して公開される、Webアプリケーション用の次世代双方向通信テクノロジーです。

WebサーバーとのWebソケット接続を取得したら、* send（）メソッドを呼び出してブラウザーからサーバーにデータを送信し、 *onmessage イベントハンドラーでサーバーからブラウザーにデータを受信できます。

以下は、新しいWebSocketオブジェクトを作成するAPIです。

var Socket = new WebSocket(url, [protocal] );

ここで、最初の引数urlは、接続するURLを指定します。 2番目の属性protocolはオプションであり、存在する場合、接続が成功するためにサーバーがサポートする必要があるサブプロトコルを指定します。

WebSocketの属性

WebSocketオブジェクトの属性は次のとおりです。上記のようにSocketオブジェクトを作成したと仮定します-

Sr.No.

Attribute & Description

1

Socket.readyState

readonly属性readyStateは、接続の状態を表します。それは次の値を持つことができます-

値0は、接続がまだ確立されていないことを示します。
値1は、接続が確立され、通信が可能であることを示します。
値2は、接続が終了ハンドシェイクを通過していることを示します。 *3の値は、接続が閉じられたか、開くことができなかったことを示します。

2

Socket.bufferedAmount*

readonly属性bufferedAmountは、send（）メソッドを使用してキューに入れられたUTF-8テキストのバイト数を表します。

WebSocketイベント

以下は、WebSocketオブジェクトに関連付けられたイベントです。上記のようにSocketオブジェクトを作成したと仮定します-

Event	Event Handler	Description
open	Socket.onopen	This event occurs when socket connection is established.
message	Socket.onmessage	This event occurs when client receives data from server.
error	Socket.onerror	This event occurs when there is any error in communication.
close	Socket.onclose	This event occurs when connection is closed.

WebSocketメソッド

以下は、WebSocketオブジェクトに関連付けられたメソッドです。上記のようにSocketオブジェクトを作成したと仮定します-

Sr.No.

Method & Description

1

Socket.send()

send（data）メソッドは、接続を使用してデータを送信します。

2

Socket.close()

close（）メソッドは、既存の接続を終了するために使用されます。

WebSocketの例

WebSocketは、クライアントとサーバー間の標準的な双方向TCPソケットです。ソケットはHTTP接続として開始され、HTTPハンドシェイク後にTCPソケットに「アップグレード」されます。ハンドシェイク後、どちらの側もデータを送信できます。

クライアント側のHTMLおよびJavaScriptコード

このチュートリアルを書いている時点では、WebSocket（）インターフェースをサポートしているWebブラウザーはわずかです。 Chrome、Mozilla、Opera、Safariの最新バージョンで次の例を試すことができます。

<!DOCTYPE HTML>

<html>
   <head>

      <script type = "text/javascript">
         function WebSocketTest() {

            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");

              //Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");

               ws.onopen = function() {

                 //Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               };

               ws.onmessage = function (evt) {
                  var received_msg = evt.data;
                  alert("Message is received...");
               };

               ws.onclose = function() {

                 //websocket is closed.
                  alert("Connection is closed...");
               };
            } else {

              //The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>

   </head>

   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>

   </body>
</html>

pywebsocketをインストールする

上記のクライアントプログラムをテストする前に、WebSocketをサポートするサーバーが必要です。 Apache HTTPサーバー用のWebソケット拡張機能を提供することを目的としたhttps://code.google.com/p/pywebsocket/[pywebsocket]からmod_pywebsocket-x.x.x.tar.gzをダウンロードし、次の手順に従ってインストールします。

ダウンロードしたファイルを解凍して解凍します。
pywebsocket-x.x.x/src/ ディレクトリ内に移動します。
$ python setup.py build
$ sudo python setup.py install
次に、文書を読みます-
$ pydoc mod_pywebsocket

これにより、Python環境にインストールされます。

サーバーを起動する

*pywebsocket-x.x.x/src/mod_pywebsocket* フォルダーに移動し、次のコマンドを実行します-

$sudo python standalone.py -p 9998 -w ../example/

これにより、ポート9998でリッスンしているサーバーが起動し、echo_wsh.pyが存在する-wオプションで指定された handlers ディレクトリが使用されます。

Chromeブラウザーを使用して、最初に作成したhtmlファイルを開きます。ブラウザーがWebSocket（）をサポートしている場合、ブラウザーがWebSocketをサポートしていることを示すアラートが表示され、最後に「WebSocketを実行」をクリックすると、サーバースクリプトからGoodbyeメッセージが送信されます。

Html5-websocket

目次