web即时通信和websocket协议升级

1.web即时通信

• 描述:

  即时通讯技术简单的说就是实现这样一种功能：服务器端可以即时（主动)地将数据的更新或变化反应到客户端，例如消息即时推送等功能都是通过这种技术实现的。

• 问题点-浏览器限制:

  在Web中通信都是浏览器先发送请求到服务器，服务器再进行响应完成数据的即时更新。服务器端如果有了数据更新是没有办法主动向浏览器发送的。

2.解决浏览器限制实现web即时通信方案

1.短轮询:

时序图:

短轮询示意.png

定义:

• 本质：

  浏览器发送HTTP request从服务器获取最新的数据.

• 实现:

  特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，服务器不管有没有最新数据都直接响应,关闭连接

应用场景:

• 传统的web通信模式。后台处理数据，需要一定时间，前端想要知道后端的处理结果，就要不定时的向后端发出请求以获得最新情况。

优缺点：

• 优点：

  与普通HTTP请求无异，前后端程序编写较为容易

• 缺点:

  1.请求中有大半是无用，难于维护，浪费带宽和服务器资源；

  2.响应的结果没有顺序（因为是异步请求，当发送的请求没有返回结果的时候，后面的请求又被发送。而此时如果后面的请求比前面的请 求要先返回结果，那么当前面的请求返回结果数据时已经是过时无效的数据了）.

2.长轮询:

时序图:

长轮询示意.png

定义:

• 本质：

  浏览器发送HTTP request从服务器获取最新的数据.

• 实现:

  客户端向服务器发送Ajax请求，服务器接到请求后hold住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。

应用场景:

• 聊天网页，WebQQ，FacebookIM等.

优缺点：

• 优点：

  在无新数据的情况下不会频繁的请求，耗费资源小。

• 缺点:

  服务器阻塞连接会消耗资源，返回数据顺序无保证，难于管理维护。

3.WebSocket协议:

协议出现:

HTML5规范在传统的web交互基础上为我们带来了众多的新特性，随着web技术被广泛 用于web APP的开发，这些新特性得以推广和使用，而websocket作为一种新的web通信,技术具有巨大意义。

时序图：

websocket.png

定义:

• websocket定义及与HTPP的关系:

  1.WebSocket是HTML5下一种新的协议.它实现了浏览器与服务器全双工通信(全双工即双方可同时向对方发送消息),能更好的节省服务器资源和带宽并达到实时通信的目的.

  2.WebSocket与Http协议一样都是基于TCP的应用层协议。

  3.WebSocket在建立握手连接时,数据是通过http协议传输的（101），但是在建立连接之后,真正的数据传输阶段是不需要http进行参与的.

  WebSocket与HTTP.png

• http 101 状态码:

  101状态代码被发送作为对包括一个请求的响应"Upgrade"报头信号，该请求的接收方愿意升级到所期望的协议之一。如果"101 Switching Protocols"返回了状态码，则标头还必须包含Connection和Upgrade标头，以描述所选协议。请参阅此机制的常用用法中的示例，以了解有关其工作原理的更多信息。

  简述: 告诉服务器我要升级请求协议

• 实现:

  浏览器向服务器发送握手请求(http101)，协议由HTTP协议升级成WebSocket协议.

• 说明:

  1.WebSocket未加密连接为ws://端口80,加密后的协议为wss://端口 443.

  2.WebSocket是类似Socket的TCP长连接,一旦WebSocket连接建立后,服务器和浏览器之间可以自由的进行数据传递.

  3.WebSocket协议中浏览器与服务器是完全平等的，可以相互发送请求亦可以主动断开连接.

  4.websocket握手需要借助于http协议，建立连接后通信过程使用websocket协议。

应用场景:

• 广告推送、视频推送、社交软件开发,替代轮询和长轮询。

优缺点：

• 优点：

  1.服务端和客户端能相互的主动发送消息，建立平等对话。属于一种服务器推送技术。

  2.客户端和服务器之间交换数据简单，允许服务器直接向客户端推送数据而不需要客户端进行请求。

• 缺点:

  主流浏览器支持的Web Socket版本不一致；服务端没有标准的API。

websocket实现原理:

• 说明:

  1.WebSocket属于HTML5的新特性

  2.WebSocket基于HTTP协议(101状态码)来完成一部分握手.

  3.浏览器发起协议升级请求,只支持GET方法.

• WebSocket请求头特殊内容:

WebSocket请求头.png

1.Connection:

• 作用:
  决定当前的事务完成后，是否会关闭网络连接(tcp).
• 参数:
  Upgrade:指示这是一个升级请求.(升级请求)
  keep-alive: http1.1特性,指示网络连接(tcp)是持久的，不会关闭，使得对同一个服务器的请求可以继续在该连接上完成。(轮询)
  其他参数详见（https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Connection）

2.Upgrade: websocket,h2c

• 作用:
  告诉服务端需要将通信协议升级到xxx.
  头指定一项或多项协议名，按优先级排序，以逗号分隔。
• 参数:
  h2c：指示将协议升级为HTTP/2.0
  websocket:指示将升级到WebSocket协议.

3.Sec-WebSocket-Extensions：

• 作用:
  指定一个或多个协议级WebSocket扩展以要求服务器使用
• 参数:
  superspeed
  colormode
  depth=16

4.Sec-WebSocket-Key:

• 作用:
  向服务器提供所需信息，以确认客户端有权请求升级到WebSocket。当不安全的(HTTP)客户端希望升级时,可以使用此标头.
  告诉服务器我要打开WebSocket连接.
• 说明:
  此标头由选择使用它的客户端自动添加(浏览器随机生成)；不能使用XMLHttpRequest.setRequestHeader()方法添加.
  此请求升级的密钥。如果客户愿意，可以添加它，并且服务器将在响应中包含它自己的密钥，在将升级响应提供给您之前，客户将对其进行验证。

5.Sec-WebSocket-Version

• 作用:
  指定客户端希望使用的WebSocket协议版本，以便服务器可以在其端确认是否支持该版本。

• 说明:
  客户端与服务器通信时希望使用的WebSocket协议版本。该号码应该是IANA WebSocket版本号注册表中列出的最新版本。WebSocket协议的最新最终版本是版本13。
  如果服务器无法使用指定版本的WebSocket协议进行通信，它将以错误（例如426 Upgrade Required）响应，该错误的标Sec-WebSocket-Version头中包含带有逗号分隔的受支持协议版本列表的标头

• WebSocket响应

  websocket响应头.png

1.Sec-WebSocket-Accept:
说明:
1.当服务器愿意启动WebSocket连接时，在打开握手过程中来自服务器的响应消息中将包含该消息。在响应头中，它只会出现一次。
2.Sec-WebSocket-Accept的值解析请求头中Sec-WebSocket-Key的数据 ，然后将数据加上一个魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密，之后进行BASE-64编码得到.