WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)

最新推荐文章于 2024-05-09 12:28:15 发布
最新推荐文章于 2024-05-09 12:28:15 发布
阅读量3k 收藏 5
点赞数 1
分类专栏： # springboot 文章标签： websocket springboot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mrxiao_bo/article/details/132779099
版权

Websocket和Server-Sent Events 对比推送数据给前端及各自的实现

在现代 Web 应用程序中，实时数据推送给前端变得越来越重要。无论是实时聊天、实时通知还是仪表板上的实时更新，都需要一种有效的方式来将数据推送给前端。本文将介绍两种常用的实现方法：WebSocket 和 Server-Sent Events（SSE），并提供详细的实现步骤。

二者对比

WebSocket 和 Server-Sent Events (SSE) 都是用于实现实时数据推送的技术，但它们在设计、用途和实现上有一些重要的区别。让我们详细比较这两种技术。

WebSocket：

  1. 双向通信：

    • WebSocket 允许双向通信，客户端和服务器都可以在任何时候向对方发送数据。
    • 这使得 WebSocket 非常适用于需要双向交互的应用，如在线聊天、多人协作工具等。

  2. 持久连接：

    • WebSocket 建立持久连接，客户端和服务器之间的连接保持打开状态。
    • 这减少了与建立和关闭连接相关的开销，适用于频繁的数据交换。

  3. 低延迟：

    • 由于持久连接，WebSocket 可以实现低延迟的实时数据传输，适用于需要快速响应的应用。

  4. 复杂性：

    • 实现 WebSocket 可能相对复杂，需要更多的服务器资源和额外的协议处理。

  5. 跨域通信：

    • WebSocket 通常需要配置服务器以允许跨域通信，因为它们使用自定义协议。

  6. 浏览器支持：

    • WebSocket 在现代浏览器中得到广泛支持。

Server-Sent Events (SSE)：

  1. 单向通信：

    • SSE 是一种单向通信，只允许服务器向客户端发送数据。客户端无法向服务器发送数据。

  2. HTTP 协议：

    • SSE 建立在 HTTP 协议之上，使用标准 HTTP 请求和响应。
    • 这使得 SSE 更容易部署，因为它与现有的 HTTP 基础设施兼容。

  3. 简单性：

    • SSE 的实现相对简单，服务器和客户端都不需要太多复杂的逻辑。

  4. 无需专用库：

    • SSE 不需要额外的库或协议处理，客户端可以使用浏览器的原生 EventSource API 来接收数据。

  5. 跨域通信：

    • SSE 支持跨域通信，可以通过 CORS（跨域资源共享）机制进行配置。

  6. 浏览器支持：

    • SSE 在现代浏览器中也得到广泛支持，但与 WebSocket 相比，它的历史要长一些。

选择 WebSocket 还是 SSE：

  • WebSocket 适用于需要双向通信和低延迟的场景，例如在线游戏、实时聊天应用等。

  • SSE 适用于单向服务器到客户端的实时数据推送，例如新闻更新、实时股票报价、天气预报等，特别是当你希望使用现有的 HTTP 基础设施时。

  • 在某些情况下，你甚至可以同时使用 WebSocket 和 SSE，根据不同的需求选择合适的技术。

无论选择哪种技术，都需要考虑你的应用程序的具体需求和复杂性。WebSocket 提供了更多的灵活性和功能，而 SSE 更加简单和易于部署。最终的选择取决于你的项目目标和资源。

Websocket 实现

使用原生 WebSocket API：

  1. 简单性：

    • Spring Boot 提供了对原生 WebSocket API 的支持，使得创建 WebSocket 应用相对简单。
    • 开发人员可以直接使用 Java 标准库中的 WebSocket 相关类来处理 WebSocket 通信。

  2. 依赖：

    • 原生 WebSocket 不需要额外的依赖，因为 WebSocket API 已经包含在 Java 标准库中。

  3. 性能：

    • 原生 WebSocket API 在性能方面表现良好，适用于大多数中小型应用。

  4. 生态系统：

    • 使用原生 WebSocket 可以更容易地集成到现有的 Spring Boot 生态系统中，例如 Spring Security 等。

  5. 简单应用：

    • 当你需要创建相对简单的 WebSocket 应用时，原生 WebSocket 是一个不错的选择。

