|
|
|
|
公众号矩阵

系统设计基础之长轮询、WebSocket、服务器发送事件(SSEs)协议

长轮询,WebSocket和服务器发送事件是客户端和服务器(如Web浏览器和Web服务器)之间流行的通信协议。

作者: laker 来源: Java大厂面试官|2021-01-12 05:07

本文转载自微信公众号「Java大厂面试官 」,作者laker 。转载本文请联系Java大厂面试官 公众号。 

生活只有两种选择:重新出发,做自己生命的主角;抑或停留在原地,做别人的配角。

  • 长轮询、WebSocket和服务器发送事件之间有什么区别?
  • Ajax轮询协议
  • HTTP长轮询协议
  • WebSockets协议
  • 服务器发送事件协议(SSEs)
  • 总结
    • SSEs协议剖析
    • 客户端DEMO
    • 服务端DEMO

长轮询、WebSocket和服务器发送事件有什么区别

长轮询,WebSocket和服务器发送事件是客户端和服务器(如Web浏览器和Web服务器)之间流行的通信协议。首先,让我们了解标准HTTP Web请求。以下是常规HTTP请求的一系列事件:

  1. 客户端打开连接并从服务器请求数据。
  2. 服务器计算响应。
  3. 服务器根据打开的请求将响应发送回客户端。

Ajax轮询协议

轮询是绝大多数AJAX应用程序使用的一种标准技术。基本思想是客户端反复轮询(或请求)服务器以获取数据。客户端发出请求,并等待服务器响应数据。如果没有可用数据,则返回空响应。

  1. 客户端使用常规HTTP打开连接并从服务器请求数据。
  2. 所请求的网页以固定间隔将请求发送到服务器(例如0.5秒)。
  3. 服务器计算响应并将其发送回,就像常规HTTP流量一样。
  4. 客户端定期重复上述三个步骤,以从服务器获取更新。

轮询的问题在于客户端必须不断向服务器询问任何新数据。会照成许多空响应,从而造成HTTP开销。

HTTP长轮询协议

这是传统轮询技术的一种变体,该技术允许服务器在数据可用时将信息推送到客户端。使用Long-Polling,客户端可以像正常轮询一样从服务器请求信息,但是服务器可能不会立即响应。这就是为什么这种技术有时被称为“挂起请求”的原因。

  • 如果服务器没有可供客户端使用的任何数据,则服务器将保留请求并等待直到某些数据可用为止,而不是发送空响应。
  • 一旦数据可用,完整的响应将发送到客户端。然后,客户端立即从服务器重新请求信息,以便服务器几乎始终具有可用的等待请求,服务器可以使用该请求来响应事件。

使用HTTP Long-Polling的应用程序的基本生命周期如下:

  • 客户端使用常规HTTP发出初始请求,然后等待响应。
  • 服务器延迟其响应,直到有可用的更新或发生超时为止。
  • 当有可用更新时,服务器会将完整的响应发送到客户端。
  • 客户端通常会在收到响应后立即发送新的长轮询请求,或者在允许的等待时间的暂停后发送新的长轮询请求。
  • 每个长轮询请求都有一个超时。由于超时而关闭连接后,客户端必须定期重新连接。

WebSockets协议

WebSocket提供全双工单个TCP连接上的通信通道。它提供了客户端和服务器之间的持久连接,双方都可以使用该连接随时开始发送数据。客户端通过称为WebSocket握手的过程建立WebSocket连接。如果该过程成功,则服务器和客户端可以随时在两个方向上交换数据。WebSocket协议使客户端和服务器之间的通信具有较低的开销,从而促进了与服务器之间的实时数据传输。通过提供一种标准化的方法,使服务器无需客户端询问即可将内容发送到浏览器,并允许消息在保持连接打开的情况下来回传递。

服务器发送事件协议(SSEs)

