您当前的位置:首页 > 电脑百科 > 数据库 > 百科

实时数据推送并非只有WebSocket一种选择

时间:2023-09-27 14:22:46  来源:Springboot实战案例锦集  作者:

环境:SpringBoot2.7.16

概述

在Web应用中,有几种实时数据推送的选择方案,包括SSE(Server-Sent Events)、WebSocket、长轮询等。

SSE是一种基于HTTP协议的服务器向客户端推送数据的技术。它的优点是实现简单、轻量级,对现有服务器软件兼容性好。但是,由于SSE是单向通信模型,只能由服务器向客户端推送数据,对于需要客户端向服务器发送数据的场景,SSE就无法满足需求。

WebSocket是一种双向通信模型,允许客户端和服务器之间互相发送消息。它的优点是实时性强、延迟低,但是需要服务器端支持对应的协议栈,实现起来相对复杂一些。

长轮询是对短轮询的一种改进版本,通过在尽可能减少对服务器资源浪费的同时,保证消息的相对实时性。长轮询在客户端发起请求时,服务器会保持连接打开,等待一定时间后再返回响应。这样可以减少客户端频繁的请求,节省带宽和服务器资源。但是,如果服务器没有新的消息产生,客户端会一直等待响应,实时性就会受到一定影响。

根据实际应用场景和需求,可以选择适合的实时数据推送方案。如果只需要服务器向客户端推送数据,且对实时性要求不是特别高,可以选择SSE。如果需要客户端向服务器发送数据,或者对实时性要求较高,可以选择WebSocket或长轮询。当然,也可以根据实际情况将这几种方案结合起来使用,以满足不同的需求。

SSE与WebSocket对比

SSE(Server-Sent Events)和WebSocket都是用于实现实时通信的技术,存在关键差异。

通信模型:SSE是单向通信模型,只能由服务器向客户端推送数据。而WebSocket是双向通信模型,客户端和服务器可以互相发送消息。

连接性:SSE使用长轮询或HTTP流技术,需要频繁地发起HTTP请求来获取数据。而 WebSocket只需在握手阶段建立一次连接,然后保持连接打开,减少了频繁建立连接的开销。

实时性:WebSocket提供了更低的延迟和更高的实时性,因为它支持双向通信,可以立即将数据推送给客户端。SSE虽然也可以实现实时性,但由于其单向通信模型,需要服务器定期发送数据。

协议特性:SSE是部署在HTTP协议之上的,现有的服务器软件都支持。而WebSocket是一个新的协议,需要服务器端支持对应的协议栈。

复杂性:SSE相对WebSocket来说更轻量级,实现更简单。WebSocket协议较复杂,实现相对困难一些。

总体来说,SSE和WebSocket都有各自的优点和适用场景。SSE轻量级且对现有服务器软件兼容性好,而WebSocket则提供了更强的双向通信能力和更高的实时性。

SSE简介

SSE(Server-Sent Events)是一种用于实现服务器向客户端实时推送数据的Web技术。与传统的轮询和长轮询相比,SSE提供了更高效和实时的数据推送机制。

SSE基于HTTP协议,允许服务器将数据以事件流(Event Stream)的形式发送给客户端。客户端通过建立持久的HTTP连接,并监听事件流,可以实时接收服务器推送的数据。

SSE的主要特点包括:

简单易用:SSE使用基于文本的数据格式,如纯文本、JSON等,使得数据的发送和解析都相对简单。

单向通信:SSE支持服务器向客户端的单向通信,服务器可以主动推送数据给客户端。

实时性:SSE建立长时间的连接,使得服务器可以实时地将数据推送给客户端,而无需客户端频繁地发起请求。

服务端开发

依赖管理

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

配置文件

