平时咱们关上网页，比方购物网站某宝。都是点一下列表商品，跳转一下网页就到了商品详情。

从HTTP协定的角度来看，就是点一下网页上的某个按钮，前端发一次HTTP申请，网站返回一次HTTP响应。

这种由客户端被动申请，服务器响应的形式也满足大部分网页的性能场景。

但有没有发现，这种状况下，服务器素来就不会被动给客户端发一次音讯。

就像你喜爱的女生从来不会被动找你一样。

但如果当初，你在刷网页的时候右下角忽然弹出一个小广告，提醒你【一个人在家偷偷能力玩哦】。

求知，好学，怠惰，这些刻在你DNA里的货色都动起来了。

你点开后发现。

长相平平无奇的古某提醒你"道士9条狗，全服横着走"。

影帝某辉老师跟你说"系兄弟就来砍我"。

来都来了，你就选了个角色进到了游戏界面里。

这时候，上来就是一个小怪，从远处走来，而后疯狂拿木棒子抽你。

你全程没点任何一次鼠标。服务器就主动将怪物的挪动数据和攻打数据源源不断发给你了。

这….太暖心了。

打动之余，问题就来了，

像这种看起来服务器被动发消息给客户端的场景，是怎么做到的？

在真正答复这个问题之前，咱们先来聊下一些相干的常识背景。

应用HTTP一直轮询

其实问题的痛点在于，怎么样能力在用户不做任何操作的状况下，网页能收到音讯并产生变更。

最常见的解决方案是，网页的前端代码里一直定时发HTTP申请到服务器，服务器收到申请后给客户端响应音讯。

这其实时一种伪服务器推的模式。

它其实并不是服务器被动发消息到客户端，而是客户端本人一直偷偷申请服务器，只是用户无感知而已。

用这种形式的场景也有很多，最常见的就是扫码登录。

比方某信公众号平台，登录页面二维码呈现之后，前端网页基本不晓得用户扫没扫，于是一直去向后端服务器询问，看有没有人扫过这个码。而且是以大略1到2秒的距离去一直发出请求，这样能够保障用户在扫码后能在1到2s内失去及时的反馈，不至于等太久。

但这样，会有两个比拟显著的问题

  • 当你关上F12页面时，你会发现满屏的HTTP申请。尽管很小，但这其实也耗费带宽，同时也会减少上游服务器的累赘。
  • 最坏状况下，用户在扫码后，须要等个1~2s，正好才触发下一次http申请，而后才跳转页面，用户会感到显著的卡顿。

应用起来的体验就是，二维码呈现后，手机扫一扫，而后在手机上点个确认，这时候卡顿等个1~2s，页面才跳转。

那么问题又来了，有没有更好的解决方案？

有，而且实现起来老本还非常低。

长轮询

咱们晓得，HTTP申请收回后，个别会给服务器留肯定的工夫做响应，比方3s，规定工夫内没返回，就认为是超时。

如果咱们的HTTP申请将超时设置的很大，比方30s，在这30s内只有服务器收到了扫码申请，就立马返回给客户端网页。如果超时，那就立马发动下一次申请。

这样就缩小了HTTP申请的个数，并且因为大部分状况下，用户都会在某个30s的区间内做扫码操作，所以响应也是及时的。

比方，某度云网盘就是这么干的。所以你会发现一扫码，手机上点个确认，电脑端网页就秒跳转，体验很好。

真两全其美。

像这种发动一个申请，在较长时间内期待服务器响应的机制，就是所谓的长训轮机制。咱们罕用的音讯队列RocketMQ中，消费者去取数据时，也用到了这种形式。

像这种，在用户不感知的状况下，服务器将数据推送给浏览器的技术，就是所谓的服务器推送技术，它还有个毫不沾边的英文名，comet技术，大家听过就好。

下面提到的两种解决方案，实质上，其实还是客户端被动去取数据。

对于像扫码登录这样的简略场景还能用用。

