html5的websockets全双工通信详解学习示例


Posted in HTML / CSS onFebruary 26, 2014

目前实时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>
HTML / CSS 相关文章推荐
css3 background属性调整增强介绍
Dec 18 HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
HTML5+CSS3应用详解
Feb 24 #HTML / CSS
html5中valid、invalid、required的定义
Feb 21 #HTML / CSS
html5实现多文件的上传示例代码
Feb 13 #HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 #HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 #HTML / CSS
html5画布旋转效果示例
Jan 27 #HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 #HTML / CSS
You might like
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
超级退弹代码
2008/07/07 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
举例讲解Python中装饰器的用法
2015/04/27 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
Python线程指南分享
2019/11/19 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
企业厂长岗位职责
2013/12/17 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
五年级作文之想象作文
2019/10/30 职场文书
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