Vaadin 14:删除页面刷新时的广播注册
Vaadin 14: remove broadcast registration on page refresh
我按照 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刷新?
最终应该调用 onDetach
方法。
关闭或刷新选项卡时不会向服务器发送任何事件,因此服务器不知道应该分离旧 UI。
这就是 heartbeat requests 发挥作用的地方。UI 默认每 5 分钟发送一次心跳请求,如果服务器注意到旧的 UI 错过了三个心跳,它将被分离。或者,它将在会话到期时分离。
换句话说,onDetach
方法应该在大约 20 分钟后调用。
关闭或刷新选项卡时没有向服务器发送事件的原因是,这可能会阻止选项卡在处理请求时 refreshing/closing,这是糟糕的用户体验。另外,这不包括计算机关闭或网络断开的情况。
有一种叫做 Beacon API 的东西可以用来在刷新或关闭选项卡时通知服务器,而不会导致浏览器延迟。有 an issue 用于使用它立即分离 UIs。
解决该问题的最简单方法是在添加前检查 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。
我建议使用 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 教程 (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刷新?
最终应该调用 onDetach
方法。
关闭或刷新选项卡时不会向服务器发送任何事件,因此服务器不知道应该分离旧 UI。
这就是 heartbeat requests 发挥作用的地方。UI 默认每 5 分钟发送一次心跳请求,如果服务器注意到旧的 UI 错过了三个心跳,它将被分离。或者,它将在会话到期时分离。
换句话说,onDetach
方法应该在大约 20 分钟后调用。
关闭或刷新选项卡时没有向服务器发送事件的原因是,这可能会阻止选项卡在处理请求时 refreshing/closing,这是糟糕的用户体验。另外,这不包括计算机关闭或网络断开的情况。
有一种叫做 Beacon API 的东西可以用来在刷新或关闭选项卡时通知服务器,而不会导致浏览器延迟。有 an issue 用于使用它立即分离 UIs。
解决该问题的最简单方法是在添加前检查 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。
我建议使用 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
。