HTML5 WebSocket 全二重通信の詳細な学習 example_html5 チュートリアル スキル

リアルタイム Web アプリケーションの現在の実装のほとんどは、ポーリングやその他のサーバー側プッシュ テクノロジーを中心に展開されており、最も有名なものは Comet です。 Comet テクノロジーを使用すると、サーバーは非同期でクライアントにデータをアクティブにプッシュできます。

ポーリングを使用する場合、ブラウザーは HTTP リクエストを定期的に送信し、応答をすぐに受け取ります。長いポーリングを使用する場合、ブラウザーはサーバーにリクエストを送信し、サーバーはストリームを使用してシナリオを解決します。ブラウザは完全な HTTP リクエストを送信しますが、サーバーは更新を続けて無期限に開いたままになるオープン応答を送信して保持します。

上記の 3 つの方法では、リアルタイム データを送信するときに HTTP リクエスト ヘッダーとレスポンス ヘッダーが必要になり、大量の追加の不要なヘッダー データが含まれるため、送信遅延が発生します。

1. HTML5 WebSocket の解釈

1. WebSocket ハンドシェイク

WebSocket 通信を確立するために、クライアントとサーバーは最初のハンドシェイク中に HTTP プロトコルを WebSocket プロトコルにアップグレードします。接続が確立されると、WebSocket メッセージを全二重モードでクライアントとサーバー間で送受信できるようになります。

注: ネットワークでは、各メッセージは 0x00 バイトで始まり 0xFF で終わり、中間データは UTF-8 エンコード形式を使用します。

2. WebSocket インターフェース

WebSocket プロトコルの定義に加えて、JavaScript アプリケーションの WebSocket インターフェイスも定義されています。

コードをコピーします

コードは次のとおりです:

interface WebSocket{
readonly属性 DOMString URL;
//準備完了状態
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonlyattribute unsigned short readyState ;
readonlyattributeunsignedshortbufferedAmount;
//ネットワーク
attribute Function onopen;
attribute Function onmessage;
attribute Function onclose;
boolean send(in DOMSString data);
void close ();
};
WebSocket は EventTarget を実装します;

注: ws:// および wss:// プレフィックスは、それぞれ WebSocket 接続と安全な WebSocket 接続を表します。

2. HTML5 WebSocket API

このセクションでは、HTML5 WebSocket の使用方法について説明します

1. ブラウザがサポートしているかどうかを確認します

window.WebSocket を使用して、ブラウザがサポートしているかどうかを確認します。

2. APIの基本的な使い方

a. WebSocket オブジェクトの作成と WebSocket サーバーへの接続

コードをコピーします

コードは次のとおりです:

url = "ws:/ /localhost: 8080/echo";
ws = 新しい WebSocket(url);

b. イベント リスナーを追加します

WebSocket は非同期プログラミング モデルに従います。ソケットを開いた後は、サーバーを積極的にポーリングせずにイベントが発生するのを待つだけで済みます。そのため、イベントをリッスンするコールバック関数を追加する必要があります。

WebSocket オブジェクトには、open、close、message の 3 つのイベントがあります。 open イベントは接続が確立されたときにトリガーされ、message イベントはメッセージを受信したときにトリガーされ、close イベントは WebSocket 接続が閉じられたときにトリガーされます。

コードをコピーします

コードは次のとおりです。

ws.onopen = function( ){
log("open");
}
ws.onmessage = function(){
log(e.data);
}
ws.onclose = function( ){
log("closed");
}

c. メッセージを送信します

ソケットが開いているとき (つまり、onopen リスナーを呼び出した後、onclose リスナーを呼び出す前)、send メソッドを使用してメッセージを送信できます。

ws.send("Hello World");

3. HTML5 WebSocket アプリケーションの例

このセクションでは、前述の地理位置情報インターフェイスを組み合わせて、Web ページで直接距離を計算するアプリケーションを作成します。

1. HTML ファイルを作成します

コードをコピーします

コードは次のとおりです:

<頭>

HTML5 WebSocket / 位置情報トラッカー

地理位置情報:

お使いのブラウザは HTML5 地理位置情報をサポートしていません

WebSocket:

お使いのブラウザは HTML5 Web Sockets をサポートしていません

2. WebSocket コードを追加します

コードをコピーします

コードは次のとおりです:

function loadDemo(){
/ /ブラウザが WebSocket をサポートしていることを確認してください
if(window.WebSocket){
url = "ws://localhost:8080";//ブロードキャスト WebSocket サーバーの場所
ws = new WebSocket(url );
ws.onopen = function(){
updateSocketStatus("接続が確立されました");
}
ws.onmessage = function(e){
updateSocketStatus("位置データを更新します: " dataReturned( e.data));
}
}
}

3. 位置情報コードを追加します

コードをコピーします

コードは次のとおりです:

var geo;
if(navigator .geolocation){
geo = navigator.geolocation;
updateGeolocationStatus("ブラウザは HTML5 地理位置情報をサポートしています");
}

geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//20 秒ごとに更新

function updateLocation(position){
var latitude = Position.coords.latitude;
var longitude = Position.coords.longitude;
var timestamp =position.timestamp;
updateGeolocationStatus("位置情報更新時刻: " timestamp);
var toSend = JSON.stringify([myId,latitude,longitude]);
sendMyLocation(toSend);
}

4. すべてのコンテンツを結合します

コードをコピーします

コードは次のとおりです:

HTML5 WebSocket / Geolocation 追踪器

Geolocation:

你的浏览器不支持HTML5 Geolocation

WebSocket:

你的浏览器不支持HTML5 Web Sockets

<スクリプト>

//WebSocket への参照

var ws;

//このセッション用に生成された一意のランダム ID

var myId = Math.floor(100000*Math.random());

//現在表示されている行数

var rowCount;

関数 updateSocketStatus(メッセージ){

document.getElementById("socketStatus").innerHTML = message;

}

関数 updateGeolocationStatus(メッセージ){

document.getElementById("geoStatus").innerHTML = message;

}

関数loadDemo(){

//ブラウザが WebSocket をサポートしていることを確認してください

if(window.WebSocket){

url = "ws://localhost:8080";//ブロードキャスト WebSocket サーバーの場所

ws = 新しい WebSocket(url);

ws.onopen = function(){

updateSocketStatus("接続が確立されました");

}

ws.onmessage = function(e){

updateSocketStatus("位置情報の更新:" dataReturned(e.data));

}

}

var geo;

if(navigator.geolocation){

地理 = navigator.geolocation;

updateGeolocationStatus("ブラウザは HTML5 地理位置情報をサポートしています");

}

geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//20 秒ごとに更新します

関数 updateLocation(位置){

var latitude = 位置.coords.latitude;

var 経度 = 位置.座標.経度;

var timestamp = 位置.timestamp;

updateGeolocationStatus("位置情報更新時刻: " タイムスタンプ);

var toSend = JSON.stringify([myId,緯度,経度]);

sendMyLocation(送信先);

}

関数 sendMyLocation(newLocation){

if(ws){

ws.send(newLocation)

}

}

関数 dataReturned(locationData){

var allData = JSON.parse(locationData);

var incomingId = allData[1];

var incomingLat = allData[2];

var incomingLong = allData[3];

var incomingRow = document.getElementById(incomingId);

if(!incomingRow){

incomingRow = document.getElementById("div");

incomingRow.setAttribute("id",incomingId);

incomingRow.userText = (incomingId == myId)?"Me":'User' rowCount;

行数 ;

document.body.appendChild(incomingRow);

}

incomingRow.innerHTML = incomingRow.userText " \ Lat: "

incomingLat " \ Lon: "

incomingLong;

return incomingRow.userText;

}

関数 handleLocationError(error){

スイッチ(エラーコード){

ケース 0:

updateGeolocationStatus("位置情報の取得エラー: " error.message);

break;

ケース 1:

updateGeolocationStatus("ユーザーが位置情報へのアクセスをブロックしました。");;

break;

ケース 2:

updateGeolocationStatus("ブラウザは位置情報を検出できません: " error.message);

break;

ケース 3:

updateGeolocationStatus("位置情報の取得中にブラウザがタイムアウトしました。");

break;

}
}