使用 Netty 创建 WebSocket：

  1. 灵活性：

    • Netty 是一个高度可定制的异步事件驱动框架，它可以用于创建各种网络应用，包括 WebSocket。
    • Netty 提供了更多的灵活性和自定义选项，适用于复杂的 WebSocket 应用。

  2. 性能：

    • Netty 以其高性能和低延迟而闻名，适用于需要处理大量并发连接的应用。

  3. 协议支持：

    • Netty 支持多种协议，不仅限于 WebSocket。这意味着你可以在同一个应用程序中处理多种网络通信需求。

  4. 集成：

    • 尽管 Netty 可以集成到 Spring Boot 中，但其集成可能需要更多的配置和代码。

  5. 复杂应用：

    • 当你需要处理复杂的 WebSocket 场景，如高并发、自定义协议、复杂的消息处理等时，使用 Netty 是更好的选择。

总结和选择：

选择原生 WebSocket 还是使用 Netty 创建 WebSocket 应取决于你的项目需求和复杂性：

  • 如果你的应用相对简单，对性能要求不是很高，可以考虑使用原生 WebSocket API，它更容易上手并且不需要额外的依赖。

  • 如果你的应用需要处理高并发、复杂的协议、自定义消息处理或需要最大程度的性能和灵活性，那么使用 Netty 创建 WebSocket 可能更合适。Netty 为你提供了更多的控制权和自定义选项。

无论你选择哪种方法，Spring Boot 都提供了良好的支持，使得在应用中集成 WebSocket 变得相对容易。因此，你可以根据具体的项目需求来选择适合你的方法。

Netty 实现 Websocket

  • 添加 maven 坐标

    <!-- netty -->  
  <dependency>  
      <groupId>io.netty</groupId>  
      <artifactId>netty-common</artifactId>  
      <version>4.1.79.Final</version>  
  </dependency>

  • 创建 NettyWebsocketServer

    package com.todoitbo.baseSpringbootDasmart.netty.server;  

  import com.todoitbo.baseSpringbootDasmart.netty.handler.HeartbeatHandler;  
  import com.todoitbo.baseSpringbootDasmart.netty.handler.WebSocketHandler;  
  import io.netty.bootstrap.ServerBootstrap;  
  import io.netty.channel.*;  
  import io.netty.channel.nio.NioEventLoopGroup;  
  import io.netty.channel.socket.SocketChannel;  
  import io.netty.channel.socket.nio.NioServerSocketChannel;  
  import io.netty.handler.codec.http.HttpObjectAggregator;  
  import io.netty.handler.codec.http.HttpServerCodec;  
  import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;  
  import io.netty.handler.stream.ChunkedWriteHandler;  
  import io.netty.handler.timeout.IdleStateHandler;  
  import io.netty.handler.traffic.ChannelTrafficShapingHandler;  
  
  /**  
   * @author xiaobo  
   * @date 2023/9/5  
   */
  public class NettyWebsocketServer {  
     private final int port;  
  
     public NettyWebsocketServer(int port) {  
       this.port = port;  
     }  
  
     public void run() throws Exception {  
       EventLoopGroup bossGroup = new NioEventLoopGroup(1); // 创建用于接受客户端连接的 boss 线程池  
       EventLoopGroup workerGroup = new NioEventLoopGroup(); // 创建用于处理客户端请求的 worker 线程池  
  
       try {  
         ServerBootstrap b = new ServerBootstrap();  
         b.group(bossGroup, workerGroup)  
           .channel(NioServerSocketChannel.class)  
           .childHandler(new ChannelInitializer<SocketChannel>() {  
             @Override  
             public void initChannel(SocketChannel ch) throws Exception {  
               ChannelTrafficShapingHandler trafficShapingHandler = new ChannelTrafficShapingHandler(  
                 1, // 读取速率限制（字节/秒）  
                 1, // 写入速率限制（字节/秒）  
                 1, // 流量检查时间间隔（毫秒）  
                 1 // 最大允许的时间窗口（毫秒）  
               );  
               ChannelPipeline pipeline = ch.pipeline();  
               // 添加心跳检测处理器，3秒内没有读写事件将触发 IdleStateEvent，下面的顺序错了也会出现问题的  
               pipeline.addLast(new IdleStateHandler(30, 0, 0));  
               pipeline.addLast(new HeartbeatHandler());  
               pipeline.addLast(new HttpServerCodec()); // 处理 HTTP 请求  
               pipeline.addLast(new ChunkedWriteHandler()); // 写大数据流的处理器  
               pipeline.addLast(new HttpObjectAggregator(8192)); // 将 HTTP 消息聚合为 FullHttpRequest 或 FullHttpResponse  
               // pipeline.addLast(new WebSocketFrameAggregator(8192)); // 将 HTTP 消息聚合为 FullHttpRequest 或 FullHttpResponse  
               // pipeline.addLast(new WebSocketServerCompressionHandler()); // 消息压缩  
               pipeline.addLast(new WebSocketHandler()); // 自定义 WebSocket 处理器  
               pipeline.addLast(new WebSocketServerProtocolHandler("/ws", null, true, 65536 * 10)); // 处理 WebSocket 升级握手和数据帧处理  
             }  
           })  
           .option(ChannelOption.SO_BACKLOG, 128)          // 设置服务器接受队列大小  
           .childOption(ChannelOption.SO_KEEPALIVE, true); // 开启 TCP 连接的 Keep-Alive 功能  
  
         // Bind and start to accept incoming connections.  
         System.out.println("TCP server started successfully");  
         ChannelFuture f = b.bind(port).sync(); // 绑定端口并等待绑定完成  
  
         // Wait until the server socket is closed.  
         // In this example, this does not happen, but you can do that to gracefully            // shut down your server.            f.channel().closeFuture().sync(); // 阻塞直到服务器关闭  
  
       } finally {  
         // 优雅地关闭线程池  
         workerGroup.shutdownGracefully();  
         bossGroup.shutdownGracefully();  
       }  
     }  
 }

