By anjia

更新日期:

文章目录
  1. 1. 它是什么
  2. 2. 它解决了什么问题？
  3. 3. 它的原理？
  4. 4. 它怎么用？
  5. 5. 参考

HTML5 有许多引人注目的新特性，如 Canvas、本地存储、多媒体编程接口、WebSocket 等。其中，WebSocket 有“Web的TCP”之称，它使浏览器支持 Socket 成为可能，从而在浏览器和服务器间提供了一个基于 TCP 连接的双向通道。Web 开发人员可以很方便的用 WebSocket 构建实时 Web 应用。

从以下4点来认识 HTML5 WebSocket：
它是什么？
它解决了什么问题？
它的原理？
它怎么用？

它是什么

WebSocket 是 HTML5 提供的一种浏览器和服务器之间进行全双工通信的网络技术。在 WebSocket API 中，浏览器和服务器只需要做一个握手动作，然后就形成了一个快速通道，二者之间就可以直接进行数据传送了。

其实，WebSocket就是一个应用层的通信协议，协议名ws。它和HTTP一样，都是基于TCP（传输层协议）的。

它解决了什么问题？

当要实现对实时性要求较高的 Web 应用时，比如在线游戏、在线聊天等。传统的处理方式是用轮询和Comet技术。而Comet技术实际是对轮询技术的改进，又可分为长轮询机制和流技术。分别如下：

轮询
客户端以一定的时间间隔向服务器发请求，以频繁请求的方式保持客户端和服务器端的同步。
问题：太多无谓的网络传输，低效（固定间隔请求嘛，那个时候服务器数据可能还没更新呢）

长轮询
对定时轮询的改进，目的是降低无效的网络传输。
方式：当服务器没有更新时，连接会保持一段周期知道数据改变|状态改变|时间过期。
问题：当服务器端数据频繁变更时，就和定时轮询差不多了

流
方式：在客户端页面使用一个隐藏窗口，向服务器发个长连接请求。服务器接到请求后作出回应，并不断更新连接状态，以保证客户端和服务器端的连接不过期。这样，就可以将服务器端的信息源源不断地推向客户端了。
问题：用户体验上，需要针对不同浏览器设计不同的方案来改进用户体验；同时，当并发较大时，对服务器资源也是个很大的考验。

其实，这些技术都不是真正的实时技术，只是用 Ajax 模拟实时的效果。问题有：

  1. 浏览器不断向服务器发请求：交互一次，都要一次 HTTP 的请求和应答
  2. 每次 HTTP 请求和应答都带有完整的 HTTP 头信息：HTTP request 的 header是非常长的，里面包含的数据很小很小，都会占用很多的带宽和服务器资源，这就增加了每次传输的数据量

于是~
HTML5 定义了 WebSocket 协议，以更好的节省服务器资源和带宽，并达到真正的实时通信。且WebSocket连接本质上就是一个TCP连接，所以在稳定性和传输量方面，都有很大优势。

它的原理？

WebSocket 协议本质上是一个基于 TCP 的协议。为建立一个 WebSocket 连接，浏览器首先向服务器发起一个 HTTP 请求。
这个请求和通常的 HTTP 请求很相似，但其中有些内容是和 WebSocket 协议密切相关的，包含了一些附加头信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//浏览器请求
GET / HTTP/1.1
Upgrade: websocket  //表明这是一个特殊的HTTP请求，一个申请协议升级的HTTP请求，
//目的是让客户端和服务器端的通信协议从 HTTP 协议升级到 WebSocket 协议。
Connection: Upgrade
Sec-WebSocket-Key   //是随机的，服务器会用这些数据构造出一个SHA-1的信息摘要 【浏览器向服务器提供的握手信息】
//服务器回应
HTTP/1.1 101
Upgrate: websocket
Connection: Upgrade
Sec-WebSocket-Accept:  //把Sec-WebSocket-Key加上一个魔幻字符串，使用SHA-1加密，再进行base-64编码，
//将结果赋作为'Sec-WebSocket-Accept'头的值，返回给客户端

请求中的 Sec-WebSocket-Key 是浏览器向服务器提供的握手信息，服务器解析这些头信息，并生成一个16位的安全密钥并返回客户端。以表明服务器获取了客户端的请求，同意建立 WebSocket 连接。连接一旦建立，客户端和服务器端就可以双向传输数据了。

其中，websocket 的实现，浏览器扮演着一个很重要的角色。服务器端不受平台和开发语言的限制，只要遵从 WebSocket 规范即可。目前已经有比较成熟的 WebSocket 服务器端实现，有：php、ruby、Tomcat、node.js、python、Diango等。

它怎么用？

Web 开发人员的 WebSocket JavaScript 客户端接口是很简单的。
WebSocket JavaScript 定义：
url：WebSocket服务器的网络地址，协议通常是”ws”
send() 发送数据到服务器端
close() 关闭连接

建立 WebSocket 连接的实例 JavaScript 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var  wsServer = 'ws://localhost:8888/Demo'; 
var  websocket = new WebSocket(wsServer); 
//还有4个很重要的事件
websocket.onopen = function(event) { 
	console.log("Connected to WebSocket server."); 
}; 
websocket.onclose = function(event) { 
	console.log("Disconnected"); 
}; 
websocket.onmessage = function(event) { 
	console.log('Retrieved data from server: ' + event.data); 
}; 
websocket.onerror = function(event) { 
	console.log('Error occured: ' + event.data); 
};

参考

WebSocket 维基百科：维基百科，挺牛叉，信息简短但不失专业，信息量还挺大
使用 HTML5 WebSocket 构建实时 Web 应用：IBM，挺系统

使用Node.js+Socket.IO搭建WebSocket实时应用：个人博客，看起来挺完整的。不过没亲自试过代码
WebSocket 是什么原理？为什么可以实现持久连接？：知乎，里面还有些讨论，有常识类的、也有扩展类的。不错。

文章目录
  1. 1. 它是什么
  2. 2. 它解决了什么问题？
  3. 3. 它的原理？
  4. 4. 它怎么用？
  5. 5. 参考