首页 > 其他分享 >实时消息推送方案-SSE

实时消息推送方案-SSE

时间:2024-03-13 15:55:07浏览次数:23  
标签:websocket 轮询 实时 SSE 推送 服务端 客户端

在日常的开发中,我们经常能碰见服务端需要主动推送给客户端数据的业务场景,比如数据大屏的实时数据,比如消息中心的未读消息,比如聊天功能等等。

服务端向客户端推送数据的实现方案有哪几种?

  • 轮询
  • websocket
  • SSE

轮询简介

在很久很久以前,前端一般使用轮询来进行服务端向客户端进行消息的伪推送,为什么说轮询是伪推送?因为轮询本质上还是通过客户端向服务端发起一个单项传输的请求,服务端对这个请求做出响应而已。通过不断的请求来实现服务端向客户端推送数据的错觉。并不是服务端主动向客户端推送数据。显然,轮询一定是上述三个方法里最下策的决定。

轮询的缺点:

首先轮询需要不断的发起请求,每一个请求都需要经过http建立连接的流程(比如三次握手,四次挥手),是没有必要的消耗。
客户端需要从页面被打开的那一刻开始就一直处理请求。虽然每次轮询的消耗不大,但是一直处理请求对于客户端来说一定是不友好的。
浏览器请求并发是有限制的。比如Chrome 最大并发请求数目为 6,这个限制还有一个前提是针对同一域名的,超过这一限制的后续请求将会被阻塞。而轮询意味着会有一个请求长时间的占用并发名额。
而如果轮询时间较长,可能又没有办法非常及时的获取数据

websocket简介

websocket是一个双向通讯的协议,他的优点是,可以同时支持客户端和服务端彼此相互进行通讯。功能上很强大。
缺点也很明显,websocket是一个新的协议,ws/wss。也就是说,支持http协议的浏览器不一定支持ws协议。
相较于SSE来说,websocket因为功能更强大。结构更复杂。所以相对比较重。

websocket对于各大浏览器的兼容性

image

SSE简介

sse是一个单向通讯的协议也是一个长链接,它只能支持服务端主动向客户端推送数据,但是无法让客户端向服务端推送消息。

长链接是一种HTTP/1.1的持久连接技术,它允许客户端和服务器在一次TCP连接上进行多个HTTP请求和响应,而不必为每个请求/响应建立和断开一个新的连接。长连接有助于减少服务器的负载和提高性能。

SSE的优点

它是一个轻量级的协议,相对于websockte来说,他的复杂度就没有那么高,相对于客户端的消耗也比较少。而且SSE使用的是http协议(websocket使用的是ws协议),也就是现有的服务端都支持SSE,无需像websocket一样需要服务端提供额外的支持。
注意:IE大魔王不支持SSE

SSE对于各大浏览器的兼容性

image

websocket和SSE有什么区别?

轮询
对于当前计算机的发展来说,几乎很少出现同时不支持websocket和sse的情况,所以轮询是在极端情况下浏览器实在是不支持websocket和see的下策。
Websocket和SSE
我们一般的服务端和客户端的通讯基本上使用这两个方案。首先声明:这两个方案没有绝对的好坏,只有在不同的业务场景下更好的选择。
SSE的官方对于SSE和Websocket的评价是

  • WebSocket是全双工通道,可以双向通信,功能更强;SSE是单向通道,只能服务器向浏览器端发送。
  • WebSocket是一个新的协议,需要服务器端支持;SSE则是部署在HTTP协议之上的,现有的服务器软件都支持。
  • SSE是一个轻量级协议,相对简单;WebSocket是一种较重的协议,相对复杂。
  • SSE默认支持断线重连,WebSocket则需要额外部署。
  • SSE支持自定义发送的数据类型。

Websocket和SSE分别适用于什么业务场景?

对于SSE来说,它的优点就是轻,而且对于服务端的支持度要更好。换言之,可以使用SSE完成的功能需求,没有必要使用更重更复杂的websocket。
比如:数据大屏的实时数据,消息中心的消息推送等一系列只需要服务端单方面推送而不需要客户端同时进行反馈的需求,SSE就是不二之选。
对于Websocket来说,他的优点就是可以同时支持客户端和服务端的双向通讯。所适用的业务场景:最典型的就是聊天功能。这种服务端需要主动向客户端推送信息,并且客户端也有向服务端推送消息的需求时,Websocket就是更好的选择。

SSE有哪些主要的API?

建立一个SSE链接 :var source = new EventSource(url);

SSE连接状态

source.readyState

0,相当于常量EventSource.CONNECTING,表示连接还未建立,或者连接断线。
1,相当于常量EventSource.OPEN,表示连接已经建立,可以接受数据。
2,相当于常量EventSource.CLOSED,表示连接已断,且不会重连。

SSE相关事件

open事件(连接一旦建立,就会触发open事件,可以定义相应的回调函数)
message事件(收到数据就会触发message事件)
error事件(如果发生通信错误(比如连接中断),就会触发error事件)

数据格式

Content-Type: text/event-stream //文本返回格式
Cache-Control: no-cache  //不要缓存
Connection: keep-alive //长链接标识

前端代码 demo

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="ul">
        
    </ul>
