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="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="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>

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！