如何修改Vaadin 24中连接断开的提示消息？

全局生效的修改方式 #

方式1：配置属性直接覆盖（推荐） #

在Spring Boot的配置文件中添加以下配置，直接替换默认提示文本：

• 若使用application.properties：

# 断连提示文本
vaadin.heartbeat.connection-lost-message=你的自定义断连提示内容
# 重连中提示文本
vaadin.heartbeat.reconnecting-message=你的自定义重连提示内容

• 若使用application.yml：

vaadin:
  heartbeat:
    connection-lost-message: 你的自定义断连提示内容
    reconnecting-message: 你的自定义重连提示内容

方式2：自定义重连提示组件 #

如果需要更灵活的UI控制（比如添加自定义按钮、样式），可以通过代码替换默认的重连提示：

1. 创建自定义重连处理器类：

import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.shared.ui.ConnectionState;

public class CustomReconnectHandler {
    public static void setup() {
        UI.getCurrent().getConnectionStateHandler().addStateChangeListener(event -> {
            if (event.getState() == ConnectionState.CONNECTION_LOST) {
                // 显示自定义断连提示
                Notification.show("自定义提示：已与服务器断开连接，正在尝试重连...", 0, Notification.Position.TOP_CENTER);
            } else if (event.getState() == ConnectionState.CONNECTED) {
                // 重连成功后提示（可选）
                Notification.show("已重新连接到服务器", 3000, Notification.Position.TOP_CENTER);
            }
        });
    }
}

2. 在AppShellConfigurator中禁用默认提示并初始化自定义处理器：

import com.vaadin.flow.component.page.AppShellConfigurator;
import org.springframework.stereotype.Component;

@Component
public class AppShell implements AppShellConfigurator {
    @Override
    public void configurePage(com.vaadin.flow.component.page.Page page) {
        // 禁用Vaadin默认的重连提示弹窗
        page.addInlineWithContents("""
            <script>
                window.Vaadin.Flow.reconnectDialog.setEnabled(false);
            </script>
            """, com.vaadin.flow.component.page.Page.Position.PREPEND);
        
        // 初始化自定义重连提示逻辑
        CustomReconnectHandler.setup();
    }
}

单页面生效的修改方式 #

如果仅需要在特定视图中修改提示，直接在该视图的onAttach方法中添加监听逻辑：

import com.vaadin.flow.component.AttachEvent;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.shared.ui.ConnectionState;

@Route("specific-view")
public class SpecificView extends VerticalLayout {
    @Override
    protected void onAttach(AttachEvent attachEvent) {
        super.onAttach(attachEvent);
        
        getUI().ifPresent(ui -> {
            // 禁用当前视图的默认重连提示
            ui.getPage().executeJs("window.Vaadin.Flow.reconnectDialog.setEnabled(false);");
            
            // 添加连接状态监听
            ui.getConnectionStateHandler().addStateChangeListener(event -> {
                if (event.getState() == ConnectionState.CONNECTION_LOST) {
                    Notification.show("当前页面提示：已断开连接，正在重连...", 0, Notification.Position.TOP_CENTER);
                } else if (event.getState() == ConnectionState.CONNECTED) {
                    Notification.show("当前页面已恢复连接", 3000, Notification.Position.TOP_CENTER);
                }
            });
        });
    }
}

注意事项 #

• 使用配置属性的方式最为简洁，适合全局统一修改文本；
• 自定义组件方式支持更复杂的UI定制，但需要手动处理提示的显示与隐藏；
• 无论哪种方式，禁用默认提示时都需通过JS调用window.Vaadin.Flow.reconnectDialog.setEnabled(false)，避免默认提示和自定义提示冲突。

内容的提问来源于stack exchange，提问作者MarekChr