时间戳

首页 > 解决方案 > 如何使用事件更新 Thymeleaf

javascript - 如何使用事件更新 Thymeleaf

问题描述

我配置了一个 Eventbus，它将使用监视器事件更新地图。因此，对于每个名称，地图将始终具有最新的监视器事件。作为用户，您会看到最近的事件，您可以访问 URL“/overview”，该 URL 显示一个基本的 HTML 页面。

import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.google.common.eventbus.EventBus;
import com.google.common.eventbus.Subscribe;

@Controller
public class OverviewController {
    private final Map<String, MonitorResponse> monitorEvents;

    @Autowired
    public OverviewController(EventBus eventBus) {
       monitorEvents = new HashMap<>();
       eventBus.register(this);
    }

    @RequestMapping("/overview")
    public String overview(Model model) {
       model.addAttribute("monitorResponseMap", monitorEvents);
       return "overview";
    }

    @Subscribe
    public void subscribe(MonitorEvent monitorEvent) {
        monitorEvents.put(monitorEvent.getName(), monitorEvent.getMonitorResponse());
    }
}

的HTML：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="/bootstrap-4.0.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/styles.css"/>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-"
             th:each="monitorevent : ${monitorResponseMap}"
             style="margin: 10px;padding:20px;border-radius: 10px;"
             th:classappend="${monitorevent.value.getMonitorStatus().name()}">
            <div class="card-title" style="font-weight: bolder" th:text="${monitorevent.key}"></div>
            <p th:text="${monitorevent.value.getMessage()}"></p>
        </div>
    </div>
</div>

<script src="/jquery-3.3.1.min.js"></script>
<script src="/bootstrap-4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

当有新事件时，当调用订阅方法时，动态更新 UI 的最简单方法是什么？现在我对页面进行自动 Javascript 刷新（使用标记 meta(http-equiv=refresh)，但这对用户来说很烦人。使用 websockets？Ajax？

标签： javascriptspringspring-bootthymeleafguava

解决方案

感谢 Venu Duggireddy 让我了解了 SSE 并关注了https://github.com/aliakh/demo-spring-sse的演示

这很容易解决了我的问题：

SSE 控制器

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

@RestController
public class SseController {

    private final SseService sseService;

    @Autowired
    public SseController(SseService sseService) {
        this.sseService = sseService;
    }

    @RequestMapping(path = "/sse/infinite", method = RequestMethod.GET)
    public SseEmitter getInfiniteMessages() {
        return sseService.getInfiniteMessages();
    }
}

当我想更新前端时，我可以简单地使用 notifyListeners 调用 SseService：

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

@Component
public class SseService {
    private final static Logger LOGGER = LoggerFactory.getLogger(SseService.class);

    private final SseEmitter emitter;

    @Autowired
    public SseService() {
        emitter = new SseEmitter();
    }

    SseEmitter getInfiniteMessages() {
        return emitter;
    }

    public void notifyListeners(MonitorEvent monitorEvent) {
        try {
            emitter.send(monitorEvent);
        } catch (IOException e) {
            LOGGER.error("Sse message " + monitorEvent + "not send", e);
        }
    }
}

在 HTML 中：

<script type="application/javascript">
    if (!!window.EventSource) {
        var eventSource = new EventSource("/sse/infinite");

        eventSource.onmessage = function (e) {
            var message = JSON.parse(e.data);
            console.log(message);
            //updating my HTML here
        };

        eventSource.onerror = function (e) {
            if (e.readyState === EventSource.CONNECTING) {
                console.log('event: CONNECTING');
            } else if (e.readyState === EventSource.OPEN) {
                console.log('event: OPEN');
            } else if (e.readyState === EventSource.CLOSING) {
                console.log('event: CLOSING');
            } else if (e.readyState === EventSource.CLOSED) {
                console.log('event: CLOSED');
            }
        };
    } else {
        alert('The browser does not support Server-Sent Events');
    }
</script>

推荐阅读