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接口。

　　view source

　　print?01interface WebSocket{

　　02

　　03readonly attribute DOMString URL;

　　04

　　05//就绪状态

　　06

　　07const unsigned short CONNECTING = 0;

　　08

　　09const 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服务器的连接

　　view source

　　print?1url = "ws://localhost:8080/echo";

　　2

　　3ws = new WebSocket(url);

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

　　view source

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

　　b. 添加事件监听器

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

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

　　view source

　　print?01ws.onopen = function(){

　　02

　　03 log("open");

　　04

　　05}

　　06

　　07ws.onmessage = function(){

　　08

　　09 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文件

　　view source

　　print?01

　　02

　　03

　　04

　　05

　　06

　　07

　　08

　　09

　　10

　　11

　　12

　　13

　　14

　　15

　　16

　　17

　　HTML5 WebSocket / Geolocation 追踪器

　　18

　　19

　　Geolocation:

　　你的浏览器不支持HTML5 Geolocation

　　20

　　21

　　WebSocket:

　　你的浏览器不支持HTML5 Web Sockets

　　22

　　23

　　24

　　25

　　2、添加WebSocket代码

　　view source

　　print?01function loadDemo(){

　　02

　　03 //确保浏览器支持WebSocket

　　04

　　05 if(window.WebSocket){

　　06

　　07 url = "ws://localhost:8080";//broadcast WebSocket服务器位置

　　08

　　09 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代码

　　view source

　　print?01var geo;

　　02

　　03if(navigator.geolocation){

　　04

　　05 geo = navigator.geolocation;

　　06

　　07 updateGeolocationStatus("浏览器支持HTML5 Geolocation");

　　08

　　09}

　　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、合并所有内容

　　view source

　　print?001

　　002

　　003

　　004

　　005

　　006

　　007

　　008

　　009

　　010

　　011

　　012

　　013

　　014

　　015

　　016

　　017

　　HTML5 WebSocket / Geolocation 追踪器

　　018

　　019

　　Geolocation:

　　你的浏览器不支持HTML5 Geolocation

　　020

　　021

　　WebSocket:

　　你的浏览器不支持HTML5 Web Sockets

　　022

　　023

　　024

　　025

　　181

　　182

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