Me gustaría mostrar los resultados del bucle en la página html en tiempo real. Yo uso Java, Spring, thymeleaf, javascript. El bucle está debajo. En lugar de la impresión del sistema, me gustaría que se muestre en la página 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; }Puede hacerlo utilizando Server Sent Events y htmx .
Primero, cree un método @GetMapping para exponer el canal 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; }A continuación, tenga su método que inicie el proceso que desea monitorear. Esto puede ser cualquier método. En este ejemplo, utilicé un 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"; }En su plantilla de 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 (en el div externo): le dice a htmx en qué canal SSE conectarsehx-post : le dice a htmx que haga un POST cuando se hace clic en el botónhx-swap : le dice a htmx que la respuesta del POST no debe usarse para reemplazar el HTML interno del botónhx-sse (en el div interno): le dice a htmx que intercambie el HTML interno de progress-wrapper con el HTML que se envía a través de los eventos enviados por el servidorUna cosa complicada es que el HTML no puede contener líneas nuevas, por eso ese bloque de texto tiene barras invertidas al final de cada línea.
Puede ver un ejemplo completo en https://github.com/wimdeblauwe/blog-example-code/tree/feature/htmx-sse/htmx-sse . Es un poco más complicado en el sentido de que usa Spring Security y realiza un seguimiento de SseEmitters por usuario para que el progreso se envíe a todas las pestañas abiertas del navegador donde el usuario inició sesión.