Vaadin 23中WebSocket传输模式的连接检测技术问询

1. 纠正认知偏差：Transport.WEBSOCKET_XHR 的实际工作机制 #

Transport.WEBSOCKET_XHR 并不是浏览器用XHR发起请求、服务器用WebSocket响应的混合模式，它是Vaadin的fallback 传输策略：

• 优先尝试建立WebSocket全双工连接；
• 当WebSocket连接失败、被阻断或不可用时，自动无缝切换到XHR长轮询模式处理前后端通信；
• 两种传输方式互斥，同一时间只会启用其中一种，不会混合使用。

2. Transport.WEBSOCKET_XHR 下的Ping-Pong功能实现 #

Vaadin没有提供开箱即用的、在XHR请求前检测WebSocket存活的Ping-Pong功能，你可以按以下步骤自行实现：

• 前端定时发送Ping消息：借助Vaadin客户端API，定期向服务器发送自定义Ping信号

  // 前端客户端扩展代码
  const vaadinConnection = Vaadin.Flow.getConnection();
  let pingTimer;
  
  function startWebSocketPingCheck() {
    pingTimer = setInterval(() => {
      if (vaadinConnection._transport.type === 'websocket') {
        // 发送自定义Ping消息
        vaadinConnection.send(JSON.stringify({ type: 'ping' }));
        // 3秒内未收到Pong则标记WebSocket断开
        setTimeout(() => {
          if (!window.pongReceived) {
            vaadinConnection._transport.close();
          }
          window.pongReceived = false;
        }, 3000);
      }
    }, 10000); // 每10秒执行一次Ping检测
  }
  

• 后端处理Ping并返回Pong：在Vaadin后端Endpoint中处理Ping请求，返回对应Pong响应

  // 后端Vaadin Endpoint代码
  @Endpoint
  public class PingPongEndpoint {
    @OnMessage
    public String handlePingMessage(String message) {
      JsonObject payload = Json.createReader(new StringReader(message)).readObject();
      if ("ping".equals(payload.getString("type"))) {
        return Json.createObjectBuilder().add("type", "pong").build().toString();
      }
      return message;
    }
  }
  

• 前端监听Pong响应：添加消息监听器，收到Pong后标记连接存活

  vaadinConnection.addMessageListener(event => {
    const response = JSON.parse(event.data);
    if (response.type === 'pong') {
      window.pongReceived = true;
    }
  });
  

• 连接断开时清理定时器：避免内存泄漏，在连接状态变为断开时清除Ping定时器

3. 纯 Transport.WEBSOCKET 模式的连接验证机制 #

纯全双工的Transport.WEBSOCKET模式下，Vaadin自带基于JSR-356 WebSocket规范的心跳验证机制：

• 服务器会定期向客户端发送WebSocket Ping帧；
• 客户端收到Ping帧后必须返回Pong帧，若服务器在指定超时时间内未收到Pong，会主动断开连接并标记为失效；
• 首次服务器调用时，如果WebSocket已断开，Vaadin客户端会实时检测到连接状态变化，自动触发重连流程，或通过connection-state-changed事件通知开发者，能有效检测断开的WebSocket连接。

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