问题描述
我遵循 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 会延迟。