日韩欧美高清一区二区三区,亚洲自拍偷拍网,日韩极品在线

主頁 > 知識庫 > html5的websockets全雙工通信詳解學習示例

html5的websockets全雙工通信詳解學習示例

目前實時Web應用的實現方式，大部分是圍繞輪詢和其他服務器端推送技術展開的，其中最著名的是Comet。Comet技術可以讓服務器主動以異步方式向客戶端推送數據。

使用輪詢時，瀏覽器定期發送HTTP請求，并隨即接收響應；使用長輪詢時，瀏覽器向服務器發送一個請求，服務器會在一段時間內將其保持在打開狀態；使用流解決方案時，瀏覽器會發送一個完整的HTTP請求，但服務器會發送并保持一個處于打開狀態的響應，該響應持續更新并無限期處于打開狀態。

上述的三個方法，在發送實時數據時都會涉及到HTTP請求和響應包頭，且包含大量額外的、不必要的報頭數據，會造成傳輸延遲。

一、解讀HTML5 WebSockets

1、WebSocket握手

為了建立WebSocket通信，客戶端和服務器在初始握手時，將HTTP協議升級到WebSocket協議。一旦連接建立成功，就可以在全雙工模式下在客戶端和服務器之間來回傳送WebSocket消息。

注：在網絡中，每個消息以0x00字節開頭，以0xFF結尾，中間數據采用UTF-8編碼格式。

2、WebSocket接口

除了對WebSocket協議的定義之外，還定義了用于JavaScript應用程序的WebSocket接口。

復制代碼

代碼如下:

interface WebSocket{
readonly attribute DOMString URL;
//就緒狀態
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute unsigned short readyState;
readonly attribute unsigned short bufferedAmount;
//網絡
attribute Function onopen;
attribute Function onmessage;
attribute Function onclose;
boolean send(in DOMSString data);
void close();
};
WebSocket implements EventTarget;

注意：ws://和wss://前綴分別表示WebSocket連接和安全的WebSocket連接。

二、HTML5 WebSockets API

本節討論HTML5 WebSockets的使用方法

1、檢測瀏覽器是否支持

通過window.WebSocket來判斷瀏覽器是否支持。

2、API的基本用法

a. WebSocket對象的創建以及與WebSocket服務器的連接

復制代碼

代碼如下:

url = "ws://localhost:8080/echo";
ws = new WebSocket(url);

b. 添加事件監聽器

WebSocket遵循異步編程模型，打開socket后，只需等待事件發生，而不需主動向服務器輪詢，因此需要添加回調函數來監聽事件。

WebSocket對象有三個事件：open、close和message。當連接建立時觸發open事件，當收到消息時觸發message事件，當WebSocket連接關閉時觸發close事件。

復制代碼

代碼如下:

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

c. 發送消息

當socket處于打開狀態（即調用onopen監聽程序之后，調用onclose監聽程序之前），可以使用send方法發送消息。

ws.send("Hello World");

三、HTML5 WebSockets 應用示例

本節將結合前面講述的Geolocation接口來創建一個直接在Web頁面中計算距離的應用。

1、編寫HTML文件

復制代碼

代碼如下:

2、添加WebSocket代碼

復制代碼

代碼如下:

3、添加Geolocation代碼

復制代碼

代碼如下:

var geo;
if(navigator.geolocation){
geo = navigator.geolocation;
updateGeolocationStatus("瀏覽器支持HTML5 Geolocation");
} geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次 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、合并所有內容

復制代碼

代碼如下:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HTML5 WebSocket / Geolocation 追蹤器</title> <link rel="stylesheet" href="styles.css"> </head> <body onload="loadDemo()"> <h1>HTML5 WebSocket / Geolocation 追蹤器</h1> <div>Geolocation: 你的瀏覽器不支持HTML5 Geolocation</div> <div>WebSocket: 你的瀏覽器不支持HTML5 Web Sockets</div> </body> <script> //WebSocket的引用 var ws; //為該會話生成的唯一隨機的ID var myId = Math.floor(100000*Math.random()); //當前顯示的行數 var rowCount; function updateSocketStatus(message){ document.getElementById("socketStatus").innerHTML = message; } function updateGeolocationStatus(message){ document.getElementById("geoStatus").innerHTML = message; } function loadDemo(){ //確保瀏覽器支持WebSocket if(window.WebSocket){ url = "ws://localhost:8080";//broadcast WebSocket服務器位置 ws = new WebSocket(url); ws.onopen = function(){ updateSocketStatus("連接已建立"); } ws.onmessage = function(e){ updateSocketStatus("更新位置數據：" + dataReturned(e.data)); } } var geo; if(navigator.geolocation){ geo = navigator.geolocation; updateGeolocationStatus("瀏覽器支持HTML5 Geolocation"); } geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次 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); } function sendMyLocation(newLocation){ if(ws){ ws.send(newLocation) } } function 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; rowCount++; document.body.appendChild(incomingRow); } incomingRow.innerHTML = incomingRow.userText + " \\ Lat: " + incomingLat + " \\ Lon: " + incomingLong; return incomingRow.userText; } function handleLocationError(error){ switch(error.code){ case 0: updateGeolocationStatus("檢索位置信息出錯: " + error.message); break; case 1: updateGeolocationStatus("用戶阻止獲取位置信息。"); break; case 2: updateGeolocationStatus("瀏覽器不能檢測你的位置信息: " + error.message); break; case 3: updateGeolocationStatus("瀏覽器檢索位置信息超時。"); break; }
} </script> </html>

標簽：平頂山黃石公主嶺黃石山南平涼陜西南平

巨人網絡通訊聲明：本文標題《html5的websockets全雙工通信詳解學習示例》，本文關鍵詞 html5,的,websockets,全,雙工,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。