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

Question

我按照 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()方法。因此，您实际上要注册几个 'the same' 听众而不删除前一个听众，您实际上会得到双倍的听众。 onDetach() 方法只有在您转到另一个菜单项时才能访问，例如。

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

Vaadin 推荐的移除这些侦听器的方法是什么before/during刷新？

Answer 1

最终应该调用 onDetach 方法。

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

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

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

关闭或刷新选项卡时没有向服务器发送事件的原因是，这可能会阻止选项卡在处理请求时 refreshing/closing，这是糟糕的用户体验。另外，这不包括计算机关闭或网络断开的情况。

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

Answer 2

解决该问题的最简单方法是在添加前检查 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。

Answer 3

我建议使用 Unload Beacon 附加组件：https://vaadin.com/directory/component/unload-beacon-for-vaadin-flow or a similar approach which is demonstrated in the Cookbook: https://cookbook.vaadin.com/notice-closed - 本质上，它正在执行 JavaScript 片段来为 Window 的 [=11] 添加一个事件侦听器=] 事件：

ui.getElement().executeJs(
"window.addEventListener('unload', function() {navigator.sendBeacon && navigator.sendBeacon([=10=])})", relativeBeaconPath);

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

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

Vaadin 14: remove broadcast registration on page refresh

vaadin

vaadin-flow

vaadin14