如何在html页面上实时显示循环结果JavaSpring

Question

我想在 html 页面上实时显示循环结果。我使用 Java、Spring、百里香、javascript。循环在下面。我希望它显示在 html 页上，而不是系统输出打印。

@GetMapping("/progress")
    public String testProgress() {
        for (int i = 1; i <= 100; i++) {
            if(i==20){
                System.out.println("20 %");
            }else if (i==40){
                System.out.println("40 %");
            }else if (i==60){
                System.out.println("60 %");
            }else if (i==80){
                System.out.println("80 %");
            }else if (i==100){
                System.out.println("100 %");
            }
        }
        return null;
    }

Answer 1

您可以使用服务器发送的事件和 htmx。

首先，创建一个@GetMapping方法来公开SSE通道：

  private SseEmitter sseEmitter;

 @GetMapping("/progress-events")
    public SseEmitter progressEvents() {
        sseEmitter = new SseEmitter(Long.MAX_VALUE);
       
        sseEmitter.onCompletion(() -> LOGGER.info("SseEmitter is completed"));
        sseEmitter.onTimeout(() -> LOGGER.info("SseEmitter is timed out"));
        sseEmitter.onError((ex) -> LOGGER.info("SseEmitter got error:", ex));

        return sseEmitter;
    }

接下来，使用您的方法来启动您要监视的进程。这可以是任何方法。在这个例子中，我使用了 POST:

@PostMapping
    public String generatePdf() {
        for(int progress = 0; progress <=100;progress++) {
          int progress = 0
          String html = """
                    <div id="progress-container" class="progress-container"> \
                        <div class="progress-bar" style="width:%s%%"></div> \
                    </div>
                    """.formatted(value);

          sseEmitter.send(html);
        }

        return "index";
    }

在您的 Thymeleaf 模板中：

<body>
<h1>Demo</h1>
<div hx-sse="connect:/progress-events">
    <button hx-post="/" hx-swap="none">Show progress</button>
    <div style="margin-bottom: 2rem;"></div>
    <div id="progress-wrapper" hx-sse="swap:message">
    </div>
</div>
<script type="text/javascript" th:src="@{/webjars/htmx.org/dist/htmx.min.js}"></script>
</body>

hx-sse（在外部 div）：告诉 htmx 连接哪个 SSE 通道
hx-post：告诉 htmx 在单击按钮时执行 POST
hx-swap：告诉 htmx POST 的响应应该 而不是 用于替换按钮的内部 HTML
hx-sse（在内部 div）：告诉 htmx 将 progress-wrapper 的内部 HTML 与通过发送的 HTML 交换服务器发送事件

一个棘手的事情是 HTML 不能包含换行符，这就是为什么该文本块在每一行的末尾都有反斜杠。

您可以在 https://github.com/wimdeblauwe/blog-example-code/tree/feature/htmx-sse/htmx-sse 查看完整示例。它稍微复杂一点，因为它使用 Spring 安全性并跟踪每个用户的 SseEmitter，以便将进度发送到用户登录的所有打开的浏览器选项卡。

如何在html页面上实时显示循环结果JavaSpring

How to show loop results on html page in real time Java Spring

javascript

java

spring

thymeleaf