本文主要研究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 技术解析的更多相关文章

  1. HTML5编程之旅系列一：HTML5 Geolocation 初探

    让我们假设这样一个场景,有一个web应用程序,它可以向用户提供附近不远处某商场的打折优惠信息.使用HTML5 Geolocation API(地理定位 API),可以请求用户共享他们的位置信息. HT ...

  2. VSTO之旅系列(三)：自定义Excel UI

    原文:VSTO之旅系列(三):自定义Excel UI 本专题概要 引言 自定义任务窗体(Task Pane) 自定义选项卡,即Ribbon 自定义上下文菜单 小结 引言 在上一个专题中为大家介绍如何创 ...

  3. 《HTML5编程之旅》系列二：Communication 技术初探

     本文主要探讨用于构建实时跨源通信的两个模块:跨文档消息通信(Cross Document Messaging)和XMLHttpRequestLevel2.通过这两个模块,我们可以构建不同域间进行安全 ...

  4. 【Swift学习】Swift编程之旅（三）

    元组(tuples) tuples是将多个单一的值组合为一个复合的值.它可以包含任何类型的值,而不需要都是相同类型. 一.元组的创建 1. let http404error = (,"NOT ...

  5. 【Java集合系列三】Vector-Stack解析

    2017-07-29 12:59:14 一.简介 1.Vector继承关系 2.Vector类扩容 Vector类的实现和ArrayList极其相似,都使用数组存储元素,但是扩容策略不一样,Array ...

  6. WCF编程系列(三)地址与绑定

    WCF编程系列(三)地址与绑定   地址     地址指定了接收消息的位置,WCF中地址以统一资源标识符(URI)的形式指定.URI由通讯协议和位置路径两部分组成,如示例一中的: http://loc ...

  7. sed修炼系列(三)：sed高级应用之实现窗口滑动技术

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...

  8. Hadoop MapReduce编程 API入门系列之压缩和计数器（三十）

    不多说,直接上代码. Hadoop MapReduce编程 API入门系列之小文件合并(二十九) 生成的结果,作为输入源. 代码 package zhouls.bigdata.myMapReduce. ...

  9. VSTO之旅系列(五)：创建Outlook解决方案

    原文:VSTO之旅系列(五):创建Outlook解决方案 本专题概要 引言 Outlook对象模型 自定义Outlook窗体 小结 一.引言 在上一个专题中,为大家简单介绍了下如何创建Word解决方案 ...

随机推荐

  1. js正则表达式匹配斜杠 网址 url等

    项目中有个需求,需要从url中截取ID.需要在前台用js匹配截取,所以就百度一下,发现都没有说清楚,所以这里就总结下. 正则表达式如下: var epId=0; //工厂企业ID var urlInd ...

  2. lintcode-477-被围绕的区域

    477-被围绕的区域 给一个二维的矩阵,包含 'X' 和 'O', 找到所有被 'X' 围绕的区域,并用 'X' 填充满. 样例 给出二维矩阵: X X X X X O O X X X O X X O ...

  3. php多维数组排序 3

    本文实例讲述了php简单实现多维数组排序的方法.分享给大家供大家参考,具体如下: 之前在做一个功能的时候,必须要把数据放到二维数组里并且排序,然后上网找找解决思路, 这时候会用到array_multi ...

  4. 淘宝免费ip地址查询导致服务堵死的坑

    1.业务中因为想根据用户ip来做一些友好的提示,所以在网上找了个免费的ip查询地址 http://ip.taobao.com/service/getIpInfo.php?ip= 虽然说淘宝的这个地址会 ...

  5. vue-cli配置axios，并基于axios进行后台请求函数封装

    文章https://www.cnblogs.com/XHappyness/p/7677153.html已经对axios配置进行了说明,后台请求时可直接this.$axios直接进行.这里的缺点是后端请 ...

  6. delphi完美经典--第十八章

    第18章数据感知组件 一.TDBText组件 用来以只读.一次一条记录的方式,显示DataSet中的某一字段值.因同样继承自TCustomLabel,TDBText组件除了数据感知功能外,与标准组件T ...

  7. 动画中的id与class使用css3的优先级问题

    今天在做一个项目,用zepto给元素增加一个class,class里面有transform的效果.开始的时候,元素的样式是用id选择器写的,但是增加class之后,发现动画效果出不来,当时头好晕没想出 ...

  8. ZOJ2686_Cycle Gameu

    题目的意思是给你一个多边形,每条边上有一个权值,你开始在第一个点.每次你必须经过一条有权值的边,并且把该边的权值减小到任意一个非负值,到达该边的另外一个点. 谁第一个无法操作就算输. 题意很简单,解法 ...

  9. 【bzoj2829】信用卡凸包 凸包

    题目描述 输入 输出 样例输入 26.0 2.0 0.00.0 0.0 0.02.0 -2.0 1.5707963268 样例输出 21.66 题解 凸包 傻逼题,答案显然为:所有圆心构成的凸包周长+ ...

  10. 【明哥报错簿】之【inside the host appBase has been specified, and will be ignored】和【did not find a matching property.】

    tomcat启动时有时候会报一些警告,项目有时候也是可以正常运行.但是警告出现还是要找到原因消灭掉,两个典型的警告解决办法如下: 1.[inside the host appBase has been ...