</body>
<script>

//生成li元素
function createLi(data){
    let li = document.createElement("li");
    li.innerHTML = String(data.message);
    return li;
}
    
//判断当前浏览器是否支持SSE
  let source = ''
 if (!!window.EventSource) {
    source = new EventSource('http://localhost:8088/sse/');
 }else{
    throw new Error("当前浏览器不支持SSE")
 }

 //对于建立链接的监听
 source.onopen = function(event) {
   console.log(source.readyState);
   console.log("长连接打开");
 };

 //对服务端消息的监听
 source.onmessage = function(event) {
   console.log(JSON.parse(event.data));
   console.log("收到长连接信息");
   let li = createLi(JSON.parse(event.data));
   document.getElementById("ul").appendChild(li)
 };

 //对断开链接的监听
 source.onerror = function(event) {
   console.log(source.readyState);
   console.log("长连接中断");
 };

</script>
</html>

标签:websocket,轮询,实时,SSE,推送,服务端,客户端
From: https://www.cnblogs.com/jietang64/p/18070826

相关文章

  • Flink实时写Hudi报NumberFormatException异常
    Flink实时写Hudi报NumberFormatException异常问题描述在Flink项目中,针对Hudi表xxxx_table的bucket_write操作由于java.lang.NumberFormatException异常而从运行状态切换到失败状态。异常信息显示在解析字符串"ddd7a1ec"为整数时出现了问题。报错如下:bucket_write:......
  • Assetbundle.Unload(true)卸载资源时没调用ScriptableObject的OnDisable
    1)Assetbundle.Unload(true)卸载资源时没调用ScriptableObject的OnDisable2)UnityVolumeManager中ReplaceData如何优化3)关于使用Addressable的资源放在远程服务器后的下载问题4)Prefab对DLL中脚本的引用丢失这是第377篇UWA技术知识分享的推送,精选了UWA社区的热门话题,涵盖了UWA问答......
  • 艾科瑞特科技:计算机视觉-实时安全帽检测-通用版
    艾科瑞特科技:计算机视觉-实时安全帽检测-通用版关键词:目标检测、目标跟踪、图像识别、图像分类、视频分析、自然语言处理、自然语言分析、计算机视觉、人工智能、AIGC、AI、大模型、多模态大模型、API、Docker、镜像、API市场、云市场、国产软件、信创内容摘要:实时安全帽检......
  • ELK日志实时分析平台搭建和使用 ELK日志分析平台是指Elasticsearch、Logstash 和 Kiba
    ELK日志实时分析平台搭建和使用ELK日志分析平台是指Elasticsearch、Logstash和Kibana三个项目的集合,后面又增加了Filebeat数据采集器。概述ELK日志分析平台是指Elasticsearch、Logstash和Kibana三个项目的集合,后面又增加了Filebeat数据采集器。Elasticsearch是一个数据......
  • assert
    目录举例说明工作原理更优方法举例说明assert(("helloworld!",false));这段C++代码的目的是为了演示assert断言。assert断言用于检查一个条件是否为真,如果条件为假,则抛出一个异常,并显示一条错误消息。在这个例子中,我们使用了assert宏,它接受两个参数:一个字符串和一个布尔值......
  • 使用 .NET Core 构建实时数据处理应用程序
    第一部分:了解实时数据处理实时数据处理是指立即处理数据输入的过程,这对于需要快速响应的应用程序至关重要。在.NETCore环境中,我们可以利用其高性能、跨平台的特性来构建高效的实时数据处理应用程序。理论事件驱动架构:这是一种软件架构模式,通过事件来触发和通信,从而实现高度......
  • A Sample of Ozaria Assessments and Quizzes
      HowTo:ShareLesson&ActivitySlideswithyourStudentsOzariaprovideseducatorswithturnkeycurriculumresources.TheseincludeLessonSlides,whichcanbefoundforeachmoduleintheCurriculumGuide: TheyalsoincludeActivitySlide......
  • chrome 最新版本自带英语实时字幕了.
    以后有ai的加持,学英语越来越简单了.以后小孩学习外语绝对是easygameok,开始效果展示.我的系统是win10.打开chrome之后随便打开一个视频,比如b站的学英语视频.然后浏览器右上角的多媒体图标会有内容显示.最下面就是实时字母按钮,打开后会自动安装,然后就会出现字幕了.......
  • 淘宝天猫获得商品详情 API 如何做到实时数据获取?
    淘宝天猫的商品详情API实现实时数据获取主要依赖于以下几个关键方面:API设计与更新频率:淘宝天猫的API接口会定期进行数据更新,确保返回的商品详情是最新的。这通常依赖于平台的后端系统,它们会实时监控商品数据的变化并实时更新到API中。开发者在调用API时,可以获取到最新的商品详......
  • Compressed Tree
    首先官方题解写的挺好的,可以看为什么需要在DP状态中定义\(i\)及其父亲的这条边也在呢?你可以试试不定义,那么你会发现是推不走的,因为比如我们现在正在推\(i\),那么他的一个儿子\(u\)的DP值都知道了,但是由于有了\((u,i)\)这一条边,我们就把\(u\)的度数改变了,这个时候\(u\)的DP值就不在......