这里需要注意一下，pipeline.addLast的顺序不一致可能会导致程序报错，运行时

  • 创建心跳 handle

    package com.todoitbo.baseSpringbootDasmart.netty.handler;  
 
import io.netty.channel.ChannelHandlerContext;  
import io.netty.channel.ChannelInboundHandlerAdapter;  
import io.netty.handler.timeout.IdleState;  
import io.netty.handler.timeout.IdleStateEvent;  

public class HeartbeatHandler extends ChannelInboundHandlerAdapter {  

   int readTimeOut = 0;  

   @Override  
   public void userEventTriggered(ChannelHandlerContext ctx, Object evt) throws Exception {  
     IdleStateEvent event = (IdleStateEvent) evt;  

     if(event.state() == IdleState.READER_IDLE){  
       readTimeOut++;  
     }  

     if(readTimeOut >= 3){  
       System.out.println("超时超过3次，断开连接");  
       ctx.close();  
     }  
   }  
}

  • 创建WebSocketHandler

    package com.todoitbo.baseSpringbootDasmart.netty.handler;  
 
 import cn.hutool.core.collection.CollectionUtil;  
 import com.todoitbo.baseSpringbootDasmart.netty.NamedChannelGroup;  
 import io.netty.buffer.ByteBuf;  
 import io.netty.buffer.Unpooled;  
 import io.netty.channel.*;  
 import io.netty.handler.codec.http.*;  
 import io.netty.handler.codec.http.websocketx.*;  
 import io.netty.util.AttributeKey;  
 import io.netty.util.CharsetUtil;  
 import lombok.extern.slf4j.Slf4j;  
 
 import java.util.HashMap;  
 import java.util.List;  
 import java.util.Map;  
 
 /**  
  * @author xiaobo  
  */
 @Slf4j  
 public class WebSocketHandler extends SimpleChannelInboundHandler<Object> {  
 
   private WebSocketServerHandshaker handshaker;  
 
   public static final AttributeKey<String> USER_ID_KEY = AttributeKey.valueOf("userId");  
   public static final AttributeKey<String> GROUP_ID_KEY = AttributeKey.valueOf("groupId");  
 
   private static final Map<Channel, String> WORK_CHANNEL_MAP = new HashMap<Channel,String>();  
 
   @Override  
   public void channelActive(ChannelHandlerContext ctx) throws Exception {  
     log.info("与客户端建立连接，通道开启！");  
     // 添加到channelGroup通道组（广播）  
     // 之后可以根据ip来进行分组  
     NamedChannelGroup.getChannelGroup("default").add(ctx.channel());  
   }  
   @Override  
   public void channelInactive(ChannelHandlerContext ctx) throws Exception {  
     log.info("与客户端断开连接，通道关闭！");  
     // 从channelGroup通道组（广播）中删除  
     // 之后可以根据ip来进行分组  
     Channel channel = ctx.channel();  
     NamedChannelGroup.getChannelGroup("default").remove(channel);  
     WORK_CHANNEL_MAP.remove(channel);  
   }  
 
   public boolean userAuthentication(ChannelHandlerContext ctx,FullHttpRequest req) {  
     // 提取URI参数  
     QueryStringDecoder queryStringDecoder = new QueryStringDecoder(req.uri());  
     Map<String, List<String>> parameters = queryStringDecoder.parameters();  
     // 根据参数进行处理  
     List<String> userId = parameters.get("userId");  
     List<String> groupId = parameters.get("groupId");  
     if (CollectionUtil.isNotEmpty(userId) && CollectionUtil.isNotEmpty(groupId)) {  
       ctx.channel().attr(USER_ID_KEY).set(userId.get(0));  
       ctx.channel().attr(GROUP_ID_KEY).set(groupId.get(0));  
       return true;  
     }else {  
       return false;  
     }  
 
   }  
 
 
   private void handleHttpRequest(ChannelHandlerContext ctx, FullHttpRequest req) {  
     // 检查是否升级到WebSocket  
     if (!req.decoderResult().isSuccess() || (!"websocket".equals(req.headers().get("Upgrade")))) {  
       // 如果不是WebSocket协议的握手请求，返回400 Bad Request响应  
       sendHttpResponse(ctx, req, new DefaultFullHttpResponse(HttpVersion.HTTP_1_1, HttpResponseStatus.BAD_REQUEST));  
       return;  
     }  
 
     // 构建握手响应  
     WebSocketServerHandshakerFactory wsFactory = new WebSocketServerHandshakerFactory(  
       getWebSocketLocation(req), null, true);  
     handshaker = wsFactory.newHandshaker(req);  
 
     if (handshaker == null) {  
       // 如果不支持WebSocket版本，返回HTTP 426 Upgrade Required响应  
       WebSocketServerHandshakerFactory.sendUnsupportedVersionResponse(ctx.channel());  
     } else {  
       handshaker.handshake(ctx.channel(), req);  
       // 进行WebSocket握手  
       // 在认证成功后，设置用户ID到Channel属性中  
       boolean authentication = userAuthentication(ctx,req);// 这里需要实现用户认证逻辑  
       if (!authentication) {  
         // 用户认证失败，可能需要关闭连接或发送认证失败消息  
         // 1. 关闭连接：  
         ctx.close();  
         // 2. 发送认证失败消息给客户端：  
         String failureMessage = "认证失败，请提供有效的身份验证信息。";  
         ctx.writeAndFlush(failureMessage);  
         return;  
       }  
       // 其他逻辑...  
       WORK_CHANNEL_MAP.put(ctx.channel(), ctx.channel().attr(GROUP_ID_KEY).get());  
     }  
   }  
 
   private void sendHttpResponse(ChannelHandlerContext ctx, FullHttpRequest req, FullHttpResponse res) {  
     // 发送HTTP响应  
     if (res.status().code() != 200) {  
       ByteBuf buf = Unpooled.copiedBuffer(res.status().toString(), CharsetUtil.UTF_8);  
       res.content().writeBytes(buf);  
       buf.release();  
       HttpUtil.setContentLength(res, res.content().readableBytes());  
     }  
 
     ChannelFuture future = ctx.channel().writeAndFlush(res);  
     if (!HttpUtil.isKeepAlive(req) || res.status().code() != 200) {  
       future.addListener(ChannelFutureListener.CLOSE);  
     }  
   }  
 
   private String getWebSocketLocation(FullHttpRequest req) {  
     return "ws://" + req.headers().get(HttpHeaderNames.HOST) + req.uri();  
   }  
 
   private void handleWebSocketFrame(ChannelHandlerContext ctx, WebSocketFrame frame) {  
     // 处理WebSocket消息，可以根据实际需求进行处理  
     if (frame instanceof TextWebSocketFrame) {  
       // 处理文本消息  
       String text = ((TextWebSocketFrame) frame).text();  
       System.out.println("Received message: " + text);  
 
       // 可以在这里处理WebSocket消息并发送响应  
       // ...  
     } else if (frame instanceof BinaryWebSocketFrame) {  
       // 处理二进制WebSocket消息  
       // ...  
       System.out.println("123");  
     } else if (frame instanceof CloseWebSocketFrame) {  
       // 处理WebSocket关闭请求  
       handshaker.close(ctx.channel(), (CloseWebSocketFrame) frame.retain());  
     } else if (frame instanceof PingWebSocketFrame) {  
       // 处理WebSocket Ping消息  
       System.out.println("cs");  
       ctx.channel().write(new PongWebSocketFrame(frame.content().retain()));  
     }  
   }  
 
   @Override  
   protected void channelRead0(ChannelHandlerContext ctx, Object msg) throws Exception {  
     if (msg instanceof FullHttpRequest) {  
       // 处理HTTP握手请求  
       handleHttpRequest(ctx, (FullHttpRequest) msg);  
     } else if (msg instanceof WebSocketFrame) {  
       // 处理WebSocket消息  
       handleWebSocketFrame(ctx, (WebSocketFrame) msg);  
     }  
   }  
 
   @Override  
   public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) {  
     // 发生异常时的处理  
     log.error(cause.getMessage());  
     ctx.close();  
   }  
 
}

  • 创建NamedChannelGroup

    package com.todoitbo.baseSpringbootDasmart.netty;