spring:
  mvc:
    static-path-pattern: /**
  web:
    resources:
      #静态文件目录index.html
      static-locations: classpath:/templates/

接口开发

@RestController
@RequestMApping("/sse")
public class SseController {
  
  // 该集合用来管理所有客户端的连接
  private final Map<String, SseEmitter> sse = new ConcurrentHashMap<>() ;


  // 创建连接接口,同时指定了消息类型为text/event-stream
  @GetMapping(path="/events/{id}", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
  public SseEmitter createConnect(@PathVariable("id") String id) throws IOException {
    SseEmitter emitter = new SseEmitter(0L);
    // 每一个客户端保存到Map中
    sse.put(id, emitter) ;
    // 当发生错误的回调
    emitter.onError(ex -> {
      System.err.printf("userId: %s, error: %s%n", id, ex.getMessage()) ;
      sse.remove(id) ;
    }) ;
   // 异步请求完成后的回调
    emitter.onCompletion(() -> {
      sse.remove(id) ;
      System.out.printf("%s, 请求完成...") ;
    }) ;
    // 异步请求超时回调
    emitter.onTimeout(() -> {
      System.err.println("超时...") ;
    }) ;
    return emitter;
  }
  
  // 该接口用来进行消息的发送
  // 由客户端发起请求,然后根据id获取相应的SseEmitter进行消息的发送
  @GetMapping("/sender/{id}")
  public String sender(@PathVariable("id") String id) throws Exception {
    SseEmitter emitter = this.sse.get(id) ;
    if (emitter != null) {
      try {
        emitter.send( "随机消息 - " + new Random().nextInt(10000000)) ;
      } catch (Exception e) {
        System.err.println("%s%n", e.getMessage()) ;
      }
    }
    return "success" ;
  }
}

前端开发

前端比较简单就是一个index.html页面

<html>
  <head>
  <title>SSE</title>
</head>
<body>
  <button type="button" onclick="closeSse()">Close</button>
  <hr style="margin: 2px; padding: 0px 0px;"/>
  <ul id="list"></ul>
</body>
<script>
  const evtSource = new EventSource(`/sse/events/${Date.now()}`) ;
  evtSource.onmessage = (event) => {
    const newElement = document.createElement("li") ;
    const eventList = document.getElementById("list") ;
    newElement.innerHTML = "接收到消息: " + event.data ;
    eventList.appendChild(newElement) ;
  };
  evtSource.onopen = (event) => {
    console.log('建立连接...')
  };
  evtSource.onerror = (event) => {
    console.error("发生错误:", event) ;
  };
  function closeSse() {
    evtSource.close() ;
  }
</script>
</html>

以上就是前后端的开发,代码非常的简单;也就简单的实现了由服务端实时数据推送。

EventSource对象的readyState有3个状态值:

0 — connecting

1 — open

2 — closed

测试

实时数据推送并非只有WebSocket一种选择图片

调用消息发送接口

实时数据推送并非只有WebSocket一种选择图片

 

实时数据推送并非只有WebSocket一种选择图片

自定义事件类型

修改消息发送接口

@GetMapping("/sender/{id}")
  public String sender(@PathVariable("id") String id) throws Exception {
    SseEmitter emitter = this.sse.get(id) ;
    if (emitter != null) {
      SseEventBuilder builder = SseEmitter.event() ;
      // 指定事件类型
      builder.name("chat") ;
      String msg = "随机消息 - " + new Random().nextInt(10000000);
      builder.data(msg) ;
      try {
        emitter.send(builder) ;
      } catch (Exception e) {
        e.printStackTrace();
      }
    }
    return "success" ;
  }

前端监听具体事件类型消息

// 监听指定事件类型消息
evtSource.addEventListener("chat", (event) => {
  const newElement = document.createElement("li");
  const eventList = document.getElementById("list");


  newElement.innerHTML = "chat message: " + event.data;
  eventList.appendChild(newElement);
});

注意:默认是“message”事件,因为它可以捕获没有 event 字段的事件, * 以及具有特定类型 `event:message` 的事件。* 它不会触发任何其他类型的事件。



Tags:WebSocket   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
详解基于SpringBoot的WebSocket应用开发
在现代Web应用中,实时交互和数据推送的需求日益增长。WebSocket协议作为一种全双工通信协议,允许服务端与客户端之间建立持久性的连接,实现实时、双向的数据传输,极大地提升了用...【详细内容】
2024-01-30  Search: WebSocket  点击:(9)  评论:(0)  加入收藏
浅谈WebSocket协议在Web领域的应用
Part 01、WebSocket是什么? WebSocket是一种在Web应用程序中提供双向通信的协议。它允许服务器主动向客户端推送数据,而不是像传统的HTTP请求-响应模式一样,客户端必须发送请...【详细内容】
2023-12-08  Search: WebSocket  点击:(199)  评论:(0)  加入收藏
WebSocket基本使用方法
WebSocket是一种双向、单套接字连接,使用WebSocket,那么请求就变成了打开WebSocket连接的单一请求,并且可以重用公客户端到服务器以及服务器到客户端的同一连接。WebSock减少延...【详细内容】
2023-12-02  Search: WebSocket  点击:(187)  评论:(0)  加入收藏
你不知道的Websocket协议,这次给你讲明白!
前言初次接触 websocket 的人,可能都会有这样的疑问:我们已经有了 http 协议,为什么还需要websocket协议?它带来了什么好处?原因是http每次请求只能由客户发起,而websocket最大特...【详细内容】
2023-11-29  Search: WebSocket  点击:(193)  评论:(0)  加入收藏
实时协作的秘诀:RabbitMQ与WebSockets的结合
实时协作是现代软件开发中非常重要的一个方面。为了实现实时协作,一种常见的做法是将消息队列与WebSocket技术相结合。其中,RabbitMQ是一个功能强大的消息队列系统,它能够有效...【详细内容】
2023-11-21  Search: WebSocket  点击:(176)  评论:(0)  加入收藏
WebSocket 魔法师:打造实时应用的无限可能
1、背景 在开发一些前端页面的时候,总是能接收到这样的需求:如何保持页面并实现自动更新数据呢?以往的常规做法,是前端使用定时轮询后端接口,获取响应后重新渲染前端页面,这种做法...【详细内容】
2023-11-09  Search: WebSocket  点击:(197)  评论:(0)  加入收藏
什么是WebSocket ,一文了解
WebSocket 允许我们创建“实时”应用程序,与传统 API 协议相比,该应用程序速度更快且开销更少。一、WebSocket 是如何工作的按照传统的定义,WebSocket是一种双工协议,主要用于客...【详细内容】
2023-10-03  Search: WebSocket  点击:(148)  评论:(0)  加入收藏
实时数据推送并非只有WebSocket一种选择
环境:SpringBoot2.7.16概述在Web应用中,有几种实时数据推送的选择方案,包括SSE(Server-Sent Events)、WebSocket、长轮询等。SSE是一种基于HTTP协议的服务器向客户端推送数据的技...【详细内容】
2023-09-27  Search: WebSocket  点击:(405)  评论:(0)  加入收藏
SpringBoot使用WebSocket实现即时消息
当以jar包形式运行时需要配置该bean,暴露我们配置的@ServerEndpoint;当我们以war独立tomcat运行时不能配置该bean。这里有个g-messages.js文件是我写的一个工具类,用来做连接及...【详细内容】
2023-08-14  Search: WebSocket  点击:(253)  评论:(0)  加入收藏
SpringBoot整合WebSocket详解
环境:Springboot3.0.5WebSocket介绍WebSocket协议RFC 6455提供了一种标准化的方式,通过一个TCP连接在客户端和服务器之间建立全双工、双向的通信通道。它是一个不同于HTTP的TC...【详细内容】
2023-08-09  Search: WebSocket  点击:(369)  评论:(0)  加入收藏
▌简易百科推荐
向量数据库落地实践
本文基于京东内部向量数据库vearch进行实践。Vearch 是对大规模深度学习向量进行高性能相似搜索的弹性分布式系统。详见: https://github.com/vearch/zh_docs/blob/v3.3.X/do...【详细内容】
2024-04-03  京东云开发者    Tags:向量数据库   点击:(4)  评论:(0)  加入收藏
原来 SQL 函数是可以内联的!
介绍在某些情况下,SQL 函数(即指定LANGUAGE SQL)会将其函数体内联到调用它的查询中,而不是直接调用。这可以带来显著的性能提升,因为函数体可以暴露给调用查询的规划器,从而规划器...【详细内容】
2024-04-03  红石PG  微信公众号  Tags:SQL 函数   点击:(3)  评论:(0)  加入收藏
如何正确选择NoSQL数据库
译者 | 陈峻审校 | 重楼Allied Market Research最近发布的一份报告指出,业界对于NoSQL数据库的需求正在持续上升。2022年,全球NoSQL市场的销售额已达73亿美元,预计到2032年将达...【详细内容】
2024-03-28    51CTO  Tags:NoSQL   点击:(13)  评论:(0)  加入收藏
为什么数据库连接池不采用 IO 多路复用?
这是一个非常好的问题。IO多路复用被视为是非常好的性能助力器。但是一般我们在使用DB时,还是经常性采用c3p0,tomcat connection pool等技术来与DB连接,哪怕整个程序已经变成以...【详细内容】
2024-03-27  dbaplus社群    Tags:数据库连接池   点击:(12)  评论:(0)  加入收藏
八个常见的数据可视化错误以及如何避免它们
在当今以数据驱动为主导的世界里,清晰且具有洞察力的数据可视化至关重要。然而,在创建数据可视化时很容易犯错误,这可能导致对数据的错误解读。本文将探讨一些常见的糟糕数据可...【详细内容】
2024-03-26  DeepHub IMBA  微信公众号  Tags:数据可视化   点击:(6)  评论:(0)  加入收藏
到底有没有必要分库分表,如何考量的
关于是否需要进行分库分表,可以根据以下考量因素来决定: 数据量和负载:如果数据量巨大且负载压力较大,单一库单一表可能无法满足性能需求,考虑分库分表。 数据增长:预估数据增长...【详细内容】
2024-03-20  码上遇见你  微信公众号  Tags:分库分表   点击:(13)  评论:(0)  加入收藏
在 SQL 中写了 in 和 not in,技术总监说要炒了我……
WHY?IN 和 NOT IN 是比较常用的关键字,为什么要尽量避免呢?1、效率低项目中遇到这么个情况:t1表 和 t2表 都是150w条数据,600M的样子,都不算大。但是这样一句查询 &darr;select *...【详细内容】
2024-03-18  dbaplus社群    Tags:SQL   点击:(5)  评论:(0)  加入收藏
应对慢SQL的致胜法宝:7大实例剖析+优化原则
大促备战,最大的隐患项之一就是慢SQL,对于服务平稳运行带来的破坏性最大,也是日常工作中经常带来整个应用抖动的最大隐患,在日常开发中如何避免出现慢SQL,出现了慢SQL应该按照什...【详细内容】
2024-03-14  京东云开发者    Tags:慢SQL   点击:(4)  评论:(0)  加入收藏
过去一年,我看到了数据库领域的十大发展趋势
作者 | 朱洁策划 | 李冬梅过去一年,行业信心跌至冰点2022 年中,红衫的一篇《适应与忍耐》的报告,对公司经营提出了预警,让各个公司保持现金流,重整团队,想办法增加盈利。这篇报告...【详细内容】
2024-03-12    InfoQ  Tags:数据库   点击:(26)  评论:(0)  加入收藏
SQL优化的七个方法,你会哪个?
一、插入数据优化 普通插入:在平时我们执行insert语句的时候,可能都是一条一条数据插入进去的,就像下面这样。INSERT INTO `department` VALUES(1, &#39;研发部(RD)&#39;, &#39...【详细内容】
2024-03-07  程序员恰恰  微信公众号  Tags:SQL优化   点击:(19)  评论:(0)  加入收藏
站内最新
站内热门
站内头条