HTML5编程之旅第3站 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接口。

1interface WebSocket{
2
3readonly attribute DOMString URL;
4
5//就绪状态
6
7const unsigned short CONNECTING = 0;
8
9const unsigned short OPEN = 1;
10
11const unsigned short CLOSED = 2;
12
13readonly attribute unsigned short readyState;
14
15readonly attribute unsigned short bufferedAmount;
16
17//网络
18
19attribute Function onopen;
20
21attribute Function onmessage;
22
23attribute Function onclose;
24
25boolean send(in DOMSString data);
26
27void close();
28
29};
30
31WebSocket implements EventTarget;

注意：ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。

二、HTML5 WebSockets API

本节讨论HTML5 WebSockets的使用方法

1、检测浏览器是否支持

通过window.WebSocket来判断浏览器是否支持。

2、API的基本用法

a. WebSocket对象的创建以及与WebSocket服务器的连接

1url = "ws://localhost:8080/echo";
2
3ws = new WebSocket(url);

上述两行代码也可以合并为一行代码：

ws = new WebSocket("ws://localhost:8080/echo");

b. 添加事件监听器

WebSocket遵循异步编程模型，打开socket后，只需等待事件发生，而不需主动向服务器轮询，因此需要添加回调函数来监听事件。

WebSocket对象有三个事件：open、close和message。当连接建立时触发open事件，当收到消息时触发message事件，当WebSocket连接关闭时触发close事件。

1ws.onopen = function(){
2
3	log("open");
4
5}
6
7ws.onmessage = function(){
8
9	log(e.data);
10
11}
12
13ws.onclose = function(){
14
15	log("closed");
16
17}

c. 发送消息

当socket处于打开状态（即调用onopen监听程序之后，调用onclose监听程序之前），可以使用send方法发送消息。

ws.send("Hello World");

三、HTML5 WebSockets 应用示例

本节将结合前面讲述的Geolocation接口来创建一个直接在Web页面中计算距离的应用。

1、编写HTML文件

1<!DOCTYPE html>
2
3<html>
4
5	<head>
6
7		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8
9		<title>HTML5 WebSocket / Geolocation 追踪器</title>
10
11		<link rel="stylesheet" href="styles.css">
12
13	</head>
14
15	<body onload="loadDemo()">
16
17		<h1>HTML5 WebSocket / Geolocation 追踪器</h1>
18
19		<div><strong>Geolocation</strong>: <p id="geoStatus">你的浏览器不支持HTML5 Geolocation</p></div>
20
21		<div><strong>WebSocket</strong>: <p id="socketStatus">你的浏览器不支持HTML5 Web Sockets</p></div>
22
23	</body>
24
25</html>

2、添加WebSocket代码

1function loadDemo(){
2
3	//确保浏览器支持WebSocket
4
5	if(window.WebSocket){
6
7		url = "ws://localhost:8080";//broadcast WebSocket服务器位置
8
9		ws = new WebSocket(url);
10
11		ws.onopen = function(){
12
13			updateSocketStatus("连接已建立");
14
15		}
16
17		ws.onmessage = function(e){
18
19			updateSocketeStatus("更新位置数据：" + dataReturned(e.data));
20
21		}
22
23	}
24
25}

3、添加Geolocation代码

1var geo;
2
3if(navigator.geolocation){
4
5	geo = navigator.geolocation;
6
7	updateGeolocationStatus("浏览器支持HTML5 Geolocation");
8
9}
10
11geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次
12
13function updateLocation(position){
14
15	var latitude = position.coords.latitude;
16
17	var longitude = position.coords.longitude;
18
19	var timestamp = position.timestamp;
20
21	updateGeolocationStatus("位置更新时间：" + timestamp);
22
23	var toSend = JSON.stringify([myId,latitude,longitude]);
24
25	sendMyLocation(toSend);
26
27}

4、合并所有内容

