Vaadin 23 iPhone端WebSocket延迟更新问题排查求助

问题描述 #

在iPhone上点击带有异步逻辑（@Push）的按钮时，偶发无响应情况；点击页面其他按钮后，前一个按钮的响应才触发，但当前点击的按钮又无响应，循环往复。刷新页面后恢复正常。

• 电脑端运行正常，仅iPhone端出现该问题
• NGINX/Tomcat访问日志能捕获请求，无异常报错

日志问题分析 #

1. StaticFileServer的DEBUG日志是否需要关注？ #

2022-11-13 05:38:23.147 DEBUG 1545984 --- [http-nio-8080-exec-10] com.vaadin.flow.server.StaticFileServer  : failed to read jar file contents

java.io.IOException: Can not read scheme 'war' for resource jar:war:file:/srv/..../ui-0.0.1.jar*/BOOT-INF/lib/flow-push-23.2.6.jar!/META-INF/resources/VAADIN/static/push/vaadinPush-min.js and will determine this as not a folder
    at com.vaadin.flow.server.StaticFileServer.getFileSystem(StaticFileServer.java:173) ~[flow-server-23.2.6.jar!/:23.2.6]
    at com.vaadin.flow.server.StaticFileServer.resourceIsDirectory(StaticFileServer.java:116) ~[flow-server-23.2.6.jar!/:23.2.6]
    at com.vaadin.flow.server.StaticFileServer.serveStaticResource(StaticFileServer.java:277) ~[flow-server-23.2.6.jar!/:23.2.6]
    at com.vaadin.flow.server.VaadinServlet.serveStaticOrWebJarRequest(VaadinServlet.java:401) ~[flow-server-23.2.6.jar!/:23.2.6]
    at com.vaadin.flow.server.VaadinServlet.service(VaadinServlet.java:356) ~[flow-server-23.2.6.jar!/:23.2.6]
    at com.vaadin.flow.spring.SpringServlet.service(SpringServlet.java:106) ~[vaadin-spring-23.2.6.jar!/:na]
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:779) ~[tomcat-embed-core-9.0.68.jar!/:na]

这个DEBUG日志不需要重点关注。它只是Vaadin在判断资源类型时的非致命提示：打包路径的格式解析出现兼容问题，但日志明确说明会将该资源判定为非文件夹，后续仍能正常加载vaadinPush-min.js文件，不会直接导致Push功能异常。

2. WebSocket的EOFException异常分析 #

2022-11-13 05:42:12.308 DEBUG 1545984 --- [http-nio-8080-exec-8] org.atmosphere.container.JSR356Endpoint  : Problem in web socket session

java.io.EOFException: null
    at org.apache.tomcat.util.net.NioEndpoint$NioSocketWrapper.fillReadBuffer(NioEndpoint.java:1340) ~[tomcat-embed-core-9.0.68.jar!/:na]
    at org.apache.tomcat.util.net.NioEndpoint$NioSocketWrapper.read(NioEndpoint.java:1227) ~[tomcat-embed-core-9.0.68.jar!/:na]
    at org.apache.tomcat.websocket.server.WsFrameServer.onDataAvailable(WsFrameServer.java:75) ~[tomcat-embed-websocket-9.0.68.jar!/:na]
    at org.apache.tomcat.websocket.server.WsFrameServer.doOnDataAvailable(WsFrameServer.java:183) ~[tomcat-embed-websocket-9.0.68.jar!/:na]
    at org.apache.tomcat.websocket.server.WsFrameServer.notifyDataAvailable(WsFrameServer.java:162) ~[tomcat-embed-websocket-9.0.68.jar!/:na]
    at org.apache.tomcat.websocket.server.WsHttpUpgradeHandler.upgradeDispatch(WsHttpUpgradeHandler.java:157) ~[tomcat-embed-websocket-9.0.68.jar!/:na]
    at org.apache.coyote.http11.upgrade.UpgradeProcessorInternal.dispatch(UpgradeProcessorInternal.java:60) ~[tomcat-embed-core-9.0.68.jar!/:na]
    at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:59) ~[tomcat-embed-core-9.0.68.jar!/:na]
    at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:893) ~[tomcat-embed-core-9.0.68.jar!/:na]
    at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1789) ~[tomcat-embed-core-9.0.68.jar!/:na]
    at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) ~[tomcat-embed-core-9.0.68.jar!/:na]
    at org.apache.tomcat.util.threads.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1191) ~[tomcat-embed-core-9.0.68.jar!/:na]
    at org.apache.tomcat.util.threads.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:659) ~[tomcat-embed-core-9.0.68.jar!/:na]
    at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) ~[tomcat-embed-core-9.0.68.jar!/:na]
    at java.base/java.lang.Thread.run(Thread.java:833) ~[na:na]

这个异常与iPhone端的Push响应问题高度相关，表示WebSocket连接被意外中断（客户端提前关闭、网络波动或连接超时）。Vaadin的@Push依赖WebSocket实现实时通信，连接中断后服务器端的异步更新无法推送至客户端，必须通过下一次用户操作（点击按钮）触发的HTTP请求“捎带”之前的更新，完全匹配你描述的“点击下一个按钮才触发上一个操作响应”的现象。

排查方向与解决方案 #

1. WebSocket代理与模式配置 #

• 完善NGINX的WebSocket代理配置：iPhone Safari对WebSocket连接头要求严格，需添加升级支持：

  location / {
      proxy_pass http://your-tomcat-server;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
  }
  

• 切换Vaadin Push模式：默认AUTO模式在移动端兼容性不佳，改为WEBSOCKET_XHR模式：

  @Push(PushMode.WEBSOCKET_XHR)
  public class MainView extends VerticalLayout {
      // 业务代码
  }
  

  或全局配置（application.properties）：

  vaadin.push.mode=websocket-xhr
  

2. 移动端浏览器缓存与连接优化 #

• 禁用Safari静态资源强缓存：避免加载旧版Push客户端代码，NGINX配置示例：

  location ~* \.(js|css)$ {
      expires -1;
      add_header Cache-Control "no-cache, no-store, must-revalidate";
  }
  

• 调整Push心跳参数：防止Safari后台断开连接，application.properties配置：

  vaadin.push.heartbeat.interval=30
  vaadin.push.heartbeat.timeout=90
  

3. 服务器端参数优化 #

• 调整Tomcat WebSocket参数：修改application.properties：

  server.tomcat.websocket.max-text-message-buffer-size=65536
  server.tomcat.connection-timeout=60000
  

• 升级Vaadin版本：当前使用的23.2.6存在移动端Push兼容bug，建议升级至23.2.x最新补丁版或24.x稳定版。

4. 网络环境验证 #

• 测试iPhone在不同网络（WiFi/蜂窝）下的表现，排除企业防火墙、运营商对WebSocket长连接的拦截限制。

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