如何在Spring MVC WebSocket中检测StompJS/SockJS客户端断开连接

嘿，我来帮你搞定这个WebSocket断开检测的问题！结合你用的Spring MVC WebSocket（搭配SockJS/StompJS客户端），主要可以从服务器端心跳机制和客户端主动监听两个方向入手，下面给你详细拆解：

Spring WebSocket自带了心跳检测机制，能自动识别客户端断开（包括网络中断、浏览器标签关闭等场景），我们只需要在你的配置类里完善相关设置，再监听断开事件即可。

1. 配置心跳参数 #

在你的WebSocketConfiguration类的configureMessageBroker方法中，添加心跳配置，同时用上你已经注入的TaskScheduler：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration extends AbstractWebSocketMessageBrokerConfigurer {
    @Autowired
    private TaskScheduler scheduler;

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // 保留你原有的消息代理配置（比如enableSimpleBroker）
        config.enableSimpleBroker("/topic", "/queue")
              // 设置心跳规则：客户端每10秒发送一次心跳帧，服务器20秒未收到则判定客户端离线
              .setHeartbeatValue(new long[]{10000, 20000})
              .setTaskScheduler(scheduler); // 注入的调度器用来处理心跳定时任务
    }

    // 保留你其他的重写方法（比如registerStompEndpoints）
}

2. 监听断开事件 #

创建一个事件监听器，监听Spring触发的SessionDisconnectEvent，这个事件会在客户端断开（包括心跳超时）时被触发：

@Component
public class WebSocketDisconnectListener implements ApplicationListener<SessionDisconnectEvent> {

    @Override
    public void onApplicationEvent(SessionDisconnectEvent event) {
        // 获取断开的WebSocket会话ID
        String sessionId = event.getSessionId();
        // 这里执行你的业务逻辑：标记用户离线、清理会话资源、通知其他在线用户等
        System.out.println("客户端已断开连接，会话ID：" + sessionId);

        // 如果你的系统集成了Spring Security，还能获取到断开的用户信息
        // Principal principal = event.getUser();
        // if (principal != null) {
        //     String username = principal.getName();
        //     // 针对特定用户执行离线处理
        // }
    }
}

客户端也可以主动监听连接状态变化，提前感知断开，甚至实现自动重连逻辑：

1. 监听SockJS连接的关闭/错误事件 #

// 初始化SockJS和Stomp客户端
const socket = new SockJS('/your-websocket-endpoint');
const stompClient = Stomp.over(socket);

// 建立连接
stompClient.connect({}, function(frame) {
    console.log('已连接到服务器：' + frame);

    // 监听SockJS连接关闭事件
    socket.onclose = function(event) {
        console.log('WebSocket连接已关闭，原因：' + event.reason);
        // 这里可以添加重连逻辑或者提示用户
    };

    // 监听SockJS错误事件
    socket.onerror = function(error) {
        console.error('WebSocket发生错误：', error);
    };

    // 监听Stomp层面的断开事件
    stompClient.onDisconnect = function() {
        console.log('Stomp客户端已断开连接');
    };
}, function(error) {
    console.error('连接服务器失败：', error);
});

2. 监听浏览器网络状态（可选） #

可以结合浏览器的在线/离线事件，做更友好的用户提示或重连：

// 网络恢复时触发
window.addEventListener('online', function() {
    console.log('网络已恢复，尝试重新连接WebSocket');
    // 调用你的重连方法
});

// 网络断开时触发
window.addEventListener('offline', function() {
    console.log('网络已断开，请检查网络连接');
    // 提示用户网络异常
});

• 心跳间隔调整：心跳参数不要设置得太频繁（比如小于5秒），避免浪费服务器资源；也不要太长，否则断开检测会有明显延迟。10秒客户端发心跳、20秒服务器超时是比较通用的配置。
• 自动重连逻辑：如果需要客户端自动重连，建议在onclose事件中添加定时器，同时限制重试次数，避免无限循环重连。
• 用户与会话绑定：如果需要针对特定用户处理离线逻辑，确保在Stomp连接时通过请求头传递用户身份信息，这样在服务器端的SessionDisconnectEvent中就能拿到Principal对象，关联到具体用户。

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