WebSocket原理及如何使用

1. 背景
   起初 HTTP 协议是无状态协议，服务器不知道你是谁，后来有了 cookie ，这个时候浏览器知道你是谁并会记录下你的相关信息，保持相关的状态（如登录）。
   可是我们用 HTTP 发起请求的时候，每次都会三次握手，这是相当耗费时间的，为了解决这个问题， HTTP/1.1 有了长连接（connection：keep-alive），当我们与服务器建立连接的时候只需要最开始建立一次连接即可，请求完并没有断开连接，除非客户端主动断开。但是 HTTP 通信本身还是 Request-Response，也就是一个请求对应一个响应，并没有改变其单工通信本质。
   有些时候我们需要客户端和服务器端能够建立全双工通信，这样服务器端能够及时推送新消息，于是这个时候 WebSocket 出现了。WebSocket 是基于 TCP 传输协议，并复用 HTTP 的握手通道的全双工通信技术，属于应用层协议。

2. 优点
   2.1 支持双向通信，实时性更强
   2.2 更好的二进制支持
   2.3 较小的头部开销。HTTP 头部为 20 字节，而 WebSocket 一般服务器到客户端的头部为 2-10 字节，客户端到服务器需要加上 4 字节的掩码。
   2.4 支持扩展，用户可以扩展协议

3. 如何建立连接
   3.1 客户端申请协议升级

	GET / HTTP/1.1
    Host: localhost:8080
    Origin: http://127.0.0.1:3000
    Connection: Upgrade
    Upgrade: websocket
    Sec-WebSocket-Version: 13
    Sec-WebSoc
	ket-Key: w4v7O6xFTi36lq3RNcgctw==

这和正常的 HTTP 请求不同的在于：

Connection: Upgrade  // 表示连接升级
Upgrade: websocket  // 升级为 WebSocket 协议
Sec-WebSocket-Version: 13  // WebSocket 协议版本号
Sec-WebSocket-Key: w4v7O6xFTi36lq3RNcgctw==// 这与服务器端响应首部的 Sec-WebSocket-Accept 是配套的，主要用来提供基本的防范，如恶意或无意连接

3.2 服务器端响应

	HTTP/1.1 101 Switching Protocols
	Connection:Upgrade
	Upgrade: websocket
	Sec-WebSocket-Accept: Oy4NRAQ13jhfONC7bP8dTKb4PTU=

状态码一定要是 101 才表示协议转换成功，成功后数据传输都按 WebSocket 协议

4. WebSocket 属性
   readyState：表示连接状态，有以下值：
   0：表示尚未建立连接
   1：表示连接已建立，可以进行通信
   2：表示连接正在关闭
   3：表示连接已关闭

5. WebSocket 事件
   open：Socket.onopen 连接已建立
   message：Socket.onmessage 客户端接收到来自服务端的消息
   error：Socket.onerror 通信时发生错误
   close：Socket.onclose 连接关闭时触发

6. WebSocket 方法
   Socket.send() 发送数据
   Socket.close() 关闭连接

来源：
掘金
JavaScript权威指南