HTML5 WebSocket长连接详细应用指南(一)

一、HTML5 WebSocket简介

1.1 HTML5

HTML5连接性领域包括WebSocket、服务器发送时间和跨文档消息传递等技术。这些包含在HTML5规范中的API有助于简化某些情况，例如浏览器所受限制使应用程序开发人员无法创建所需的丰富功能，或者Web应用程序开发过于复杂。

        在HTML5之前，浏览器窗口和框架之间的通信由于安全的原因而受到限制。然而，随着Web应用程序开始组合不同网站中的内容和应用程序，这些应用程序的相互通信变得必不可少。为了解决这个问题，标准组织和主要浏览器供应商同意支持跨文档消息传递，后者能够确保在浏览窗口、选项卡（tab）和iFrame之间跨源通信的安全。跨文档消息传递定义了postMessage API，作为发送和接收消息的标准手段。利用来自不同主机和域的内容、在浏览器内部通信的用例有许多，例如地图、聊天和社会化网络。跨文档消息传递提供了不同JavaScript上下文之间的异步消息传递。

        跨文档消息传递的HTML5规范还通过引入源（origin）的概念，澄清并提升了域安全性，这一概念由方案（scheme）、主机（host）、和端口（port）来定义。根本上，两个URL当前仅当有相同的方案、主机和端口的时候才被认为是同源的。

例如会出现以下不匹配的例子（方案、主机和端口不匹配）：

                https://www.example.com 和 http://www.example.com

                http://www.example.com 和 http://example.com

                http://example.com:8080 和 http://example.com:8081

        跨文档消息传递通过允许消息在不同源之间交换，克服了同源策略的限制。当你发送消息时，发送者指定接收者的源；当你接收消息时，发送者的源会被作为消息的一部分。消息的源由浏览器提供，不会被伪造。在接收端，你可以决定处理哪些消息，忽略哪些消息。你还可以保留一个“白名单”，只处理来自具有信任源的文档的消息。

        跨文档消息传递是HTML5规范利用非常强大的API简化Web应用程序之间通信的绝佳范例。但是，它的重点被限制在跨窗口、选项卡和iFrame的通信上。它不能解决协议通信中正在变得越来越严重的复杂性，这时我们就要求助WebSocket。

1.2旧的HTTP协议

为了理解WebSocket的重要性，我们首先来看看旧的架构，具体地说就是使用HTTP的架构。

1.2.1 HTTP 101（即HTTP/1.0和HTTP/1.1）

在旧的架构中，连接性由HTTP/1.0和HTTP/1.1处理。HTTP是客户端/服务器模式中请求响应所用的协议，在这种模式中，客户端（一般是Web浏览器）向服务器提交HTTP请求，服务器响应请求的资源（例如HTML页面）和关于页面的附加信息。HTTP也用来读取文档；HTTP/1.0对于从服务器请求单个文档来说已经足够。但是，随着Web的成长超出了简单的文档共享，并开始包含更多的交互性，连接性需要进行微调，以缩短浏览器请求和服务器响应之间的时间。在HTTP/1.0中，每个服务器请求需要一个单独的连接，这种方法至少可以说没有太好的伸缩性（scalability）。HTTP的下一个修订版本HTTP/1.1增加了可重用连接。由于可重用连接的推出，浏览器可以初始化一个到Web服务器的连接，以读取HTML页面，然后重用该连接读取图片、脚本等资源。HTTP/1.1通过减少客户端到服务器的连接数量，降低了请求的延迟。

HTTP是无状态的，也就是说，它将每个请求当成唯一和独立的。无状态协议具有一些优势，例如，服务器不需要保存有关会话的信息，从而不需要存储数据。但是，这也意味着在每次HTTP请求和响应中都会发送关于请求的冗余信息。

在HTTP/1.0和HTTP/1.1中，低效的根源主要是：

HTTP用于文档共享，而不是丰富的交互性应用程序，我们在桌面上习以为常的这种应用程序现在已经进入Web； 随着客户端和服务器之间交互的增加，HTTP协议在客户端和服务器之间通信所需要的信息量快速增加。

从根本上讲，HTTP还是半双工的协议，也就是说，在同一时刻流量只能单向流动：客户端向服务器发送请求（单向），然后服务器响应请求（单向）。半双工的效率很低。

工程师们多年来一直致力于解决这个问题，他们使用各种著名的方法：轮询、长轮询和HTTP流化（streaming）。

1.2.2 HTTP轮询、长轮询和流化

轮询是一种定时的同步调用，客户端向服务器发送请求查看是否有可用的新信息。请求以固定的时间间隔发出，不管是否有信息，客户端都会得到响应：如果有可用信息，服务器发送这些信息；如果没有可用信息，服务器返回一个拒绝响应，客户端关闭连接。

如果你知道信息交付的精确间隔，轮询就是一个好的解决方案，因为你可以同步客户端，只在你知道服务器上有可用信息的时候发送请求。然而，实时数据并不总是可以预测的，发出不必要的请求、因而打开过多连接是不可避免的。结果是，在低信息率的情况下，你可能打开或者关闭许多不必要的连接。

