国产成人精品18p,天天干成人网,无码专区狠狠躁天天躁,美女脱精光隐私扒开免费观看

html5中怎么利用websockets實(shí)現全雙工通信

發(fā)布時(shí)間：2021-07-27 11:48 來(lái)源：億速云 閱讀：0 作者：Leah 欄目： web開(kāi)發(fā)

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

1、WebSocket握手

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

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

2、WebSocket接口

除了對WebSocket協(xié)議的定義之外，還定義了用于JavaScript應用程序的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

本節討論HTML5 WebSockets的使用方法

1、檢測瀏覽器是否支持

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

2、API的基本用法

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

代碼如下:


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

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

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

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

代碼如下:


ws.onopen = function(){
log("open");
}
ws.onmessage = function(){
log(e.data);
}
ws.onclose = function(){
log("closed");
}

c. 發(fā)送消息

當socket處于打開(kāi)狀態(tài)（即調用onopen監聽(tīng)程序之后，調用onclose監聽(tīng)程序之前），可以使用send方法發(fā)送消息。

ws.send("Hello World");

三、HTML5 WebSockets 應用示例

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

1、編寫(xiě)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服務(wù)器位置
 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("位置更新時(shí)間：" + 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>  //為該會(huì )話(huà)生成的唯一隨機的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服務(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("更新位置數據：" + 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("檢索位置信息出錯: " + error.message);</p> <p>break;</p> <p>    case 1:</p> <p>updateGeolocationStatus("用戶(hù)阻止獲取位置信息。");</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>

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自互聯(lián)網(wǎng)轉載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權請聯(lián)系站長(cháng)郵箱：ts@56dr.com進(jìn)行舉報，并提供相關(guān)證據，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容。

  • 100倍故障賠償
  • 1天無(wú)理由退款
  • 7x24小時(shí)服務(wù)
  • 0元快速備案
  • 1V1專(zhuān)席秘書(shū)
国内自产少妇自拍区免费| 女人高潮内射99精品| 成人免费看AA片| 亚洲AV之男人的天堂网站| 精品一区二区不卡无码AV| 久久精品aⅴ无码中文字字幕不卡|