本篇文章為大家展示了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文件
代碼如下:
<!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> <h2>HTML5 WebSocket / Geolocation 追蹤器</h2></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代碼
代碼如下:
function loadDemo(){
//確保瀏覽器支持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(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("位置更新時間：" + timestamp);
var toSend = JSON.stringify([myId,latitude,longitude]);
sendMyLocation(toSend);
}
4、合并所有內容
代碼如下:
<!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> <h2>HTML5 WebSocket / Geolocation 追蹤器</h2></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> //為該會話生成的唯一隨機的ID</p>
<p> var myId = Math.floor(100000*Math.random());</p>
<p> //當前顯示的行數</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服務器位置</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("更新位置數據：" + 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("位置更新時間：" + 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("檢索位置信息出錯: " + 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("瀏覽器檢索位置信息超時。");</p>
<p>break;</p>
<p> }
}</p>
<p> </script></p>
<p></html>
上述內容就是html5中怎么利用websockets實現全雙工通信，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