但如果是网页游戏呢，游戏个别会有大量的数据须要从服务器被动推送到客户端。

这就得说下websocket了。

websocket是什么

咱们晓得TCP连贯的两端，同一时间里，单方都能够被动向对方发送数据。这就是所谓的全双工。

而当初应用最宽泛的HTTP1.1，也是基于TCP协定的，同一时间里，客户端和服务器只能有一方被动发数据，这就是所谓的半双工。

也就是说，好好的全双工TCP，被HTTP用成了半双工。

为什么？

这是因为HTTP协定设计之初，思考的是看看网页文本的场景，能做到客户端发动申请再由服务器响应，就够了，基本就没思考网页游戏这种，客户端和服务器之间都要相互被动发大量数据的场景。

所以为了更好的反对这样的场景，咱们须要另外一个基于TCP的新协定。

于是新的应用层协定websocket就被设计进去了。

大家别被这个名字给带偏了。尽管名字带了个socket，但其实socket和websocket之间，就跟雷峰和雷峰塔一样，二者靠近毫无关系。

怎么建设websocket连贯

咱们平时刷网页，个别都是在浏览器上刷的，一会刷刷图文，这时候用的是HTTP协定，一会关上网页游戏，这时候就得切换成咱们新介绍的websocket协定。

为了兼容这些应用场景。浏览器在TCP三次握手建设连贯之后，都对立应用HTTP协定先进行一次通信。

  • 如果此时是一般的HTTP申请，那后续单方就还是老样子持续用一般HTTP协定进行交互，这点没啥疑难。
  • 如果这时候是想建设websocket连贯，就会在HTTP申请里带上一些非凡的header头。
Connection: UpgradeUpgrade: websocketSec-WebSocket-Key: T2a6wZlAwhgQNqruZ2YUyg==\r\n

这些header头的意思是，浏览器想降级协定（Connection: Upgrade），并且想升级成websocket协定（Upgrade: websocket）。

同时带上一段随机生成的base64码（Sec-WebSocket-Key），发给服务器。

如果服务器正好反对升级成websocket协定。就会走websocket握手流程，同时依据客户端生成的base64码，用某个公开的算法变成另一段字符串，放在HTTP响应的 Sec-WebSocket-Accept 头里，同时带上101状态码，发回给浏览器。

HTTP/1.1 101 Switching Protocols\r\nSec-WebSocket-Accept: iBJKv/ALIW2DobfoA4dmr3JHBCY=\r\nUpgrade: websocket\r\nConnection: Upgrade\r\n
http状态码=200（失常响应）的状况，大家见得多了。101的确不常见，它其实是指协定切换。

之后，浏览器也用同样的公开算法将base64码转成另一段字符串，如果这段字符串跟服务器传回来的字符串统一，那验证通过。

就这样经验了一来一回两次HTTP握手，websocket就建设实现了，后续单方就能够应用webscoket的数据格式进行通信了。

websocket抓包

咱们能够用wireshark抓个包，理论看下数据包的状况。

下面这张图，留神画了红框的第2445行报文，是websocket的第一次握手，意思是发动了一次带有非凡Header的HTTP申请。

下面这个图里画了红框的4714行报文，就是服务器在失去第一次握手后，响应的第二次握手，能够看到这也是个HTTP类型的报文，返回的状态码是101。同时能够看到返回的报文header中也带有各种websocket相干的信息，比方Sec-WebSocket-Accept。

下面这张图就是全貌了，从截图上的正文能够看出，websocket和HTTP一样都是基于TCP的协定。经验了三次TCP握手之后，利用HTTP协定降级为websocket协定。

你在网上可能会看到一种说法："websocket是基于HTTP的新协定"，其实这并不对，因为websocket只有在建设连贯时才用到了HTTP，降级实现之后就跟HTTP没有任何关系了。

这就如同你喜爱的女生通过你要到了你大学室友的微信，而后他们本人就聊起来了。你能说这个女生是通过你去跟你室友沟通的吗？不能。你跟HTTP一样，都只是个工具人。

