Vaadin 14：在页面刷新时删除广播注册

如何解决Vaadin 14：在页面刷新时删除广播注册

我遵循 Vaadin 教程 (Creating Collaborative Views) 来广播事件并注册。

Registration eventRegistration;

@Override
protected void onAttach(AttachEvent attachEvent) {
    log.debug("In attach...");
    UI ui = attachEvent.getUI();
    eventRegistration= Broadcaster.register(
        "eventName",message -> ui.access(() -> {
           log.debug("Request to refresh grid...");
           presenter.refreshGrid();
           ui.push();
        }));
}

@Override
protected void onDetach(DetachEvent detachEvent) {
    log.debug("In detach...");
    if(eventRegistration != null) {
        eventRegistration.remove();
        eventRegistration = null;
    }
}

除了刷新页面时，onDetach() 中的逻辑没有执行之外，一切正常。但是，刷新后，您将进入 onAttach() 方法。因此，您实际上将注册几个“相同”的侦听器，而无需删除前一个侦听器，并且实际上获得了两倍的侦听器。例如，onDetach() 方法仅在您转到另一个菜单项时才能访问。

您可以在下面找到示例日志。

Vaadin 推荐的在刷新之前/期间删除这些侦听器的方法是什么？

解决方法

最终应该调用 onDetach 方法。

关闭或刷新选项卡时不会向服务器发送任何事件，因此服务器不知道应该分离旧 UI。

这就是 heartbeat requests 的用武之地。默认情况下，UI 每 5 分钟发送一次心跳请求，如果服务器注意到旧 UI 错过了三个心跳，它将被分离。或者，它会在会话到期时被分离。

换句话说，应该在大约 20 分钟后调用 onDetach 方法。

在关闭选项卡关闭或刷新时不会发送到服务器的原因是，这可能会阻止选项卡在处理请求时刷新/关闭，这是用户体验的不良用户体验。此外，这不包括计算机关闭或网络断开的情况。

有一种叫做 Beacon API 的东西，可用于在选项卡刷新或关闭时通知服务器，而不会导致浏览器延迟。 an issue 可用于立即分离 UI。

,

我建议使用 Unload Beacon 插件：https://vaadin.com/directory/component/unload-beacon-for-vaadin-flow 或 Cookbook 中演示的类似方法：https://cookbook.vaadin.com/notice-closed - 本质上，它正在执行 JavaScript 代码段以添加事件侦听器窗口的 unload 事件：

ui.getElement().executeJs(
"window.addEventListener('unload',function() {navigator.sendBeacon && navigator.sendBeacon($0)})",relativeBeaconPath);

并且 beacon 被发送到自定义 SynchronizedRequestHandler。

,

解决该问题的最简单方法是在添加之前检查 eventRegistration 是否为空。

@Override
protected void onAttach(AttachEvent attachEvent) {
    log.debug("In attach...");
    UI ui = attachEvent.getUI();
    if (eventRegistration == null) {
       eventRegistration= Broadcaster.register(
          "eventName",message -> ui.access(() -> {
             log.debug("Request to refresh grid...");
             presenter.refreshGrid();
             ui.push();
          }));
    }
}

检查 Erik 的另一个答案，为什么调用 onDetach 会延迟。