SSE(Server-sent Events)实现Web消息推送（SpringBoot）

news2024/9/23 11:16:26

本文参考自：

Web消息推送之SSE_魅Lemon的博客-CSDN博客_sse推送

【IT老齐237】超好用Web服务端主动推送技术SSE_哔哩哔哩_bilibili

1、Web消息推送简介

短轮询
长轮询
iframe流
SSE
MQTT
websocket

2、SSE原理介绍

2.1、概念

SSE(Server Sent Event)，直译为服务器发送事件，顾名思义，也就是客户端可以获取到服务器发送的事件。我们常见的 http 交互方式是客户端发起请求，服务端响应，然后一次请求完毕；但是在 sse 的场景下，客户端发起请求，连接一直保持，服务端有数据就可以返回数据给客户端，这个返回可以是多次间隔的方式

2.2、SSE特点

长连接
服务端可以向客户端推送信息

从 sse 的特点出发，我们可以大致的判断出它的应用场景，需要轮询获取服务端最新数据的 case 下，多半是可以用它的。比如显示当前网站在线的实时人数，法币汇率显示当前实时汇率，电商大促的实时成交额等等

3、SpringBoot下实现SSE

3.1、环境搭建

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.7</version>
    </parent>

    <modelVersion>4.0.0</modelVersion>

    <groupId>com.tuwer</groupId>
    <artifactId>server-sent-events</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>
</project>

启动类

package com.tuwer;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @author 土味儿
 * Date 2023/1/28
 * @version 1.0
 */
@SpringBootApplication
public class SseApp {
    public static void main(String[] args) {
        SpringApplication.run(SseApp.class, args);
    }
}

在这里插入图片描述

3.2、页面端html

在resources资源路径下新建static目录，再创建index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SSE Demo</title>
</head>
<body>
<div id="sse"></div>
<script>
    //var sse = new EventSource("http://localhost:8080/sse");
    //var sse = new EventSource("http://localhost:8080/sse-retry");
    var sse = new EventSource("http://localhost:8080/sse-retry-new");

    sse.onmessage = function (evt){
        var el = document.getElementById("sse");
        //el.innerHTML = evt.data;
        el.innerText = evt.data;
    };
</script>
</body>
</html>

3.3、服务端Controller

package com.tuwer.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.time.LocalTime;
import java.util.concurrent.TimeUnit;

/**
 * @author 土味儿
 * Date 2023/1/28
 * @version 1.0
 */
@RestController
public class SseController {
    /**
     * 服务端循环发送
     * @param httpServletResponse
     * @return
     */
    @GetMapping("/sse")
    public String getStreamData(HttpServletResponse httpServletResponse) {
        httpServletResponse.setContentType("text/event-stream");
        httpServletResponse.setCharacterEncoding("utf-8");

        String s = "";
        while (true) {
            s = "data: " + LocalTime.now() + "\n\n";
            try {
                PrintWriter pw = httpServletResponse.getWriter();
                TimeUnit.SECONDS.sleep(1);
                pw.write(s);
                pw.flush();
            } catch (IOException | InterruptedException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 客户端固定时间重试
     * @param httpServletResponse
     */
    @GetMapping("/sse-retry")
    public void getDataRetry(HttpServletResponse httpServletResponse){
        httpServletResponse.setContentType("text/event-stream");
        httpServletResponse.setCharacterEncoding("utf-8");

        String s = "retry: 2000\n";
        s += "data: "+LocalTime.now() +"\n\n";
        PrintWriter pw = null;
        try {
            pw = httpServletResponse.getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }
        pw.write(s);
        pw.flush();
    }

    /**
     * 客户端固定时间重试（简洁版）
     * @return
     */
    @GetMapping("/sse-retry-new")
    public String getDataRetry(){
        /*
        * 数据格式：
        * --------------------------
        * retry: 重试时间（毫秒值）
        * 单换行\n
        * data: 具体数据
        * 双换行\n\n
        * --------------------------
        * retry和data后面是【半角冒号 + 空格】
        * --------------------------
        */
        String result = new StringBuilder()
                // retry: 重试毫秒值 单换行
                .append("retry: 2000\n")
                // data: 具体数据
                .append("data: 当前时间：")
                .append(LocalTime.now())
                // 双换行
                .append("\n\n")
                .toString();

        return result;
    }
}