1<!DOCTYPE html>
2
3<html>
4
5	<head>
6
7		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8
9		<title>HTML5 WebSocket / Geolocation 追踪器</title>
10
11		<link rel="stylesheet" href="styles.css">
12
13	</head>
14
15	<body onload="loadDemo()">
16
17		<h1>HTML5 WebSocket / Geolocation 追踪器</h1>
18
19		<div><strong>Geolocation</strong>: <p id="geoStatus">你的浏览器不支持HTML5 Geolocation</p></div>
20
21		<div><strong>WebSocket</strong>: <p id="socketStatus">你的浏览器不支持HTML5 Web Sockets</p></div>
22
23		</body>
24
25	<script>
26
27		//WebSocket的引用
28
29		var ws;
30
31		//为该会话生成的唯一随机的ID
32
33		var myId = Math.floor(100000*Math.random());
34
35		//当前显示的行数
36
37		var rowCount;
38
39		function updateSocketStatus(message){
40
41			document.getElementById("socketStatus").innerHTML = message;
42
43		}
44
45		function updateGeolocationStatus(message){
46
47			document.getElementById("geoStatus").innerHTML = message;
48
49		}
50
51		function loadDemo(){
52
53		//确保浏览器支持WebSocket
54
55			if(window.WebSocket){
56
57				url = "ws://localhost:8080";//broadcast WebSocket服务器位置
58
59				ws = new WebSocket(url);
60
61				ws.onopen = function(){
62
63				updateSocketStatus("连接已建立");
64
65			}
66
67			ws.onmessage = function(e){
68
69				updateSocketStatus("更新位置数据：" + dataReturned(e.data));
70
71			}
72
73		}
74
75		var geo;
76
77		if(navigator.geolocation){
78
79			geo = navigator.geolocation;
80
81			updateGeolocationStatus("浏览器支持HTML5 Geolocation");
82
83		}
84
85		geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次
86
87		function updateLocation(position){
88
89			var latitude = position.coords.latitude;
90
91			var longitude = position.coords.longitude;
92
93			var timestamp = position.timestamp;
94
95			updateGeolocationStatus("位置更新时间：" + timestamp);
96
97			var toSend = JSON.stringify([myId,latitude,longitude]);
98
99			sendMyLocation(toSend);
100
101		}
102
103		function sendMyLocation(newLocation){
104
105			if(ws){
106
107				ws.send(newLocation)
108
109			}
110
111		}
112
113		function dataReturned(locationData){
114
115			var allData = JSON.parse(locationData);
116
117			var incomingId = allData[1];
118
119			var incomingLat = allData[2];
120
121			var incomingLong = allData[3];
122
123			var incomingRow = document.getElementById(incomingId);
124
125			if(!incomingRow){
126
127				incomingRow = document.getElementById("div");
128
129				incomingRow.setAttribute("id",incomingId);
130
131				incomingRow.userText = (incomingId == myId)?"Me":'User' + rowCount;
132
133				rowCount++;
134
135				document.body.appendChild(incomingRow);
136
137			}
138
139			incomingRow.innerHTML = incomingRow.userText + " \\ Lat: " +
140
141			                                incomingLat + " \\ Lon: " +
142
143			                                incomingLong;
144
145			return incomingRow.userText;
146
147		}
148
149		function handleLocationError(error){
150
151			switch(error.code){
152
153				case 0:
154
155				  updateGeolocationStatus("检索位置信息出错: " + error.message);
156
157				  break;
158
159				case 1:
160
161				  updateGeolocationStatus("用户阻止获取位置信息。");
162
163				  break;
164
165				case 2:
166
167				  updateGeolocationStatus("浏览器不能检测你的位置信息: " + error.message);
168
169				  break;
170
171				case 3:
172
173				  updateGeolocationStatus("浏览器检索位置信息超时。");
174
175				  break;
176
177			}
178		}
179
180	</script>
181
182</html>

注意：上述代码的运行需要一个额外服务器的支持，在此把原书里提供的使用Python写的服务器文件附上，关于如何运行Python，请参考网上其他资料。

本文的源码请从http://git.oschina.net/niweiwei/HTML5/tree/master/websocket上进行下载。

HTML5编程之旅第3站 WebSockets

评论区

相关推荐

HTML5编程之旅 第3站 WebSockets

评论区

相关推荐

HTML5编程之旅第3站 WebSockets