import io.netty.channel.group.ChannelGroup;
import io.netty.channel.group.DefaultChannelGroup;
import io.netty.util.concurrent.GlobalEventExecutor;

import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

public class NamedChannelGroup{
    private String groupName;
    public static Map<String,ChannelGroup> channelGroupMap = new ConcurrentHashMap<>();

    static {
        channelGroupMap.put("default", new DefaultChannelGroup(GlobalEventExecutor.INSTANCE));
    }

    public static void setGroupName(String groupName){
        channelGroupMap.put(groupName, new DefaultChannelGroup(GlobalEventExecutor.INSTANCE));
    }

    public static ChannelGroup getChannelGroup(String groupName){
        return channelGroupMap.get(groupName);
    }
}

Server-Sent Events (SSE)实现

创建DataManager

package com.todoitbo.baseSpringbootDasmart.sse;

import org.springframework.http.MediaType;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 数据管理器用于管理Server-Sent Events (SSE) 的订阅和数据推送。
 * @author xiaobo
 */
@Component
public class DataManager {

    private final Map<String, List<SseEmitter>> dataEmitters = new HashMap<>();

    /**
     * 订阅特定数据类型的SSE连接。
     *
     * @param dataType 要订阅的数据类型
     * @param emitter  SSE连接
     */
    public void subscribe(String dataType, SseEmitter emitter) {
        dataEmitters.computeIfAbsent(dataType, k -> new ArrayList<>()).add(emitter);
        emitter.onCompletion(() -> removeEmitter(dataType, emitter));
        emitter.onTimeout(() -> removeEmitter(dataType, emitter));
    }

