Sringboot和Vue3实现websocket ping/pong心跳机制

要实现WebSocket的心跳机制，可以在客户端和服务端都实现一个定时发送ping消息和接收pong消息的逻辑。以下是使用SpringBoot和Vue3实现WebSocket心跳机制的示例代码：

服务端（SpringBoot）：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
 
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/myHandler").setAllowedOrigins("*");
    }
 
    @Bean
    public WebSocketHandler myHandler() {
        return new MyHandler();
    }
 
    private class MyHandler extends TextWebSocketHandler {
        private static final int HEARTBEAT_INTERVAL = 30 * 1000; // 心跳间隔，单位为毫秒
 
        private ScheduledExecutorService executor = Executors.newSingleThreadScheduledExecutor();
        private ScheduledFuture<?> heartbeatFuture;
 
        @Override
        public void afterConnectionEstablished(WebSocketSession session) {
            startHeartbeat(session);
        }
 
        @Override
        public void handleTextMessage(WebSocketSession session, TextMessage message) {
            // 处理普通消息
        }
 
        @Override
        public void handleTransportError(WebSocketSession session, Throwable exception) {
            stopHeartbeat();
        }
 
        @Override
        public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
            stopHeartbeat();
        }
 
        private void startHeartbeat(WebSocketSession session) {
            stopHeartbeat(); // 先停止之前可能存在的心跳任务
 
            heartbeatFuture = executor.scheduleAtFixedRate(() -> {
                try {
                    session.sendMessage(new TextMessage("ping"));
                } catch (IOException e) {
                    stopHeartbeat();
                }
            }, HEARTBEAT_INTERVAL, HEARTBEAT_INTERVAL, TimeUnit.MILLISECONDS);
        }
 
        private void stopHeartbeat() {
            if (heartbeatFuture != null) {
                heartbeatFuture.cancel(true);
            }
        }
    }
}

客户端（Vue3）：

const HEARTBEAT_INTERVAL = 30 * 1000; // 心跳间隔，单位为毫秒

const ws = new WebSocket('ws://localhost:8080/myHandler');

ws.onopen = () => {
  startHeartbeat();
};

ws.onmessage = (event) => {
  if (event.data === 'pong') {
    // 收到心跳回复
  } else {
    // 处理普通消息
  }
};

ws.onerror = () => {
  stopHeartbeat();
};

ws.onclose = () => {
  stopHeartbeat();
};

let heartbeatTimer;

function startHeartbeat() {
  stopHeartbeat(); // 先停止之前可能存在的心跳任务

  heartbeatTimer = setInterval(() => {
    ws.send('ping');
  }, HEARTBEAT_INTERVAL);
}

function stopHeartbeat() {
  if (heartbeatTimer != null) {
    clearInterval(heartbeatTimer);
  }
}

在上面的示例中，服务端使用了SpringBoot的WebSocket支持，客户端使用了Vue3的WebSocket API。服务端和客户端都实现了一个定时发送ping消息和接收pong消息的逻辑，以确保WebSocket连接的正常运行。注意，如果服务端或客户端在发送或接收消息时出现异常，应该立即停止心跳任务，以避免对服务器造成过大的负担。