HTML5 基本教程

HTML5 API

HTML5 メディア

HTML5 グラフィック

HTML5 WebSocket

HTML5 TCP 接続の上で全双方向通信を行うプロトコルとして提供を開始しました。

WebSocket はクライアントとサーバー間のデータ交換をより簡単にし、サーバーがクライアントにデータをプッシュするのを許可します。WebSocket API では、ブラウザとサーバーは一度の手続きでハンドシグを完了し、持続可能な接続を直接作成し、双方向データトランスミッションを実行できます。

WebSocket API では、ブラウザとサーバーは一度の手続きでハンドシグをします。その後、ブラウザとサーバー間に高速なパスが形成されます。そのため、直接データを相互に送受信できます。

現在、多くのウェブサイトがプッシュ技術を実現するために、Ajax ループを用いています。ループは特定の時間間隔（例えば、毎1秒で、ブラウザがサーバーに HTTP リクエストを送信し、サーバーが最新のデータをクライアントのブラウザに返します。この伝統的なモデルは、明らかにブラウザがサーバーに連続してリクエストを送信する必要があり、HTTP リクエストには長いヘッダーが含まれるため、実際に有効なデータは非常に小さい部分だけであるという明らかな欠点があります。これにより、多くの帯域幅やリソースが無駄になります。

HTML5 定義された WebSocket プロトコルは、サーバー資源と帯域幅をよりよく節約し、よりリアルタイムな通信を実現できます。

ブラウザは JavaScript を使用して WebSocket 接続の確立をリクエストし、接続が確立されると、クライアントとサーバーは TCP 接続を通じて直接データを交換できます。

Web Socket 接続を取得した後、以下のように使用できます。 send() メソッドを使用してサーバーにデータを送信し、 onmessage イベントを介してサーバーから返されるデータを受信します。

以下 API は WebSocket オブジェクトを作成するために使用されます。

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

以下のコードの最初の引数 url は、接続する URL を指定します。第 2 引数 protocol はオプションで、受け入れ可能なサブプロトコルを指定します。

WebSocket 属性

以下は WebSocket オブジェクトに関連する属性です。以下のコードを使用して Socket オブジェクトを作成したと仮定します：

属性	説明
Socket.readyState	読み取り専用プロパティ readyState 接続の状態を示す値には以下の通りです： 0 - 接続がまだ確立されていないことを示します。 1 - 通信を行うことができる接続が確立されたことを示します。 2 - 接続が閉じられているプロセス中を示します。 3 - 接続が閉じられたか、接続を開くことができないことを示します。
Socket.bufferedAmount	読み取り専用プロパティ bufferedAmount send() に設定され、送信待ちのキューに格納されているが、まだ送信されていない UTF-8 テキストバイト数。

WebSocket イベント

以下は WebSocket オブジェクトに関連するイベントです。以下のコードを使用して Socket オブジェクトを作成したと仮定します：

イベント	イベントハンドラ	説明
open	Socket.onopen	接続が確立されたときに発生
message	Socket.onmessage	クライアントがサーバーからのデータを受け取ったときに発生
error	Socket.onerror	通信がエラーが発生したときに発生
close	Socket.onclose	接続が閉じられたときに発生

WebSocket メソッド

以下は WebSocket オブジェクトに関連するメソッドです。以下のコードを使用して Socket オブジェクトを作成したと仮定します：

メソッド	説明
Socket.send()	接続を使用してデータを送信する
Socket.close()	接続を閉じる

WebSocket 例

WebSocket プロトコルは本質的に TCP に基づくプロトコルです。

