html5的websockets全雙工通信詳解學(xué)習(xí)示例
發(fā)布時(shí)間：2014-02-26 14:43:07 作者：佚名 
我要評論
我要評論本文主要研究HTML5 WebSockets的使用方法，它是HTML5中最強(qiáng)大的通信功能，定義了一個(gè)全雙工的通信信道，只需Web上的一個(gè)Socket即可進(jìn)行通信，能減少不必要的網(wǎng)絡(luò)流量并降低網(wǎng)絡(luò)延遲。HTML5 WebSockets能使數(shù)據(jù)從幾千字節(jié)減少到兩字節(jié)，延遲從150ms減少到50ms，并且完美
目前實(shí)時(shí)Web應(yīng)用的實(shí)現(xiàn)方式，大部分是圍繞輪詢和其他服務(wù)器端推送技術(shù)展開的，其中最著名的是Comet。Comet技術(shù)可以讓服務(wù)器主動(dòng)以異步方式向客戶端推送數(shù)據(jù)。
使用輪詢時(shí)，瀏覽器定期發(fā)送HTTP請求，并隨即接收響應(yīng)；使用長輪詢時(shí)，瀏覽器向服務(wù)器發(fā)送一個(gè)請求，服務(wù)器會(huì)在一段時(shí)間內(nèi)將其保持在打開狀態(tài)；使用流解決方案時(shí)，瀏覽器會(huì)發(fā)送一個(gè)完整的HTTP請求，但服務(wù)器會(huì)發(fā)送并保持一個(gè)處于打開狀態(tài)的響應(yīng)，該響應(yīng)持續(xù)更新并無限期處于打開狀態(tài)。
上述的三個(gè)方法，在發(fā)送實(shí)時(shí)數(shù)據(jù)時(shí)都會(huì)涉及到HTTP請求和響應(yīng)包頭，且包含大量額外的、不必要的報(bào)頭數(shù)據(jù)，會(huì)造成傳輸延遲。
一、解讀HTML5 WebSockets
1、WebSocket握手
為了建立WebSocket通信，客戶端和服務(wù)器在初始握手時(shí)，將HTTP協(xié)議升級到WebSocket協(xié)議。一旦連接建立成功，就可以在全雙工模式下在客戶端和服務(wù)器之間來回傳送WebSocket消息。
注：在網(wǎng)絡(luò)中，每個(gè)消息以0x00字節(jié)開頭，以0xFF結(jié)尾，中間數(shù)據(jù)采用UTF-8編碼格式。
2、WebSocket接口
除了對WebSocket協(xié)議的定義之外，還定義了用于JavaScript應(yīng)用程序的WebSocket接口。
復(fù)制代碼
代碼如下:interface WebSocket{
readonly attribute DOMString URL;
//就緒狀態(tài)
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;
//網(wǎng)絡(luò)
attribute Function onopen;
attribute Function onmessage;
attribute Function onclose;
boolean send(in DOMSString data);
void close();
};
WebSocket implements EventTarget;
注意：ws://和wss://前綴分別表示W(wǎng)ebSocket連接和安全的WebSocket連接。
二、HTML5 WebSockets API
本節(jié)討論HTML5 WebSockets的使用方法
1、檢測瀏覽器是否支持
通過window.WebSocket來判斷瀏覽器是否支持。
2、API的基本用法
a. WebSocket對象的創(chuàng)建以及與WebSocket服務(wù)器的連接
復(fù)制代碼
代碼如下:url = "ws://localhost:8080/echo";
ws = new WebSocket(url);
b. 添加事件
WebSocket遵循異步編程模型，打開socket后，只需等待事件發(fā)生，而不需主動(dòng)向服務(wù)器輪詢，因此需要添加回調(diào)函數(shù)來事件。
WebSocket對象有三個(gè)事件：open、close和message。當(dāng)連接建立時(shí)觸發(fā)open事件，當(dāng)收到消息時(shí)觸發(fā)message事件，當(dāng)WebSocket連接關(guān)閉時(shí)觸發(fā)close事件。
復(fù)制代碼
代碼如下:ws.onopen = function(){
log("open");
}
ws.onmessage = function(){
log(e.data);
}
ws.onclose = function(){
log("closed");
}
c. 發(fā)送消息
當(dāng)socket處于打開狀態(tài)（即調(diào)用onopen程序之后，調(diào)用onclose程序之前），可以使用send方法發(fā)送消息。
ws.send("Hello World");
三、HTML5 WebSockets 應(yīng)用示例
本節(jié)將結(jié)合前面講述的Geolocation接口來創(chuàng)建一個(gè)直接在Web頁面中計(jì)算距離的應(yīng)用。
1、編寫HTML文件
復(fù)制代碼
代碼如下:<!DOCTYPE html></p> <p><html></p> <p> <head></p> <p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></p> <p> <title>HTML5 WebSocket / Geolocation</title></p> <p> <link rel="stylesheet" href="styles.css"></p> <p> </head></p> <p> <body onload="loadDemo()"></p> <p> <h1>HTML5 WebSocket / Geolocation </h1></p> <p> <div><strong>Geolocation</strong>: <p id="geoStatus">你的瀏覽器不支持HTML5 Geolocation</p></div></p> <p> <div><strong>WebSocket</strong>: <p id="socketStatus">你的瀏覽器不支持HTML5 Web Sockets</p></div></p> <p> </body></p> <p></html>
2、添加WebSocket代碼
復(fù)制代碼
代碼如下:function loadDemo(){
//確保瀏覽器支持WebSocket
if(window.WebSocket){
url = "ws://localhost:8080";//broadcast WebSocket服務(wù)器位置
ws = new WebSocket(url);
ws.onopen = function(){
updateSocketStatus("連接已建立");
}
ws.onmessage = function(e){
updateSocketeStatus("更新位置數(shù)據(jù)：" + dataReturned(e.data));
}
}
}
3、添加Geolocation代碼
復(fù)制代碼
代碼如下:var geo;
if(navigator.geolocation){
geo = navigator.geolocation;
updateGeolocationStatus("瀏覽器支持HTML5 Geolocation");
}</p> <p>geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次</p> <p>function updateLocation(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var timestamp = position.timestamp;
updateGeolocationStatus("位置更新時(shí)間：" + timestamp);
var toSend = JSON.stringify([myId,latitude,longitude]);
sendMyLocation(toSend);
}
4、合并所有內(nèi)容
復(fù)制代碼
代碼如下:<!DOCTYPE html></p> <p><html></p> <p> <head></p> <p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></p> <p> <title>HTML5 WebSocket / Geolocation </title></p> <p> <link rel="stylesheet" href="styles.css"></p> <p> </head></p> <p> <body onload="loadDemo()"></p> <p> <h1>HTML5 WebSocket / Geolocation </h1></p> <p> <div><strong>Geolocation</strong>: <p id="geoStatus">你的瀏覽器不支持HTML5 Geolocation</p></div></p> <p> <div><strong>WebSocket</strong>: <p id="socketStatus">你的瀏覽器不支持HTML5 Web Sockets</p></div></p> <p> </body></p> <p> <script></p> <p> //WebSocket的引用</p> <p> var ws;</p> <p> //為該會(huì)話生成的唯一隨機(jī)的ID</p> <p> var myId = Math.floor(100000*Math.random());</p> <p> //當(dāng)前顯示的行數(shù)</p> <p> var rowCount;</p> <p> function updateSocketStatus(message){</p> <p> document.getElementById("socketStatus").innerHTML = message;</p> <p> }</p> <p> function updateGeolocationStatus(message){</p> <p> document.getElementById("geoStatus").innerHTML = message;</p> <p> }</p> <p> function loadDemo(){</p> <p> //確保瀏覽器支持WebSocket</p> <p> if(window.WebSocket){</p> <p> url = "ws://localhost:8080";//broadcast WebSocket服務(wù)器位置</p> <p> ws = new WebSocket(url);</p> <p> ws.onopen = function(){</p> <p> updateSocketStatus("連接已建立");</p> <p> }</p> <p> ws.onmessage = function(e){</p> <p> updateSocketStatus("更新位置數(shù)據(jù)：" + dataReturned(e.data));</p> <p> }</p> <p> }</p> <p> var geo;</p> <p> if(navigator.geolocation){</p> <p> geo = navigator.geolocation;</p> <p> updateGeolocationStatus("瀏覽器支持HTML5 Geolocation");</p> <p> }</p> <p> geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次</p> <p> function updateLocation(position){</p> <p> var latitude = position.coords.latitude;</p> <p> var longitude = position.coords.longitude;</p> <p> var timestamp = position.timestamp;</p> <p> updateGeolocationStatus("位置更新時(shí)間：" + timestamp);</p> <p> var toSend = JSON.stringify([myId,latitude,longitude]);</p> <p> sendMyLocation(toSend);</p> <p> }</p> <p> function sendMyLocation(newLocation){</p> <p> if(ws){</p> <p> ws.send(newLocation)</p> <p> }</p> <p> }</p> <p> function dataReturned(locationData){</p> <p> var allData = JSON.parse(locationData);</p> <p> var incomingId = allData[1];</p> <p> var incomingLat = allData[2];</p> <p> var incomingLong = allData[3];</p> <p> var incomingRow = document.getElementById(incomingId);</p> <p> if(!incomingRow){</p> <p> incomingRow = document.getElementById("div");</p> <p> incomingRow.setAttribute("id",incomingId);</p> <p> incomingRow.userText = (incomingId == myId)?"Me":'User' + rowCount;</p> <p> rowCount++;</p> <p> document.body.appendChild(incomingRow);</p> <p> }</p> <p> incomingRow.innerHTML = incomingRow.userText + " \\ Lat: " +</p> <p> incomingLat + " \\ Lon: " +</p> <p> incomingLong;</p> <p> return incomingRow.userText;</p> <p> }</p> <p> function handleLocationError(error){</p> <p> switch(error.code){</p> <p> case 0:</p> <p>updateGeolocationStatus("檢索位置信息出錯(cuò): " + error.message);</p> <p>break;</p> <p> case 1:</p> <p>updateGeolocationStatus("用戶阻止獲取位置信息。");</p> <p>break;</p> <p> case 2:</p> <p>updateGeolocationStatus("瀏覽器不能檢測你的位置信息: " + error.message);</p> <p>break;</p> <p> case 3:</p> <p>updateGeolocationStatus("瀏覽器檢索位置信息超時(shí)。");</p> <p>break;</p> <p> }
}</p> <p> </script></p> <p></html>
相關(guān)文章
HTML5實(shí)現(xiàn)的移動(dòng)端購物車自動(dòng)結(jié)算功能示例代碼
本文介紹HTML5實(shí)現(xiàn)移動(dòng)端購物車自動(dòng)結(jié)算,通過WebStorage、事件監(jiān)聽、DOM操作等技術(shù),確保實(shí)時(shí)更新與數(shù)據(jù)同步,優(yōu)化性能及無障礙性,提升用戶體驗(yàn)，感興趣的朋友一起看看吧2025-06-18- 在HTML5中，<button>標(biāo)簽用于定義一個(gè)可點(diǎn)擊的按鈕，它是創(chuàng)建交互式網(wǎng)頁的重要元素之一，本文將深入解析HTML5中的<button>標(biāo)簽，詳細(xì)介紹其屬性、樣式以及實(shí)際2025-06-18
基于 HTML5 Canvas 實(shí)現(xiàn)圖片旋轉(zhuǎn)與下載功能(完整代碼展示)
本文將深入剖析一段基于 HTML5 Canvas 的代碼，該代碼實(shí)現(xiàn)了圖片的旋轉(zhuǎn)（90 度和 180 度）以及旋轉(zhuǎn)后圖片的下載功能,通過對代碼的解讀，我們可以學(xué)習(xí)到如何利用 Canvas API2025-06-18
HTML5 getUserMedia API網(wǎng)頁錄音實(shí)現(xiàn)指南示例小結(jié)
本教程將指導(dǎo)你如何利用這一API，結(jié)合Web Audio API，實(shí)現(xiàn)網(wǎng)頁錄音功能,從獲取音頻流到處理和保存錄音，整個(gè)過程將逐步詳解,此外，還討論了getUserMedia API的使用限制和最2025-06-16- HTML5的搜索框是一個(gè)強(qiáng)大的工具，能夠有效提升用戶體驗(yàn),通過結(jié)合自動(dòng)補(bǔ)全功能和適當(dāng)?shù)臉邮?，可以?chuàng)建出既美觀又實(shí)用的搜索界面,這篇文章給大家介紹HTML5 搜索框Search Box2025-06-13
- Checkbox是HTML5中非常重要的表單元素之一，通過合理使用其屬性和樣式自定義方法，可以為用戶提供豐富多樣的交互體驗(yàn)，這篇文章給大家介紹HTML5中Checkbox標(biāo)簽的深入全面解2025-06-13
HTML5無插件拖拽圖片上傳功能實(shí)現(xiàn)過程
本實(shí)例展示了一種基于HTML5技術(shù)的圖片上傳功能，無需外部插件即可通過拖放圖片實(shí)現(xiàn)上傳,涉及到HTML5的拖放API和File API，以及使用CSS來增強(qiáng)用戶界面的交互性和視覺反饋，2025-05-16- 在HTML5和CSS中，定位(positioning)是控制元素在頁面上位置的重要機(jī)制,主要有四種定位方式：靜態(tài)定位(static)、相對定位(relative)、絕對定位(absolute)和固定定位(fixed),2025-05-13
- Microdata作為HTML5新增的一個(gè)特性，它允許開發(fā)者在HTML文檔中添加更多的語義信息，以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容，本文將探討HTML5中Microdata的使用方法以及2025-04-21
在HTML語法中，表格主要通過< table >、< tr >和< td >3個(gè)標(biāo)簽構(gòu)成,本文通過實(shí)例代碼講解HTML5表格語法格式，感興趣的朋友一起看看吧2025-04-21
