《HTML5编程之旅》系列三：WebSockets 技术解析
本文主要研究HTML5 WebSockets的使用方法，它是HTML5中最强大的通信功能，定义了一个全双工的通信信道，只需Web上的一个Socket即可进行通信，能减少不必要的网络流量并降低网络延迟。HTML5 WebSockets能使数据从几千字节减少到两字节，延迟从150ms减少到50ms，并且完美淘汰传统的Comet和Ajax轮询（polling）、长轮询（long-polling）以及流（streaming）解决方案。
目前实时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);
上述两行代码也可以合并为一行代码：
ws = new WebSocket("ws://localhost:8080/echo");
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> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HTML5 WebSocket / Geolocation 追踪器</title> <link rel="stylesheet" href="styles.css"> </head> <body onload="loadDemo()"> <h1>HTML5 WebSocket / Geolocation 追踪器</h1> <div><strong>Geolocation</strong>: <p id="geoStatus">你的浏览器不支持HTML5 Geolocation</p></div> <div><strong>WebSocket</strong>: <p id="socketStatus">你的浏览器不支持HTML5 Web Sockets</p></div> </body> </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");
}
geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次
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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 WebSocket / Geolocation 追踪器</title>
<link rel="stylesheet" href="styles.css">
</head>
<body onload="loadDemo()">
<h1>HTML5 WebSocket / Geolocation 追踪器</h1>
<div><strong>Geolocation</strong>: <p id="geoStatus">你的浏览器不支持HTML5 Geolocation</p></div>
<div><strong>WebSocket</strong>: <p id="socketStatus">你的浏览器不支持HTML5 Web Sockets</p></div>
</body>
<script>
//WebSocket的引用
var ws;
//为该会话生成的唯一随机的ID
var myId = Math.floor(100000*Math.random());
//当前显示的行数
var rowCount;
function updateSocketStatus(message){
document.getElementById("socketStatus").innerHTML = message;
}
function updateGeolocationStatus(message){
document.getElementById("geoStatus").innerHTML = message;
}
function loadDemo(){
//确保浏览器支持WebSocket
if(window.WebSocket){
url = "ws://localhost:8080";//broadcast WebSocket服务器位置
ws = new WebSocket(url);
ws.onopen = function(){
updateSocketStatus("连接已建立");
}
ws.onmessage = function(e){
updateSocketStatus("更新位置数据：" + dataReturned(e.data));
}
}
var geo;
if(navigator.geolocation){
geo = navigator.geolocation;
updateGeolocationStatus("浏览器支持HTML5 Geolocation");
}
geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次
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);
}
function sendMyLocation(newLocation){
if(ws){
ws.send(newLocation)
}
}
function dataReturned(locationData){
var allData = JSON.parse(locationData);
var incomingId = allData[1];
var incomingLat = allData[2];
var incomingLong = allData[3];
var incomingRow = document.getElementById(incomingId);
if(!incomingRow){
incomingRow = document.getElementById("div");
incomingRow.setAttribute("id",incomingId);
incomingRow.userText = (incomingId == myId)?"Me":'User' + rowCount;
rowCount++;
document.body.appendChild(incomingRow);
}
incomingRow.innerHTML = incomingRow.userText + " \\ Lat: " +
incomingLat + " \\ Lon: " +
incomingLong;
return incomingRow.userText;
}
function handleLocationError(error){
switch(error.code){
case 0:
updateGeolocationStatus("检索位置信息出错: " + error.message);
break;
case 1:
updateGeolocationStatus("用户阻止获取位置信息。");
break;
case 2:
updateGeolocationStatus("浏览器不能检测你的位置信息: " + error.message);
break;
case 3:
updateGeolocationStatus("浏览器检索位置信息超时。");
break;
}
}
</script>
</html>
注意：上述代码的运行需要一个额外服务器的支持，在此把原书里提供的使用Python写的服务器文件附上，关于如何运行Python，请参考网上其他资料。
本文链接：http://www.cnblogs.com/oooweb/p/html5-websockets-tutorials.html
via ocshina
《HTML5编程之旅》系列三：WebSockets 技术解析的更多相关文章
- HTML5编程之旅系列一：HTML5 Geolocation 初探
让我们假设这样一个场景,有一个web应用程序,它可以向用户提供附近不远处某商场的打折优惠信息.使用HTML5 Geolocation API(地理定位 API),可以请求用户共享他们的位置信息. HT ...
- VSTO之旅系列(三)：自定义Excel UI
原文:VSTO之旅系列(三):自定义Excel UI 本专题概要 引言 自定义任务窗体(Task Pane) 自定义选项卡,即Ribbon 自定义上下文菜单 小结 引言 在上一个专题中为大家介绍如何创 ...
- 《HTML5编程之旅》系列二：Communication 技术初探
本文主要探讨用于构建实时跨源通信的两个模块:跨文档消息通信(Cross Document Messaging)和XMLHttpRequestLevel2.通过这两个模块,我们可以构建不同域间进行安全 ...
- 【Swift学习】Swift编程之旅（三）
元组(tuples) tuples是将多个单一的值组合为一个复合的值.它可以包含任何类型的值,而不需要都是相同类型. 一.元组的创建 1. let http404error = (,"NOT ...
- 【Java集合系列三】Vector-Stack解析
2017-07-29 12:59:14 一.简介 1.Vector继承关系 2.Vector类扩容 Vector类的实现和ArrayList极其相似,都使用数组存储元素,但是扩容策略不一样,Array ...
- WCF编程系列(三)地址与绑定
WCF编程系列(三)地址与绑定 地址 地址指定了接收消息的位置,WCF中地址以统一资源标识符(URI)的形式指定.URI由通讯协议和位置路径两部分组成,如示例一中的: http://loc ...
- sed修炼系列(三)：sed高级应用之实现窗口滑动技术
html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
- Hadoop MapReduce编程 API入门系列之压缩和计数器（三十）
不多说,直接上代码. Hadoop MapReduce编程 API入门系列之小文件合并(二十九) 生成的结果,作为输入源. 代码 package zhouls.bigdata.myMapReduce. ...
- VSTO之旅系列(五)：创建Outlook解决方案
原文:VSTO之旅系列(五):创建Outlook解决方案 本专题概要 引言 Outlook对象模型 自定义Outlook窗体 小结 一.引言 在上一个专题中,为大家简单介绍了下如何创建Word解决方案 ...
随机推荐
- html个人网页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Struts2：<s:action>的使用
<s:action name=”actionName” namespace=”/” executeResult=”true”> <s:action>可以在jsp中直接调用act ...
- 七周七语言之使用prolog解决爱因斯坦斑马难题
如果你想获得更好的阅读体验,可以前往我在 github 上的博客进行阅读,http://lcomplete.github.io/blog/2013/06/28/sevenlang-prolog/. 目 ...
- android studio 运行太慢了
Android Studio每次升级/安装 Android Studio 之后最好都修改一下这个参数:到 Android Studio 安装目录,找到 bin/studio(64?).vmoption ...
- SQL中 ALL 和 ANY 区别的
在select中我们可能会认为all和any应该表达的意思差不多.其实他们的意思完全不一样: all: 是将后面的内容看成一个整体,如: >all (select age from studen ...
- Vue 定时执行函数
var app = new Vue({ el: '#app', data: { count: , }, filters: { }, mounted: function () { this.$nextT ...
- 在MVC中，网页head中页面主菜单间切换时，给当前菜单项添加样式
在Head部,添加如下代码: html代码 <ul class="nav navbar-nav" id="topmenu"> <li>& ...
- USB硬件接口相关
1.USB 设备端的D+为何要拉一个1.5K电阻到3.3v上?(USB是5v供电,但通信的电平是3.3v,所以上拉电平为3.3v:若要上拉到5v,则上拉电阻为10k) usb有主从设备之分,主设备有: ...
- php获取字符串的编码格式的方法（函数）
// 检测字符的编码格式 $encode = mb_detect_encoding($string, array('ASCII','UTF-8','GB2312','GBK','BIG5')); ec ...
- Contest 5
A:这我怎么没学傻了啊.整个一傻逼题一眼容斥我连暴力都写不出来啊.显然序列是没有什么用的,考虑求众数小于x的概率,显然可以枚举有几个超过容斥一发.虽然要算的组合数非常大,发现可以抵消很大一部分,最后算 ...