WebSocket 接続を確立するために、クライアントのブラウザはまずサーバーに HTTP リクエストを送信する必要があります。このリクエストは通常の HTTP リクエストとは異なり、追加のヘッダー情報を含んでいます。その追加のヘッダー情報「Upgrade: WebSocket」は、プロトコルのアップグレードを申請する HTTP リクエストであることを示しています。サーバー側はこれらの追加のヘッダー情報を解析し、応答情報を生成してクライアントに返します。これにより、クライアントとサーバーの WebSocket 接続が確立され、双方はこの接続を通じて情報を自由に伝えることができます。また、クライアントまたはサーバーの一方が接続を自動的に閉じるまで、この接続は持続します。

クライアントのHTMLとJavaScript

現在の多くのブラウザはWebSocket()インターフェースをサポートしており、以下のブラウザでサンプルを試すことができます：Chrome、Mozilla、Opera、Safari。

w3codebox_websocket.html ファイルの内容

例

<!DOCTYPE　HTML>
<html>
　　　<head>
　　　<meta　charset="utf-8">-8">
　　　<title>WebSocketの使用方法,基本チュートリアルサイト(oldtoolbag.com)</title>
　　　　
　　　　　　<script　type="text/javascript">
　　　　　　　　　function　WebSocketTest()
　　　　　　　　　{
　　　　　　　　　var　x=document.getElementById("websocket");
　　　　　　　　　　　　if　("WebSocket"　in　window)
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　x.innerHTML="あなたのブラウザはWebSocketをサポートしています!";
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　//　ウェブソケットを開く
　　　　　　　　　　　　　　　var　ws　=　new　WebSocket("ws://echo.websocket.org");
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onopen　=　function()
　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　//　WebSocketは接続されました、send()メソッドを使用してデータを送信
　　　　　　　　　　　　　　　　　　ws.send("データを送信");
　　　　　　　　　　　　　　　　　　x.innerHTML="データ送信中...";
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onmessage　=　function　(evt)　
　　　　　　　　　　　　　　　{　
　　　　　　　　　　　　　　　　　　var　received_msg　=　evt.data;
　　　　　　　　　　　　　　　　　　x.innerHTML="データを受信しました,基本チュートリアル(oldtoolbag.com)...";
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onclose　=　function()
　　　　　　　　　　　　　　　{　
　　　　　　　　　　　　　　　　　　//　websocketを閉じる
　　　　　　　　　　　　　　　　　　x.innerHTML="接続が閉じられました...";　
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　else
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　//　ブラウザはWebSocketをサポートしていません
　　　　　　　　　　　　　　　x.innerHTML="あなたのブラウザはWebSocketをサポートしていません!";
　　　　　　　　　　　　}
　　　　　　　　　}
　　　　　　</script>
　　　　　　　　
　　　</head>
　　　<body>
　　　　　　　
　　　　　　<div　id="sse"><
　　　　　　　　　<input　type="button"　onclick="WebSocketTest()"　value="実行　WebSocket">
　　　　　　</div>
　　　　　　<div　id="websocket"></div>
　　　　　　
　　　</body>
</html>

テストをしてみる ‹/›

以下に示すテスト結果：

WebSocketとSocketの違い

ソフトウェア通信には7層の構造があり、下層3層はデータ通信に偏向しており、上層3層はデータ処理に偏向しており、中間のトランスポートレベルは上層3層と下層3層を結ぶ橋渡しの役割を果たします。各レベルは異なる作業を行い、上位プロトコルは下位プロトコルに依存します。この通信構造の概念に基づいています。
Socketはプロトコルではありません。アプリケーションレベルとTCP/IPプロトコル族の通信の間接ソフトウェア抽象レベルであり、インターフェースのセットです。二台のホストが通信する際には、Socketが指定されたプロトコルに適合するデータを組織するようにします。TCP接続はより基盤となるIPプロトコルに依存しており、IPプロトコルの接続はリンクレベルなどのもっと低いレベルに依存します。
WebSocketは典型的なアプリケーションレベルのプロトコルです。

Socketはトランスポートコントロールレベルのプロトコルです
WebSocketはアプリケーションレベルのプロトコルです

HTML(5) コード記述規範 HTML5 サーバーから送信されるイベント