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代码实现文字描边
Apr 25 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
Mar 27 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP静态类
2006/11/25 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
分享PHP守护进程类
2015/12/30 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
JS hashMap实例详解
2016/05/26 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
python实现倒计时的示例
2014/02/14 Python
python绘制简单彩虹图
2018/11/19 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
Notino法国:购买香水和化妆品
2019/04/15 全球购物
七年级历史教学反思
2014/02/05 职场文书
五年级数学教学反思
2014/02/11 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
环保志愿者活动方案
2014/08/14 职场文书
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技
微信小程序调用python模型
2022/04/21 Python