今天小编跟大家讲解下有关html5的websockets全双工通信详解学习示例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5的websockets全双工通信详解学习示例 的相关资料，希望小伙伴们看了有所帮助。
目前实时Web应用的实现方式 大部分是围绕轮询和其他服务器端推送技术展开的 其中最著名的是Comet。Comet技术可以让服务器主动以异步方式向客户端推送数据。
使用轮询时 浏览器定期发送HTTP请求 并随即接收响应；使用长轮询时 浏览器向服务器发送一个请求 服务器会在一段时间内将其保持在打开状态；使用流解决方案时 浏览器会发送一个完整的HTTP请求 但服务器会发送并保持一个处于打开状态的响应 该响应持续更新并无限期处于打开状态。
上述的三个方法 在发送实时数据时都会涉及到HTTP请求和响应包头 且包含大量额外的、不必要的报头数据 会造成传输延迟。
一、解读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="https://www.aidi.net.cn//html5/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代码
复制代码代码如下: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="https://www.aidi.net.cn//html5/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> //为该会话生成的唯一随机的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>
来源：爱蒂网
