html5的websockets全雙工通訊詳解學習範例_html5教學技巧

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

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

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

一、解讀HTML5 WebSockets

1、WebSocket握手

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

註：在網路中，每個訊息以0x00位元組開頭，以0xFF結尾，中間資料採用UTF-8編碼格式。

2、WebSocket介面

除了WebSocket協定的定義之外，還定義了用於JavaScript應用程式的WebSocket介面。

複製程式碼

程式碼如下:

interm URL;
//就緒狀態
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2; >readonly attribute unsigned short bufferedAmount;
//網路
attribute Function onopen;
attribute Function onmessage;
attribute Function onclose; ();
};
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檔

複製程式碼

程式碼如下:

HTML5 WebSocket / Geolocation 追蹤器

Geolocation:

你的瀏覽器不支援HTML5 Geolocation

WebSocket:

你的瀏覽器不支援HTML5 Web Sockets

2、新增WebSocket程式碼

複製程式碼

程式碼如下:

function loadDemo()>De /確保瀏覽器支援WebSocket
if(window.WebSocket){
url = "ws://localhost:8080";//broadcast WebSocket伺服器位置
ws = new WebSocket(url);
ws.onopen = function(){
updateSocketStatus("連線已建立");
}
ws.onmessage = function(e){
updateSocketeStatus("更新位置資料：" dataReturned( e.data));
}
}
}

3、新增Geolocation代碼

複製程式碼程式碼如下:

var geo;

if
if
if
if
if
if
if
if
if
if
if
.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.Statpampate;更新時間：" timestamp);

var toSend = JSON.stringify([myId,latitude,longitude]);
sendMyLocation(toSend);

}

4、合併所有內容

複製程式碼程式碼如下:

HTML5 WebSocket / Geolocation 追踪器

Geolocation:

你的浏览器不支持HTML5 Geolocation

WebSocket:

你的浏览器不支持HTML5 Web Sockets