    /**
     * 推送特定数据类型的数据给所有已订阅的连接。
     *
     * @param dataType 要推送的数据类型
     * @param data     要推送的数据
     */
    public void pushData(String dataType, String data) {
        List<SseEmitter> emitters = dataEmitters.getOrDefault(dataType, new ArrayList<>());
        emitters.forEach(emitter -> {
            try {
                emitter.send(SseEmitter.event().data(data, MediaType.TEXT_PLAIN));
            } catch (IOException e) {
                removeEmitter(dataType, emitter);
            }
        });
    }

    private void removeEmitter(String dataType, SseEmitter emitter) {
        List<SseEmitter> emitters = dataEmitters.get(dataType);
        if (emitters != null) {
            emitters.remove(emitter);
        }
    }
}

接口实现

package com.todoitbo.baseSpringbootDasmart.controller;  
  
import com.todoitbo.baseSpringbootDasmart.sse.DataManager;  
import org.springframework.http.MediaType;  
import org.springframework.http.ResponseEntity;  
import org.springframework.web.bind.annotation.GetMapping;  
import org.springframework.web.bind.annotation.PathVariable;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.RestController;  
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;  
  
import javax.annotation.Resource;  
  
/**  
 * @author xiaobo  
 */
@RestController  
@RequestMapping("/environment")  
public class EnvironmentController {  
  
    @Resource    private DataManager dataManager;  
  
    @GetMapping(value = "/subscribe", produces = MediaType.TEXT_EVENT_STREAM_VALUE)  
    public SseEmitter subscribe() {  
        SseEmitter emitter = new SseEmitter();  
        dataManager.subscribe("environment", emitter);  
        return emitter;  
    }  
  
    // 示例：推送环境监测数据给前端  
    @GetMapping("/push/{testText}")  
    public ResponseEntity<String> pushEnvironmentData(@PathVariable String testText) {  
        dataManager.pushData("environment", testText);  
        return ResponseEntity.ok("Data pushed successfully.");  
    }  
}

实现说明

每个不同类型的数据推送都需要一个对应的SSE订阅端点（subscribe）。每个数据类型都有一个对应的订阅端点，用于前端建立SSE连接，并在后端接收和处理特定类型的数据推送。

在你的后端应用中，对于每种数据类型，你需要创建一个对应的Controller或处理器来处理该数据类型的SSE订阅。每个Controller会有自己的SSE订阅端点，前端可以连接到不同的端点以接收相应类型的数据。