在SSEs下,客户端与服务器建立持久的长期连接。服务器使用此连接将数据发送到客户端。如果客户端要向服务器发送数据,则需要使用另一种技术/协议。

  1. 客户端使用常规HTTP向服务器请求数据。
  2. 所请求的网页将打开与服务器的连接。
  3. 只要有新信息可用,服务器就会将数据发送到客户端。

当我们需要从服务器到客户端的实时流量,或者服务器正在循环生成数据并将向客户端发送多个事件时,SSEs最好。

总结

常见的前后端消息通信协议如下:

  • 传统的轮询协议
  • Http长轮询协议
  • WebSockets协议
  • SSEs协议

SSEs协议剖析

其中除了SSEs协议,其他方法大家都很熟悉了,再来看看SSEs到底是个啥?

SSE,即 Server-Sent Events,又叫 EventSource,是一种已被写入 HTML 5 标准的服务端事件推送技术,它允许客户端和服务端之间建立一个单向通道,以让服务端向客户端单方向持续推送事件消息,SSE 适用于不需要从客户端发送数据,但要通过某些服务器操作进行更新的场景,例如股票行情、共享设施更新、好友状态更新等。

上面已经简介过其大致流程了,简单说,所谓SSE,就是浏览器向服务器发送一个HTTP请求,然后服务器不断单向地向浏览器推送“信息”(message)。这种信息在格式上很简单,就是“信息”加上前缀“data: ”,然后以“\n\n”结尾。

SSE与WebSocket有相似功能,都是用来建立浏览器与服务器之间的通信渠道。

两者的对比如下:

SSE Websocket
http 协议,可以直接运行于现有的代理服务器和认证技术 独立的 websocket 协议,需要服务器端支持
SSE是单向通道,只能服务器向浏览器端发送。 全双工通道,可以双向通信,功能更强
轻量级,实现简单 实现相对复杂
默认支持断线重连 需要自己实现心跳断线重连
文本传输 二进制传输
支持自定义发送的消息类型

客户端DEMO

  1. <script type="text/javascript"
  2.     if (!!window.EventSource) { 
  3.         var source = new EventSource('push'); 
  4.         //打开连接 
  5.         source.addEventListener('open'function (evt) { 
  6.             // console.info("连接已经打开了"); 
  7.         }, false); 
  8.         //接收消息 
  9.         source.addEventListener('message'function (evt) { 
  10.             console.info(evt.data); 
  11.         }); 
  12.         //错误消息,及关闭通知 
  13.         source.addEventListener('error'function (evt) { 
  14.             // console.info(evt); 
  15.         }, false); 
  16.     } else { 
  17.         alert("浏览器不支持  SSE"
  18.     } 
  19. </script> 

服务端DEMO

首先向客户端声明接下来发送的是事件流text/event-stream类型的数据,然后就可以向客户端多次发送消息。事件流是一个简单的文本流,仅支持 UTF-8 格式的编码。每条消息以一个空行作为分隔符。

  1. @RestController 
  2. public class SSEsController { 
  3.      //向浏览器发送数据 
  4.     @RequestMapping(value = "/push", produces = "text/event-stream"
  5.     public String push() throws InterruptedException { 
  6.         String msg = ...; 
  7.         //固定格式 
  8.         return "data:" + msg + "\n\n"
  9.     } 

SpringBoot 利用 SseEmitter 来支持 sse,无需上面繁琐的代码,有兴趣的可以自行百度

本文大部分篇幅是翻译的国外文章:

  • Grokking the System Design Interview by Design Gurus
  • https://www.html5rocks.com/en/tutorials/eventsource/basics/
  • https://blog.csdn.net/beng_shakalaka/article/details/80792660

【编辑推荐】

  1. Linux运维实战案例中级课程第2章DNS服务器
  2. 记一次缓存服务器迁移史,心塞!
  3. PROXMOX v6.1.7 超融合服务器集群 开源虚拟化课程
  4. 部署并管理文件服务器视频课程(DFS)
  5. 构建企业级WEB服务器:Nginx企业实战
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

1人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

30人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

209人订阅学习

视频课程+更多

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微