H5新特性-----WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 链接上进行全双工通信的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，容许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只须要完成一次握手，二者之间就直接能够建立持久性的链接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只须要作一个握手的动做，而后，浏览器和服务器之间就造成了一条快速通道。二者之间就直接能够数据互相传送。

如今，不少网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，而后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器须要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费不少的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，而且可以更实时地进行通信。

var ws = new WebSocket(ws://localhost:3333 );

WebSocket 属性

属性	描述
Socket.readyState	只读属性 readyState 表示链接状态，能够是如下值： 0 - 表示链接还没有创建。 1 - 表示链接已创建，能够进行通讯。 2 - 表示链接正在进行关闭。 3 - 表示链接已经关闭或者链接不能打开。
Socket.bufferedAmount	只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，可是尚未发出的 UTF-8 文本字节数。

WebSocket 事件

如下是 WebSocket 对象的相关事件。假定咱们使用了以上代码建立了 Socket 对象：

事件	事件处理程序	描述
open	Socket.onopen	链接创建时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通讯发生错误时触发
close	Socket.onclose	链接关闭时触发

 

WebSocket 方法

如下是 WebSocket 对象的相关方法。假定咱们使用了以上代码建立了 Socket 对象：

方法	描述
Socket.send()	使用链接发送数据
Socket.close()	关闭链接

WebSocket 实例

WebSocket 协议本质上是一个基于 TCP 的协议。

为了创建一个 WebSocket 链接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和一般的 HTTP 请求不一样，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"代表这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息而后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 链接就创建起来了，双方就能够经过这个链接通道自由的传递信息，而且这个链接会持续存在直到客户端或者服务器端的某一方主动的关闭链接。