这种方式允许你将不同类型的数据推送逻辑分离，使代码更具可维护性和可扩展性。当有新的数据可用时，只需调用相应类型的数据推送方法，而不必修改通用的SSE管理逻辑。

前端实现

<!DOCTYPE html>
<html>
<head>
    <title>SSE Data Receiver</title>
</head>
<body>
    <h1>Real-time Data Display</h1>
    <div id="data-container"></div>

    <script>
        const dataContainer = document.getElementById('data-container');

        // 创建一个 EventSource 对象，指定 SSE 服务器端点的 URL
        const eventSource = new EventSource('http://127.0.0.1:13024/environment/subscribe'); // 根据你的控制器端点来设置URL

        // 添加事件处理程序，监听服务器端发送的事件
        eventSource.onmessage = (event) => {
            const data = event.data;
            // 在这里处理从服务器接收到的数据
            // 可以将数据显示在页面上或进行其他操作
            const newDataElement = document.createElement('p');
            newDataElement.textContent = data;
            dataContainer.appendChild(newDataElement);
        };

        eventSource.onerror = (error) => {
            // 处理连接错误
            console.error('Error occurred:', error);
        };
    </script>
</body>
</html>

弊端以及解决方案

如果你没什么处理的话，在它首次调用subscribe时候可能会出现连接超时的问题，因为这个是一个长连接，出现这种问题是因为，此时并没有数据产生，至此，除非你刷新页面，否则即使有数据产生前端也不会受到了

你希望前端在第一次订阅SSE连接后，即使后端没有数据产生，之后也能接收到数据。这可以通过以下方式来实现：

  1. 保持持久连接： 确保前端建立的SSE连接是持久性连接，不会在第一次连接成功后关闭。这可以让连接一直保持打开状态，即使后端没有即时数据产生。你可以在前端代码中使用以下方式来确保连接持久：

    const eventSource = new EventSource('/environment/subscribe');

    默认情况下，EventSource对象会自动重连，以保持连接的持久性。

  2. 定期发送心跳数据： 在后端定期发送一些心跳数据，以确保连接保持活跃。这可以防止连接超时关闭。你可以在后端定期发送一个包含无用信息的SSE事件，例如：

    @Scheduled(fixedRate = 30000) // 每30秒发送一次心跳数据
public void sendHeartbeat() {
    dataManager.pushData("heartbeat", "Heartbeat data");
}

    前端可以忽略这些心跳事件，但它们会保持连接处于活跃状态。

  3. 前端自动重连： 在前端代码中添加自动重连逻辑，以处理连接断开的情况。这样，如果连接由于某种原因断开，前端会自动尝试重新建立连接。示例：

    const eventSource = new EventSource('/environment/subscribe');

eventSource.onerror = (error) => {
    // 处理连接错误
    console.error('Error occurred:', error);
    // 重新建立连接
    eventSource.close();
    setTimeout(() => {
        // 重新建立连接
        eventSource = new EventSource('/environment/subscribe');
    }, 1000); // 1秒后重试
};

通过结合上述方法，你可以确保前端能够建立并保持持久SSE连接，即使后端没有即时数据产生。这样，一旦后端有数据产生，前端也可以接收到数据而无需重新订阅。

