html5的websockets全双工通信详解学习示例
发布时间：2014-02-26 14:43:07 作者：佚名 
我要评论
我要评论本文主要研究HTML5 WebSockets的使用方法，它是HTML5中最强大的通信功能，定义了一个全双工的通信信道，只需Web上的一个Socket即可进行通信，能减少不必要的网络流量并降低网络延迟。HTML5 WebSockets能使数据从几千字节减少到两字节，延迟从150ms减少到50ms，并且完美
目前实时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>
相关文章
本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用户体验，感兴趣的朋友一起看看吧2025-06-18- 在HTML5中，<button>标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的<button>标签，详细介绍其属性、样式以及实际2025-06-18
基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)
本文将深入剖析一段基于 HTML5 Canvas 的代码，该代码实现了图片的旋转（90 度和 180 度）以及旋转后图片的下载功能,通过对代码的解读，我们可以学习到如何利用 Canvas API2025-06-18
HTML5 getUserMedia API网页录音实现指南示例小结
本教程将指导你如何利用这一API，结合Web Audio API，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步详解,此外，还讨论了getUserMedia API的使用限制和最2025-06-16- HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5 搜索框Search Box2025-06-13
- Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中Checkbox标签的深入全面解2025-06-13
- 本实例展示了一种基于HTML5技术的图片上传功能，无需外部插件即可通过拖放图片实现上传,涉及到HTML5的拖放API和File API，以及使用CSS来增强用户界面的交互性和视觉反馈，2025-05-16
- 在HTML5和CSS中，定位(positioning)是控制元素在页面上位置的重要机制,主要有四种定位方式：静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed),2025-05-13
- Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探讨HTML5中Microdata的使用方法以及2025-04-21
在HTML语法中，表格主要通过< table >、< tr >和< td >3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧2025-04-21
最新评论