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

本文参考自:

  • 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

<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.bootgroupId>
        <artifactId>spring-boot-starter-parentartifactId>
        <version>2.6.7version>
    parent>

    <modelVersion>4.0.0modelVersion>

    <groupId>com.tuwergroupId>
    <artifactId>server-sent-eventsartifactId>
    <version>1.0-SNAPSHOTversion>

    <properties>
        <maven.compiler.source>8maven.compiler.source>
        <maven.compiler.target>8maven.compiler.target>
    properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        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);
    }
}

SSE(Server-sent Events)实现Web消息推送(SpringBoot)_第1张图片

3.2、页面端html

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

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SSE Demotitle>
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;
    }
}

SSE(Server-sent Events)实现Web消息推送(SpringBoot)_第2张图片
SSE(Server-sent Events)实现Web消息推送(SpringBoot)_第3张图片

3.4、演示

客户端固定时间重试(简洁版)

你可能感兴趣的:(前端,前端,spring,boot,java)