长轮询（long polling）是另一种流行的通信方法，客户端向服务器请求信息，并在设定的时间段内打开一个连接。服务器如果没有任何信息，会保持请求打开，直到有客户端可用的信息，或者直到指定的超时时间用完为止。这时，客户端重新向服务器请求信息。长轮询也称作Comet（前面已经提到过）或者反向AJAX。Comet延长HTTP响应的完成，直到服务器有需要发送给客户端的内容，这种技术常常称作“挂起GET”或“搁置POST”。重要的是要知道，当信息量很大时，长轮询相对于传统轮询并没有明显的性能优势，因为客户端必须频繁地重连到服务器以读取新信息，造成网络的表现和快速轮询相同。长轮询的另一个问题是缺乏标准实现。

在流化技术中，客户端发送一个请求，服务器发送并维护一个持续更新和保持打开（可以是无限或者规定的时间段）的开放响应。每当服务器有需要交付给客户端的信息时，它就更新响应。看起来，流化是能够适应不可预测的信息交付的极佳方案，但是服务器从不发出完成HTTP响应的请求，从而使连接一直保持打开。在这种情况下，代理和防火墙可能缓存响应，导致信息交付的延迟增加。因此，许多流化的尝试对于存在防火墙和代理的网络是不友好的。

上述方法提供了近乎实时的通信，但是它们也涉及HTTP请求和响应首标，包含了许多附加和不必要的首标数据与延迟。此外，在每一种情况下，客户端都必须等待请求返回，才能发出后续的请求，而这显著地增加了延迟。

图1-2展示了Web上这些连接的半双工特性，它们整合到架构中，其中在内联网中具有通过TCP的全双工连接。

1.3 WebSocket

为了消除这些问题，HTML5规范的连接性部分包含了WebSocket。WebSocket是一种自然的全双工、双向、单套接字连接。使用WebSocket，你的HTTP请求变成打开WebSocket连接（WebSocket或者WebSocket over TLS（Transport Layer Security，传输层安全性，原称“SSL”））的单一请求，并且重用从客户端到服务器以及服务器到客户端的同一连接。WebSocket减少了延迟，因为一旦建立起WebSocket连接，服务器可以在消息可用时发送它们。例如，和轮询不同，WebSocket只发出一个请求。服务器不需要等待来自客户端的请求。相似地，客户端可以在任何时候向服务器发送消息。相比轮询不管是否有可用消息，每隔一段时间都发送一个请求，单一请求大大减少了延迟。

图1-3比较了轮询和WebSocket方案

1.4  为什么需要WebSocket

1.4.1 WebSocket与性能相关

WebSocket使实时通信更加有效。

你总是可以在HTTP上使用轮询（有时候甚至是流化），通过HTTP接收通知。然而，WebSocket能节约带宽、CPU资源并减少延迟。

1.4.2 WebSocket与简洁性相关

WebSocket使Web上客户端和服务器之间的通信变得更加简单。

用WebSocket之前的架构建立过实时通信的人们就会知道，HTTP上的实时通知技术过于复杂。在无状态的请求之间维护会话状态更增加了复杂度。跨源AJAX十分难以理解，用AJAX处理有序的请求需要特殊考虑，而AJAX通信也很复杂。将HTTP扩展到它不适用的用例的每个尝试都会增加软件的复杂度。

WebSocket可以显著简化实时应用程序中面向连接的通信。

1.4.3 WebSocket与标准相关

WebSocket是一个低层网络协议，你可以在它的基础上构建其他标准协议。

许多Web应用程序实际上很庞大。大部分AJAX应用程序通常都包含了紧密耦合的客户端和服务器组件。WebSocket自然支持高层应用协议的概念，你可以更加灵活地独立发展客户端和服务器。支持较高层的协议使模块化成为可能，鼓励开发可重用组件。

Websocket是可互操作Web应用程序的一个革新。

1.4.4 WebSocket与HTML5相关

WebSocket是为HTML5应用程序提供高级功能，以便与其他平台竞争所作努力的一部分。

每种操作系统都需要网络功能。应用程序打开套接字以及与其他主机通信的能力是每个主要平台提供的核心特性。HTML5在许多方面倾向于使浏览器成为一个与操作系统相仿的全功能应用程序平台。低级网络API（如套接字）无法处理源安全模型或者Web的API设计风格。WebSocket为HTML5应用程序提供了TCP风格的网络，没有破坏浏览器安全性，而且有一个现代的API。

WebSocket是HTML5平台的关键组件，也是开发人员的强大工具。

1.5 WebSocket API

WebSocket是一个协议，但是还有一个WebSocket API，应用程序可以用它控制WebSocket协议，响应服务器触发的事件。这个API由W3C（World Wide Web Consortium，万维网联盟）开发，而协议由IETF（Internet Engineering Task Force，互联网工程任务组）开发。WebSocket API现在得到现代浏览器的支持，包含了使用全双工、双向WebSocket连接所需的方法和特性（attribute）。利用这个API，你可以执行必要的操作，例如打开和关闭连接、发送和接收消息、监听服务器触发的事件。

---

  HTML5 WebSocket长连接详细应用指南(二)将更加详细地描述这个API，并提供使用它的例子。

---