文档章节

HTML5编程之旅 第3站 WebSockets

倪伟伟
 倪伟伟
发布于 2014/02/26 13:38
字数 1623
阅读 4100
收藏 238

        本文主要研究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://git.oschina.net/niweiwei/HTML5/tree/master/websocket上进行下载。

© 著作权归作者所有

共有 人打赏支持
倪伟伟
粉丝 21
博文 11
码字总数 10899
作品 0
西安
高级程序员
私信 提问
加载中

评论(20)

w
wallance2
我觉得这种东西自己开发太麻烦了,就别自己捣鼓了,找个第三方,方便,GoEasy就挺不错的,我昨天试了一下,代码简洁易懂,几分钟我就洗了一个自己的实时推送功能;官网: http://goeasy.io/
倪伟伟
倪伟伟

引用来自“Mallon”的评论

已用烂,初探就免了

这个确实是的,那你给起一个比较响亮的名字
mallon
mallon
已用烂,初探就免了
倪伟伟
倪伟伟

引用来自“chape”的评论

请教一个问题,既然websocket支持全双工,例子中是有客户端发起连接请求(new ws),然后通过回调函数open、close和message来监听服务器端数据。那么服务器发送完数据就close了,服务器怎么主动发送数据到客户端呢?

这个就要你的后台代码支持websocket了,请看http://niweiwei.iteye.com/admin/blogs/2019336,基于Tomcat7的HTML5 WebSocket 应用示例
chape
chape
请教一个问题,既然websocket支持全双工,例子中是有客户端发起连接请求(new ws),然后通过回调函数open、close和message来监听服务器端数据。那么服务器发送完数据就close了,服务器怎么主动发送数据到客户端呢?
小小de人
小小de人
ie上兼容吗
倪伟伟
倪伟伟

引用来自“itfanr”的评论

代码可以发到 git.oschina.net 上

好的
倪伟伟
倪伟伟

引用来自“苏生不惑”的评论

不熟悉websocket协议,php服务端怎么写呢或者nodejs?

服务器端可以使用nodejs,如果使用php要寻找相应的扩展模块
倪伟伟
倪伟伟

引用来自“糖咖啡”的评论

貌似这个在javaee服务器端还没有接口标准,api也是厂商各做各个的。

javaee已经开始对websocket开始支持了,比如glassfish就已经支持
倪伟伟
倪伟伟

引用来自“独孤影”的评论

最蛋疼的是怎么把它弄到80端口上去。

你也可以使用其他端口号,自己修改代码的端口就ok,一般测试使用最多的就是8080
HTML5编程之旅 第6站Web Storage

Web Storage,有时也称为DOMStorage,它提供在Web请求之间持久化数据,在此之前,远程Web服务器需要存储客户端和服务器间交互使用的所有相关数据。利用Web Storage,开发者可以将需要跨请求重...

倪伟伟
2014/03/26
0
0
HTML5编程之旅 第4站 Forms

涉及到Web开发的,肯定要涉及到HTML表单,本节将带你走入HTML5表单的世界。 一、HTML5 Forms概述 熟悉HTML表单的开发人士,可以很容易的适应HTML5 Forms的新增功能。 XFomrs是一个以XML为核心...

倪伟伟
2014/02/27
0
1
HTML5编程之旅 第1站 Geolocation

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

倪伟伟
2014/02/24
0
0
PHP中Push(推送)技术的探讨

随着人们对Web即时应用需求的不断上升,Server Push(推送)技术在聊天、消息提醒尤其是社交网络等方面开始兴起,成为实时应用的数据流核心。这篇日志试图探讨的便是各种适合于PHP的Push的实现...

lg2045
2014/08/25
0
1
HTML5编程之旅 第5站Web Workers

HTML5 Web Workers可以使得你的Web应用程序具备后台处理能力,能够支持多线程,且可以充分利用多核CPU带来的优势。以避免JavaScript循环持续运行后弹出的警告窗口。 尽管Web Workers功能强大...

倪伟伟
2014/02/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mariadb二进制包安装,Apache安装

安装mariadb 下载二进制包并解压 [root@test-a src]# wget https://downloads.mariadb.com/MariaDB/mariadb-10.2.6/bintar-linux-glibc_214-x86_64/mariadb-10.2.6-linux-glibc_214-x86_64.t......

野雪球
今天
3
0
ConcurrentHashMap 高并发性的实现机制

ConcurrentHashMap 的结构分析 为了更好的理解 ConcurrentHashMap 高并发的具体实现,让我们先探索它的结构模型。 ConcurrentHashMap 类中包含两个静态内部类 HashEntry 和 Segment。HashEnt...

TonyStarkSir
今天
3
0
大数据教程(7.4)HDFS的java客户端API(流处理方式)

博主上一篇博客分享了namenode和datanode的工作原理,本章节将继前面的HDFS的java客户端简单API后深度讲述HDFS流处理API。 场景:博主前面的文章介绍过HDFS上存的大文件会成不同的块存储在不...

em_aaron
昨天
4
0
聊聊storm的window trigger

序 本文主要研究一下storm的window trigger WindowTridentProcessor.prepare storm-core-1.2.2-sources.jar!/org/apache/storm/trident/windowing/WindowTridentProcessor.java public v......

go4it
昨天
7
0
CentOS 生产环境配置

初始配置 对于一般配置来说,不需要安装 epel-release 仓库,本文主要在于希望跟随 RHEL 的配置流程,紧跟红帽公司对于服务器的配置说明。 # yum update 安装 centos-release-scl # yum ins...

clin003
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部