一只牛博
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
springboot集成websocket实时推送消息给前端
Dncfjy_的博客
02-28 606
springboot集成websocket推送消息给前端
前端如何使用websocket发送消息
div_336699的博客
07-07 513
WebSocket 是一种在单个 TCP连接上进行通信的协议，它可以让。与传统的 HTTP 请求不同，WebSocket 使用了一个长连接，在客户端和服务器之间保持持久的连接，从而可以实时地发送和接收数据。在 WebSocket 中，客户端和服务器之间可以互相发送消息。客户端可以使用 JavaScript 中的 WebSocket API 发送消息到服务器，也可以接收服务器发送的消息。在使用 WebSocket 发送消息之前，必须先建立 WebSocket 连接。
实时通信三剑客：WebSocket vs SSE vs WebRTC，谁是你的场景英雄？
java专栏
05-04 331
WebSocket适用于需要双向实时数据交换的场景，SSE则更适合单向的服务器推送，而WebRTC专精于点对点的音视频通信。选择合适的技术取决于具体的应用需求和通信模型。
前端（二十一）——WebSocket：实现实时双向数据传输的Web通信协议_websocket 前端通信
最新发布
2401_84619145的博客
05-09 369
现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。console.log(“接收到服务器发送的消息：” + message);console.log(“接收到客户端发送的消息：” + message);console.log(“接收到客户端发送的消息：” + message);console.log(“接收到客户端发送的消息：” + message);
服务端向客户端推送数据的实现方案：轮询、websocket和SSE
Demon's blog
04-17 74
在很久很久以前，前端一般使用轮询来进行服务端向客户端进行消息的_伪推送_，为什么说轮询是伪推送？因为_轮询本质上还是通过客户端向服务端发起一个单项传输的请求_，服务端对这个请求做出响应而已。通过不断的请求来实现服务端向客户端推送数据的错觉。并不是服务端主动向客户端推送数据。显然，轮询一定是上述三个方法里最下策的决定。websocket是一个双向通讯的协议，他的优点是，可以同时支持客户端和服务端彼此相互进行通讯。功能上很强大。缺点也很明显，websocket是一个新的协议，ws/wss。
集成框架 -- websocket发消息给前端
寿春
10-21 1865
基于连接可以做健全，前提必须有同一个域名，ws协议下可以长连接，其他的连接配置参数可以在后端校验。完成连接后，后端可以发送消息到前端，用于消息传输，但是websocket是不稳定的，netty有稳定版本的。前言： 使用websocket的原因，是因为项目中会出现无法服务器调用前端的情况，基于此TCP长连接协议，所以用了ws协议封装了一层，流反向调用。使用websocket 前端需要连接对应的服务域名，域名替换为ws，打到集群主机。注册使用bean 用来扫描端点。
动态数据获取方案：SSE、WebSocket
ck2580的博客
10-20 2971
动态数据获取方案：SSE、WebSoket 前述 在项目需求中，我们常常能够遇到需要实时获取状态的需求，例如获取某某任务是否完成状态，或者当其他用户做出操作时，界面需要实时提醒，这些需求通常需要我们实时地从后台取得当前状态，但由于 HTTP 请求是单向的（只能由客户端发起），所以通常使用轮询的方式去获取最新状态，这样的获取方式需要一直发送请求，无端增大浏览器与服务器性能消耗，明显不是很好的解决方案，本文将会介绍通过介绍及简单实现 SSE及 WebSoket 两种方案介绍非轮询式动态数据获取方案。 技术介绍
前端实现消息推送、即时通信、SSE、WebSocket、http简介
violetta521的博客
06-15 4396
场景。
服务器推送消息到前端实现页面数据实时刷新-分布式Websocket技术方案
热门推荐
莫忘莫忧的博客
03-08 1万+
服务器推送消息到前端实现页面数据实时刷新-分布式Websocket技术方案 背景 项目上有个新的需求，需要在系统数据发生改变时，前端页面要实时刷新页面数据。 简单的方案一：   最简单的方式就是直接在前端页面使用定时器定时刷新数据。   这个方案除非是定时的时间设置很短，否则还是会存在页面刷新不及时的情况。但是如果定时时间设置得过短，一旦客户端使用量变多，整个系统的请求数量会变的非常多，需要消耗许多服务器资源。故放弃这个方案。 方案二：   服务端推送的方式，通过使用Websocket，进入页面时，前端就与
php-sse:一个简单高效的库通过PHP实现HTML5的服务器发送的事件，用于将事件从服务器实时推送到客户端，比Websocket更容易，而不是AJAX请求
05-07
一个简单高效的库通过PHP实现了HTML5的服务器发送的事件，用于将事件从服务器实时推送到客户端，并且比Websocket更容易，而不是AJAX请求。 要求 PHP 5.4或更高版本 通过Composer（ ）安装 composer require " hhxsv5...
asp.net mvc实现简单的实时消息推送
10-21
在本文中，我们将讨论如何使用ASP.NET MVC实现简单的实时消息推送，特别是在标题和描述中提到的SignalR技术。 实时消息推送允许服务器主动向客户端发送数据，而不仅仅是响应客户端的请求。在ASP.NET MVC中，实现这...
python_sse：使用FastAPI实现服务器发送的事件
02-16
SSE是一种允许服务器向客户端推送实时更新的技术，常用于实时数据流应用，如股票报价、在线聊天或实时仪表板。FastAPI是一个现代、高性能的Web API框架，基于Python 3.6+，设计简洁且易于使用，与TypeScript紧密集成...
基于Springboot的一个后端服务，用于实时接收chatGPT的消息，并通过websocket的方式实时反馈给前端
11-12
本项目是一个基于Springboot的一个后端服务，用于实时接收chatGPT的消息，并通过websocket的方式实时反馈给前端。本项目还可以助你将GPT机器人集成到钉钉群聊中，通过@机器人进行聊天交互。
WEB消息推送框架源码(实现前台接收后台推送信息)
12-28
Web推送技术有多种实现方式，如Server-Sent Events (SSE) 和Long Polling，但WebSocket是最常用的一种，因为它提供了全双工通信，延迟低，且数据传输效率高。本框架可能基于WebSocket实现，让Web应用能实时获取到...
WebSocket：实现实时互动、数据推送的利器，你了解多少
资料免费分享，点击名片
10-18 1722
在服务端接收客户端的WebSocket请求后，需要对该请求进行解析，获取它的Sec-WebSocket-Key、Sec-WebSocket-Version、Sec-WebSocket-Extensions，还有客户端的源地址、请求的资源名称等。Sec-WebSocket-Accept和Sec-WebSocket-Key：只有当Sec-WebSocket-Key的值经过固定算法加密后的数据和响应头里的Sec-WebSocket-Accept的值保持一致，该连接才会被认可建立，避免跨协议攻击。
即时通讯开发中WebSocket和SSE技术如何实现Web端消息推送
蔚可云的博客
08-18 1091
无需发送 GET 消息并等待服务器响应，客户端只需监听该套接字，接收服务器更新，并使用收到的数据来发起或支持各种交互。与 WebSocket 相比，SSE 的一个优势是它是基于 HTTP 而运行的，不需要其他组件。SSE 是一个更简单且更快的解决方案，但它是不可扩展的。对于只需要能向客户端传输异步服务器消息的 Web 应用程序，服务器发送的事件是一个优雅且简单的解决方案。HTTP 服务器推送也称为 HTTP 流，是一种客户端-服务器通信模式，它将信息从 HTTP 服务器异步发送到客户端，而无需客户端请求。.
通过webSocket实现app运动数据在网页实时显示
ideaout技术团队
09-25 1万+
一概述## 在项目中有这样一个需要，app为智能心电跑步类app，在跑步时需要在网页端显示用户的跑步信息，包括跑步时长、心率、心电图等，其中心电图是需要实时更新的。当用户开始跑步时在网页上显示这些信息，跑步结束时结束实时数据显示，将最终跑步结果显示在网页时，效果图如下： 在网页上的显示效果如下：先做个大致的分析，数据要做到实时显示，需要将app产生的数据通过网络发送到服务器，然后网
一文读懂Websocket
感谢您阅读我的博客，如果您有任何问题或建议，请随时联系我。
04-03 1851
一文读懂websocket
SSE与WebSocket分别实现服务器发送消息通知（Golang、Gin）
qq_51110841的博客
08-27 2087
服务端推送，也称为消息推送或通知推送，是一种允许应用服务器主动将信息发送到客户端的能力，为客户端提供了实时的信息更新和通知，增强了用户体验。实时通知：在很多情况下，用户期望实时接收到应用的通知，如新消息提醒、商品活动提醒等。节省资源：如果没有服务端推送，客户端需要通过轮询的方式来获取新信息，会造成客户端、服务端的资源损耗。通过服务端推送，客户端只需要在收到通知时做出响应，大大减少了资源的消耗。增强用户体验：通过服务端推送，应用可以针对特定用户或用户群发送有针对性的内容，如优惠活动、个性化推荐等。
前端sse接收后端数据
05-25
在前端中，你可以使用 `EventSource` 对象来接收服务器端的数据，该对象提供了一种轻量级的、基于 HTTP 的服务器推送机制。下面是一个简单的示例代码： ```javascript const source = new EventSource('/stream'); // 创建 EventSource 对象 source.addEventListener('message', (event) => { console.log(event.data); // 处理接收到的数据 }, false); source.addEventListener('error', (event) => { if (event.readyState === EventSource.CLOSED) { console.log('连接已关闭'); } else { console.log('连接发生错误'); } }, false); ``` 在服务器端，你需要发送 SSE 格式的数据，例如： ```python from flask import Flask, Response app = Flask(__name__) @app.route('/stream') def stream(): def event_stream(): while True: yield 'data: {}\n\n'.format('Hello, world!') # 发送 SSE 格式的数据 return Response(event_stream(), mimetype='text/event-stream') ``` 在这个示例中，我们使用 Flask 框架来创建一个 `/stream` 路由，当有客户端连接时，它会发送 SSE 格式的数据。 需要注意的是，SSE 是一种基于 HTTP 的单向通信协议，只能由服务器向客户端发送数据，客户端无法向服务器发送数据。如果你需要双向通信，可以考虑使用 WebSocket。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只牛博

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值