WebSocket技术原理

一、引言

        互联网发展的早期，网站上只是一些静态展示页面。用户请求(Request)网站页面，网站回复(Response)页面内容给用户浏览器。因为需求简单，所以也没有很复杂的协议过程。这种形式的Request/Response交互流程如下图所示：

        随着互联网技术的发展，带宽逐步提高，用户数也越来越庞大。对互联网的呈现内容提出了要求，随之出现了动态页面技术，对同一个页面，页面的某些部分对不同的访问用户，呈现的内容不同。相关的实现技术有CGI、ASP、PHP、JSP等。由于访问量的增加，WEB服务器同时处理的用户数也达到了万(10K)以上级别，这就是C10K问题：” The C10K problem“[1]。为了缓解服务器压力，每次Request/Response后连接(TCP连接)继续保持，以及对同一个TCP连接，多次复用Request/Response的方法(也称为Pipeline)也提了出来。这就是HTTP/1.1协议中长连接的主要内容。

       伴随移动互联网的发展，大量移动终端和其上的APP应用接入网络，HTML5技术也提了出来，以便支持WEB上的音视频播放、实时游戏、实时聊天等。催生了这样一个需求，当服务器有更新时，需要立即将数据发送给客户端，这就是基于服务器端的推送技术。

       WEBSOCKET之前的解决方法大概这么几种： 1)轮询：客户端设置一个时间间隔，时间到以后，向服务器发送request询问有无新数据，服务器立即返回response，如果有更新则携带更新的数据。2)长连接(long poll): 和轮询相似，但是为阻塞模式的轮询，客户端请求新的数据request, 服务器会阻塞请求，直到有新数据后才返回response给客户端；然后客户端再重复此过程。这两种方式的特点，不断的建立HTTP连接，然后发送请求request，之后服务器等待处理。服务端体现的是一种被动性，同时这种处理方式，非常耗费网络带宽和服务器资源。

        服务器向客户端推送更新时，因为被动性，对低延迟的应用体验不好；因为request/response的交互方式，对网络带宽和服务器带来了额外的负担（例如多次请求的HTTP头部， TCP连接复用会导致的Head-of-Line Blocking线头阻塞[2]等）。如果在单一的TCP连接中，使用双向通信（全双工通信）就能很好的解决此问题。这就是WebSocket技术的缘由。

二、WebSocket是什么

        WebSocket一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并被RFC7936所补充规范，WebSocketAPI被W3C定为标准。 WebSocket 是独立的、创建在 TCP 上的协议，和 HTTP 的唯一关联是使用 HTTP 协议的101状态码进行协议切换，使用的 TCP 端口是80，可以用于绕过大多数防火墙的限制。 
        WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端直接向客户端推送数据而不需要客户端进行请求，在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并允许数据进行双向传送。 
       目前常见的浏览器如 Chrome、IE、Firefox、Safari、Opera 等都支持 WebSocket，同时需要服务端程序支持 WebSocket。在Websocket协议中，客户端和服务端只需要做一个握手的动作，就能形成一条通道，两者之间可以进行数据互相传送。所以WebSocket协议分为两部分：

1. 握手
2. 数据传输

握手

客户端发送一个请求

服务端回应

”Upgrade:WebSocket”表示这是一个特殊的 HTTP 请求，请求的目的就是要将客户端和服务器端的通讯协议从 HTTP 协议升级到 WebSocket 协议。在请求中的“Sec-WebSocket-Key”是随机的，服务器端会用这些数据来构造出一个SHA-1的信息摘要。把“Sec-WebSocket-Key”加上一个魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密，之后进行BASE-64编码，将结果做为“Sec-WebSocket-Accept”头的值，返回给客户端。以表明服务器端获取了客户端的请求，同意创建 WebSocket 连接。一旦连接建立，客户端和服务器端就可以通过这个通道双向传输数据了。

数据传输

WebSocket的数据在发送时，被组织为依次序的一串数据帧(data frame)，然后进行传送。传送的帧类型分为两类：数据帧(data frame)和控制帧(Control frame)。数据帧可以携带文本数据或者二进制数据；控制帧包含关闭帧(Close frame)和Ping/Pong帧。帧的格式如下所示：

三、WebSocket API

WebSocket API，也称为WebSocket接口，定义了Web应用和服务器进行双向通信的公共接口，如下图：

接口的内容可以分为三类：状态变量、网络功能和消息处理等。

1. 构造函数WebSocket(url, protocols)：构造WebSocket对象，以及建立和服务器连接; protocols可选字段，代表选择的子协议

2. 状态变量readyState: 代表当前连接的状态，短整型数据，取值为CONNECTING(值为0)， OPEN(值为1), CLOSING(值为2), CLOSED(值为3)

3. 方法变量close(code, reason)： 关闭此WebSocket连接。

4. 状态变量bufferedAmount: send函数调用后，被缓存并且未发送到网络上的数据长度

5. 方法变量send(data): 将数据data通过此WebSocket发送到对端

6. 回调函数onopen/onmessage/onerror/onclose: 当相应的事件发生时会触发此回调函数

参考：

https://blog.csdn.net/zwto1/article/details/52493119

https://yinqingwang.wordpress.com/2016/09/17/websocket%E5%8E%9F%E7%90%86%E5%8F%8A%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B/