在 Web 应用中，浏览器和服务器之间使用的是请求 / 响应的交互模式。浏览器发出请求，服务器根据收到的请求来生成相应的响应。浏览器再对收到的响应进行处理，展现给用户。这种方式的不足之处在于：服务器端产生的数据变化不能及时地通知浏览器，而是需要等到下次请求发出时才能被浏览器获取。对于某些对数据实时性要求很高的应用来说，这种延迟是不能接受的。

为了满足这类应用的需求，就需要有某种方式能够从服务器端推送数据给浏览器，以保证服务器端的数据变化可以在第一时间通知给用户。目前常见的解决办法有不少，主要可以分成两类。这两类方法的区别在于是否基于 HTTP 协议来实现。不使用 HTTP 协议的做法是使用 HTML 5 新增的 WebSocket 规范，而使用 HTTP 协议的做法则包括简易轮询、COMET 技术和 HTML 5 服务器推送事件。

本文主要介绍使用 HTML 5 新增的 WebSocket 来实现服务器推送。

Websocket简介

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

其他特点包括：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

客户端实现

WebSocket 的用法相当简单，直接调用 HTML 5的WebSocket 客户端的 API 就行了。WebSocket 客户端的 API 如下：

1、WebSocket 构造函数

WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。

执行上面语句之后，客户端就会与服务器进行连接。

2、ws.readyState

readyState属性返回实例对象的当前状态：

3、ws.onopen

实例对象的onopen属性，用于指定连接成功后的回调函数。

如果要指定多个回调函数，可以使用addEventListener方法。

4、ws.onclose

实例对象的onclose属性，用于指定连接关闭后的回调函数。

5、ws.onmessage

实例对象的onmessage属性，用于指定收到服务器数据后的回调函数。

注意：服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象）。

除了动态判断收到的数据类型，也可以使用binaryType属性，显式指定收到的二进制数据类型。

6、ws.send

实例对象的send()方法用于向服务器发送数据。

发送文本：

发送 Blob 对象：

发送 ArrayBuffer 对象：

7、ws.bufferedAmount

实例对象的bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。

8、ws.onerror

实例对象的onerror属性，用于指定报错时的回调函数。

服务端实现

WebSocket 服务器的实现有很多种，PHP、Java、Node……都有其实现的方式。下面主要介绍PHP的实现方式。PHP的实现可以参考Workerman或Swoole。

如果使用Workerman，可以按如下方式实现：

如果使用Swoole，可以按如下方式实现：