HTML5-WebSocket
WebSocketsは、単一のソケット上で動作し、HTML 5準拠のブラウザーのJavaScriptインターフェースを介して公開される、Webアプリケーション向けの次世代の双方向通信テクノロジーです。
WebサーバーとのWebSocket接続を取得したら、を呼び出すことにより、ブラウザーからサーバーにデータを送信できます。 send() メソッド、およびによってサーバーからブラウザにデータを受信します onmessage イベントハンドラ。
以下は、新しいWebSocketオブジェクトを作成するAPIです。
var Socket = new WebSocket(url, [protocal] );ここで、最初の引数urlは、接続先のURLを指定します。2番目の属性であるprotocolはオプションであり、存在する場合は、接続を成功させるためにサーバーがサポートする必要のあるサブプロトコルを指定します。
WebSocket属性
以下は、WebSocketオブジェクトの属性です。上記のようにSocketオブジェクトを作成したと仮定します-
| シニア番号 | 属性と説明 |
|---|---|
| 1 | Socket.readyState 読み取り専用属性readyStateは、接続の状態を表します。次の値をとることができます-
|
| 2 | Socket.bufferedAmount 読み取り専用属性bufferedAmountは、send（）メソッドを使用してキューに入れられたUTF-8テキストのバイト数を表します。 |
WebSocketイベント
以下は、WebSocketオブジェクトに関連するイベントです。上記のようにSocketオブジェクトを作成したと仮定します-
| イベント | イベントハンドラー | 説明 |
|---|---|---|
| 開いた | Socket.onopen | このイベントは、ソケット接続が確立されたときに発生します。 |
| メッセージ | Socket.onmessage | このイベントは、クライアントがサーバーからデータを受信したときに発生します。 |
| エラー | Socket.onerror | このイベントは、通信にエラーが発生した場合に発生します。 |
| 閉じる | Socket.onclose | このイベントは、接続が閉じられたときに発生します。 |
WebSocketメソッド
以下は、WebSocketオブジェクトに関連付けられているメソッドです。上記のようにSocketオブジェクトを作成したと仮定します-
| シニア番号 | 方法と説明 |
|---|---|
| 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をサポートするサーバーが必要です。pywebsocketからmod_pywebsocket-xxxtar.gzをダウンロードします。これは、ApacheHTTPサーバーにWebSocket拡張機能を提供することを目的としており、次の手順に従ってインストールします。
ダウンロードしたファイルを解凍して解凍します。
中に入る pywebsocket-x.x.x/src/ ディレクトリ。
$ pythonsetup.pyビルド
$ 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でリッスンしているサーバーが起動し、 handlers echo_wsh.pyが存在する-wオプションで指定されたディレクトリ。
Chromeブラウザを使用して、最初に作成したhtmlファイルを開きます。ブラウザがWebSocket（）をサポートしている場合は、ブラウザがWebSocketをサポートしていることを示すアラートが表示され、最後に[Run WebSocket]をクリックすると、サーバースクリプトからさようならメッセージが送信されます。