这就有点"借壳生蛋"的那意思。

websocket的音讯格局

下面提到在实现协定降级之后，两端就会用webscoket的数据格式进行通信。

数据包在websocket中被叫做帧。

咱们来看下它的数据格式长什么样子。

这外面字段很多，但咱们只须要关注上面这几个。

opcode字段：这个是用来标记这是个什么类型的数据帧。比方。

  • 等于1时是指text类型（string）的数据包
  • 等于2是二进制数据类型（[]byte）的数据包
  • 等于8是敞开连贯的信号

payload字段：寄存的是咱们真正想要传输的数据的长度，单位是字节。比方你要发送的数据是字符串"111"，那它的长度就是3。

另外，能够看到，咱们寄存payload长度的字段有好几个，咱们既能够用最后面的7bit, 也能够用前面的7+16bit或7+64bit。

那么问题就来了。

咱们晓得，在数据层面，大家都是01二进制流。我怎么晓得什么状况下应该读7bit，什么状况下应该读7+16bit呢？

websocket会用最开始的7bit做标记位。不论接下来的数据有多大，都先读最先的7个bit，依据它的取值决定还要不要再读个16bit或64bit。

  • 如果最开始的7bit的值是 0~125，那么它就示意了 payload 全副长度，只读最开始的7个bit就完事了。

  • 如果是126（0x7E）。那它示意payload的长度范畴在 126~65535 之间，接下来还须要再读16bit。这16bit会蕴含payload的实在长度。

  • 如果是127（0x7F）。那它示意payload的长度范畴>=65536，接下来还须要再读64bit。这64bit会蕴含payload的长度。这能放2的64次方byte的数据，换算一下好多个TB，必定够用了。

payload data字段：这里寄存的就是真正要传输的数据，在晓得了下面的payload长度后，就能够依据这个值去截取对应的数据。

大家有没有发现一个小细节，websocket的数据格式也是  数据头（内含payload长度） + payload data 的模式。

之前写的《既然有HTTP协定，为什么还要有RPC》提到过，TCP协定自身就是全双工，但间接应用纯裸TCP去传输数据，会有粘包的"问题"。为了解决这个问题，下层协定个别会用音讯头+音讯体的格局去从新包装要发的数据。

而音讯头里个别含有音讯体的长度，通过这个长度能够去截取真正的音讯体。

HTTP协定和大部分RPC协定，以及咱们明天介绍的websocket协定，都是这样设计的。

websocket的应用场景

websocket完满继承了TCP协定的全双工能力，并且还贴心的提供了解决粘包的计划。它实用于须要服务器和客户端（浏览器）频繁交互的大部分场景。比方网页/小程序游戏，网页聊天室，以及一些相似飞书这样的网页协同办公软件。

回到文章结尾的问题，在应用websocket协定的网页游戏里，怪物挪动以及攻打玩家的行为是服务器逻辑产生的，对玩家产生的挫伤等数据，都须要由服务器被动发送给客户端，客户端取得数据后展现对应的成果。

总结

  • TCP协定自身是全双工的，但咱们最罕用的HTTP1.1，尽管是基于TCP的协定，但它是半双工的，对于大部分须要服务器被动推送数据到客户端的场景，都不太敌对，因而咱们须要应用反对全双工的websocket协定。
  • 在HTTP1.1里。只有客户端不问，服务端就不答。基于这样的特点，对于登录页面这样的简略场景，能够应用定时轮询或者长轮询的形式实现服务器推送(comet)的成果。
  • 对于客户端和服务端之间须要频繁交互的简单场景，比方网页游戏，都能够思考应用websocket协定。
  • websocket和socket简直没有任何关系，只是叫法类似。
  • 正因为各个浏览器都反对HTTP协定，所以websocket会先利用HTTP协定加上一些非凡的header头进行握手降级操作，降级胜利后就跟HTTP没有任何关系了，之后就用websocket的数据格式进行收发数据。