WebSocket

The WebSocket Protocol enables two-way communication between a client running untrusted code in a controlled environment to a remote host that has opted-in to communications from that code. The security model used for this is the origin-based security model commonly used by web browsers. The protocol consists of an opening handshake followed by basic message framing, layered over TCP. The goal of this technology is to provide a mechanism for browser-based applications that need two-way communication with servers that does not rely on opening multiple HTTP connections (e.g., using XMLHttpRequest or iframes and long polling). (RFC6455)

以上是IETF对WebSocket定义，说明了WebSocket是一个双向协议。目的就是给需要双向通信的web应用提供支持，而避免采用之前的需要大量http连接的技术。（如：XMLHttpRequest，iframe 说和长轮询。）

背景

在 WebSocket 规范出来之前，开发人员想实现这些实时的 Web 应用，不得不采用一些折衷的方案，其中最常用的就是轮询 (Polling) 和 Comet 技术，而 Comet 技术实际上是轮询技术的改进，又可细分为两种实现方式，一种是长轮询机制，一种称为流技术。下面我们简单介绍一下这几种技术：

• 轮询

  • 客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，这样会带来很多无谓的网络传输，所以这是一种非常低效的实时方案。

• 长轮询

  • 长轮询是对定时轮询的改进和提高，目地是为了降低无效的网络传输。当服务器端没有数据更新的时候，连接会保持一段时间周期直到数据或状态改变或者时间过期，通过这种机制来减少无效的客户端和服务器间的交互。当然，如果服务端的数据变更非常频繁的话，这种机制和定时轮询比较起来没有本质上的性能的提高。

• 流

  • 流技术方案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求。服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期。通过这种机制可以将服务器端的信息源源不断地推向客户端。这种机制在用户体验上有一点问题，需要针对不同的浏览器设计不同的方案来改进用户体验，同时这种机制在并发比较大的情况下，对服务器端的资源是一个极大的考验。

目前我们所使用的所谓的实时技术并不是真正的实时技术，它们只是在用 Ajax 方式来模拟实时的效果。这些方法在性能和模拟时都存在较大的问题。

WebSocket协议

客户端到服务端：

GET /chat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Origin: http://example.comSec-WebSocket-Protocol: chat, superchatSec-WebSocket-Version: 13

服务端到客户端：

HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=Sec-WebSocket-Protocol: chat

以上协议头与HTTP协议头非常相似，但WebSocket 协议本质上是一个基于 TCP 的协议。它与HTTP唯一的关系是，握手被HTTP服务解释升级请求。在实际的开发过程中，为了使用 WebSocket 接口构建 Web 应用，我们首先需要构建一个实现了 WebSocket 规范的服务器，服务器端的实现不受平台和开发语言的限制，只需要遵从 WebSocket 规范即可。

使用HTML5 WebSocket API

WebSocket提供了用于创建和操作WebSocket对象的API，通过这些API可以创建连接、发送和接受数据。

var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");exampleSocket.onopen = function (event) {  exampleSocket.send("亲爱的服务器！我连上你啦！"); };

属性

• url: 传入构造器的URL。它必须是一个绝对地址的URL。只读。
• protocol: 一个表明服务器选定的子协议名字的字符串。这个属性的取值会被取值为构造器传入的protocols参数。
• bufferedAmount: 已被send()放入正在队列中等待传输，但是还没有发出的字节数。这个值在连接关闭前不会设为0。如果持续调用send()，这个值会持续增长。只读。
• readyState: 连接的当前状态。取值是 Ready state constants之一。 只读。
• onopen, onmessage, onerror, onclose: 事件监听器.

更多API属性参看：MDN WebSocket

方法

• close(), 关闭WebSocket连接或停止正在进行的连接请求。如果连接的状态已经是CLOSED，这个方法不会有任何效果

void close(  // 一个数字值表示关闭连接的状态号，表示连接被关闭的原因。如果这个参数没有被制定，默认的取值是1000 （表示正常连接关闭）。  in optional unsigned short code,  //一个可读的字符串，表示连接被关闭的原因。这个字符串必须是不长于123字节的UTF-8 文本（不是字符）。  in optional DOMString reason);

send(),通过WebSocket连接向服务器发送数据。

//可以发送DOMString，ArrayBuffer，Blob三种类型数据。void send(  in DOMString data);void send(  in ArrayBuffer data);void send(  in Blob data);

WebSocket远程PPT

基于WebSocket，实现手机远程PPT演示：项目地址