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

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到阿克陶網(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ù)器之間來(lái)回傳送WebSocket消息。

注：在網(wǎng)絡(luò)中，每個(gè)消息以0x00字節(jié)開(kāi)頭，以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、檢測(cè)瀏覽器是否支持

通過(guò)window.WebSocket來(lái)判斷瀏覽器是否支持。

2、API的基本用法

a. WebSocket對(duì)象的創(chuàng)建以及與WebSocket服務(wù)器的連接

代碼如下:

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

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

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

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處于打開(kāi)狀態(tài)（即調(diào)用onopen監(jiān)聽(tīng)程序之后，調(diào)用onclose監(jiān)聽(tīng)程序之前），可以使用send方法發(fā)送消息。

ws.send("Hello World");

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

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

1、編寫(xiě)HTML文件

代碼如下:

 

 

 

 

HTML5 WebSocket / Geolocation 追蹤器

 

 

2、添加WebSocket代碼

代碼如下:

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代碼

代碼如下:

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)容

代碼如下:

 

 

 

 

HTML5 WebSocket / Geolocation 追蹤器

 

 

 

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

當(dāng)前名稱：html5中怎么利用websockets實(shí)現(xiàn)全雙工通信-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)源：http://weahome.cn/article/dpgjdp.html