Vaadin 14 @Push配置问题：WebSocket异常关闭排查求助

一、WebSocket 异常关闭问题排查 #

1. 全链路超时与配置补全 #

• HAProxy：确认timeout tunnel设置不低于300秒（5分钟），避免隧道连接被提前断开；同时确保timeout client、timeout server的数值不小于隧道超时，防止覆盖生效。
• Nginx：在已有Upgrade头配置基础上，补充以下参数：

  proxy_http_version 1.1;
  proxy_set_header Host $host;
  proxy_set_header X-Forwarded-Proto $scheme;
  # 超时配置
  proxy_connect_timeout 60s;
  proxy_send_timeout 300s;
  proxy_read_timeout 300s;
  # WebSocket 协议头补全
  proxy_set_header Sec-WebSocket-Key $http_sec_websocket_key;
  proxy_set_header Sec-WebSocket-Version $http_sec_websocket_version;
  

• Cloudflare：控制台「网络」模块开启WebSocket支持，将「WebSockets超时」调至300秒以上；检查WAF规则，排除可能中断长连接的临时封禁策略。

2. WildFly 端配置验证 #

• 确认Undertow子系统开启WebSocket支持，在standalone.xml中检查：

  <subsystem xmlns="urn:jboss:domain:undertow:12.0">
    <server name="default-server">
      <http-listener name="default" socket-binding="http" redirect-socket="https" enable-websockets="true"/>
    </server>
  </subsystem>
  

• 显式指定Push的WebSocket传输模式：

  @Push(value = PushMode.AUTOMATIC, transport = Transport.WEBSOCKET)
  public class MainView extends VerticalLayout {
      // 业务逻辑
  }
  

3. 日志与抓包排查 #

• 开启WildFly WebSocket调试日志，在standalone.xml添加：

  <logger category="io.undertow.websockets">
    <level name="DEBUG"/>
  </logger>
  

• 查看HAProxy、Nginx的访问/错误日志，定位WebSocket连接断开的发起节点；浏览器开发者工具过滤WebSocket请求，检查握手响应头是否合规、断开时的TCP状态码。

二、长轮询模式通信混乱问题处理 #

针对偶发的通信异常与无限刷新：

• 确保所有UI更新操作通过UI.access()或UI.accessSynchronously()执行，禁止非UI线程直接修改组件状态。
• 检查WildFly线程池配置（如default-worker），确保并发数足够支撑长轮询连接。
• 禁用浏览器端Vaadin缓存：

  @Override
  protected void init(VaadinRequest request) {
      getPage().getWebBrowser().setCacheTime(0);
  }
  

三、前端组件样式警告处理 #

针对vaadin-text-area的样式模块注册警告：

• 前端导入组件前先加载对应样式模块：

  import '@vaadin/vaadin-text-area/theme/lumo/vaadin-text-area-styles.js';
  import '@vaadin/vaadin-text-area/src/vaadin-text-area.js';
  

• 若使用Java API，通过@CssImport确保样式优先加载：

  @CssImport(value = "./styles/vaadin-text-area-styles.css", themeFor = "vaadin-text-area")
  public class MainView extends VerticalLayout {
      // 业务逻辑
  }
  

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