html5中怎么利用websockets實(shí)現(xiàn)全雙工通信-創(chuàng)新互聯(lián)

本篇文章為大家展示了html5中怎么利用websockets實(shí)現(xiàn)全雙工通信，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

站在用戶的角度思考問題，與客戶深入溝通，找到阿克陶網(wǎng)站設(shè)計(jì)與阿克陶網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋阿克陶地區(qū)。

1、WebSocket握手

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

注：在網(wǎng)絡(luò)中，每個(gè)消息以0x00字節(jié)開頭，以0xFF結(jié)尾，中間數(shù)據(jù)采用UTF-8編碼格式。

2、WebSocket接口

除了對(duì)WebSocket協(xié)議的定義之外，還定義了用于JavaScript應(yīng)用程序的WebSocket接口。

代碼如下:

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對(duì)象的創(chuàng)建以及與WebSocket服務(wù)器的連接

代碼如下:

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

b. 添加事件監(jiān)聽器

WebSocket遵循異步編程模型，打開socket后，只需等待事件發(fā)生，而不需主動(dòng)向服務(wù)器輪詢，因此需要添加回調(diào)函數(shù)來監(jiān)聽事件。

WebSocket對(duì)象有三個(gè)事件：open、close和message。當(dāng)連接建立時(shí)觸發(fā)open事件，當(dāng)收到消息時(shí)觸發(fā)message事件，當(dāng)WebSocket連接關(guān)閉時(shí)觸發(fā)close事件。

代碼如下:

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監(jiān)聽程序之后，調(diào)用onclose監(jiān)聽程序之前），可以使用send方法發(fā)送消息。

ws.send("Hello World");

三、HTML5 WebSockets 應(yīng)用示例

本節(jié)將結(jié)合前面講述的Geolocation接口來創(chuàng)建一個(gè)直接在Web頁面中計(jì)算距離的應(yīng)用。

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("位置更新時(shí)間：" + timestamp);
var toSend = JSON.stringify([myId,latitude,longitude]);
sendMyLocation(toSend);
}

4、合并所有內(nèi)容

代碼如下:

<!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()"> <h2>HTML5 WebSocket / Geolocation 追蹤器</h2> <div>Geolocation: 你的瀏覽器不支持HTML5 Geolocation</div> <div>WebSocket: 你的瀏覽器不支持HTML5 Web Sockets</div> </body> <script> //WebSocket的引用 var ws; //為該會(huì)話生成的隨機(jī)的ID var myId = Math.floor(100000*Math.random()); //當(dāng)前顯示的行數(shù) 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服務(wù)器位置 ws = new WebSocket(url); ws.onopen = function(){ updateSocketStatus("連接已建立"); } ws.onmessage = function(e){ updateSocketStatus("更新位置數(shù)據(jù)：" + 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("位置更新時(shí)間：" + 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("檢索位置信息出錯(cuò): " + error.message); break; case 1: updateGeolocationStatus("用戶阻止獲取位置信息。"); break; case 2: updateGeolocationStatus("瀏覽器不能檢測你的位置信息: " + error.message); break; case 3: updateGeolocationStatus("瀏覽器檢索位置信息超時(shí)。"); break; }
} </script> </html>

上述內(nèi)容就是html5中怎么利用websockets實(shí)現(xiàn)全雙工通信，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：html5中怎么利用websockets實(shí)現(xiàn)全雙工通信-創(chuàng)新互聯(lián)
瀏覽地址：http://www.muchs.cn/article18/dpgjdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、動(dòng)態(tài)網(wǎng)站、用戶體驗(yàn)、手機(jī)網(wǎng)站建設(shè)、商城網(wǎng)站、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容