Spring Cloud Gateway在WebFlux Netty下WebSocket连接无法通过SockJS降级？WebSocketService与SockJsServiceFactory

Spring Cloud Gateway + WebFlux Netty环境下SockJS降级WebSocket的深度剖析

各位朋友，大家好！今天我们来深入探讨一个在实际开发中经常遇到的问题：Spring Cloud Gateway在WebFlux Netty环境下，WebSocket连接无法通过SockJS进行降级。这个问题涉及到多个技术组件的交互，理解其背后的原理对于构建健壮的实时应用至关重要。

1. 问题背景与SockJS降级机制

在Web应用中，WebSocket提供了全双工通信能力，非常适合实时性要求高的场景。然而，WebSocket并非在所有环境下都能稳定工作。网络代理、防火墙、浏览器兼容性等因素都可能导致WebSocket连接失败。为了解决这个问题，SockJS应运而生。

SockJS是一个浏览器JavaScript库，它提供了一种透明的降级机制。当WebSocket连接失败时，SockJS会自动尝试其他传输协议，如HTTP长轮询、HTTP流等，以模拟WebSocket的效果。这样，即使在不支持WebSocket的环境下，也能保证应用的实时性。

2. Spring Cloud Gateway在WebSocket场景中的作用

Spring Cloud Gateway作为API网关，负责路由和管理外部请求。在WebSocket场景中，Gateway需要将WebSocket请求正确地转发到后端的WebSocket服务。它需要正确处理WebSocket的握手协议，并保持连接的持久性。

3. WebFlux Netty与WebSocket的集成

WebFlux是Spring Framework 5引入的响应式Web框架，它基于Reactor库构建，采用非阻塞IO模型，能够处理高并发请求。Netty是一个高性能的异步事件驱动网络应用框架，WebFlux通常使用Netty作为其底层的网络引擎。

WebFlux Netty提供了对WebSocket的良好支持。我们可以通过
@Controller或
WebSocketHandler来处理WebSocket请求。

4. 问题分析：为什么SockJS降级会失败？

当Spring Cloud Gateway与WebFlux Netty一起使用时，如果WebSocket连接失败，SockJS的降级机制可能会失效。这通常是由于以下几个原因造成的：

Gateway的WebSocket配置不正确： Gateway需要正确配置WebSocket的路由规则，确保请求能够正确转发到后端的WebSocket服务。如果Gateway配置不正确，可能会导致WebSocket握手失败，从而阻止SockJS的降级。CORS配置问题： 跨域资源共享（CORS）策略可能会阻止SockJS使用HTTP长轮询或HTTP流等协议进行降级。如果CORS配置不正确，浏览器可能会拒绝这些请求。Netty的WebSocket处理不完整： WebFlux Netty需要正确处理SockJS的降级请求。SockJS的降级协议与标准的WebSocket协议有所不同，如果Netty的WebSocket处理逻辑不完整，可能会导致降级失败。WebSocketService与SockJsServiceFactory配置不当： 这两个类在SockJS的服务器端实现中扮演着关键角色。
WebSocketService负责处理WebSocket握手和数据传输，而
SockJsServiceFactory则负责创建和配置SockJS服务。如果配置不当，可能导致SockJS降级失败。

5. 解决方案：配置Spring Cloud Gateway和WebFlux Netty

为了解决SockJS降级失败的问题，我们需要正确配置Spring Cloud Gateway和WebFlux Netty。

5.1 Gateway配置

首先，我们需要在Gateway中配置WebSocket的路由规则。例如，我们可以使用
PathRoutePredicateFactory来匹配WebSocket请求的路径，并使用
WebSocketService来将请求转发到后端的WebSocket服务。

@Configuration
public class GatewayConfig {
 
    @Bean
    public RouteLocator customRouteLocator(RouteLocatorBuilder builder) {
        return builder.routes()
                .route("websocket_route", r -> r.path("/ws/**") // 匹配/ws/**路径的请求
                        .uri("ws://localhost:8081")) // 转发到后端的WebSocket服务
                .build();
    }
}

5.2 后端WebFlux Netty配置

在后端的WebFlux Netty应用中，我们需要配置WebSocket处理逻辑。我们可以使用
WebSocketHandler来处理WebSocket请求。同时，我们需要配置SockJS支持。

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
 
    @Autowired
    private MyWebSocketHandler myWebSocketHandler;
 
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myWebSocketHandler, "/ws") // 注册WebSocketHandler
                .addInterceptors(new HandshakeInterceptor()); // 添加握手拦截器，可选
    }
 
    @Bean
    public MyWebSocketHandler myWebSocketHandler() {
        return new MyWebSocketHandler();
    }
}
 
// 实现WebSocketHandler
@Component
public class MyWebSocketHandler implements WebSocketHandler {
 
    @Override
    public Mono<Void> handle(WebSocketSession session) {
        return session.receive()
                .map(WebSocketMessage::getPayloadAsText)
                .log()
                .flatMap(message -> {
                    System.out.println("Received: " + message);
                    return session.send(Mono.just(session.textMessage("Echo: " + message)));
                })
                .then();
    }
 
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("Connection established");
    }
 
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("Connection closed: " + status);
    }
 
    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        System.err.println("Transport error: " + exception.getMessage());
    }
 
    @Override
    public boolean supportsPartialMessages() {
        return false;
    }
}
 
//握手拦截器
public class HandshakeInterceptor implements org.springframework.web.socket.server.HandshakeInterceptor {
    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map attributes) throws Exception {
        // 可以添加自定义的握手逻辑，例如身份验证
        System.out.println("Before Handshake");
        return true;
    }
 
    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception exception) {
        System.out.println("After Handshake");
    }
}

5.3 配置SockJS支持

关键在于配置SockJS支持。这需要在
WebSocketConfigurer中进行配置。

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
 
    @Autowired
    private MyWebSocketHandler myWebSocketHandler;
 
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myWebSocketHandler, "/ws")
                .addInterceptors(new HandshakeInterceptor())
                .withSockJS(); // 启用SockJS支持
    }
 
    @Bean
    public MyWebSocketHandler myWebSocketHandler() {
        return new MyWebSocketHandler();
    }
}


withSockJS() 方法启用了SockJS支持。它会自动配置SockJS的降级策略，并处理SockJS的降级请求。

5.4 CORS配置

为了允许跨域请求，我们需要配置CORS。可以使用
@CrossOrigin注解或
WebFluxConfigurer来实现。

@Configuration
public class CorsConfig {
 
    @Bean
    public WebFilter corsFilter() {
        return (ServerWebExchange exchange, WebFilterChain chain) -> {
            ServerHttpRequest request = exchange.getRequest();
            if (CorsUtils.isCorsRequest(request)) {
                HttpHeaders headers = request.getHeaders();
                ServerHttpResponse response = exchange.getResponse();
                HttpMethod requestMethod = headers.getAccessControlRequestMethod();
                HttpHeaders responseHeaders = response.getHeaders();
                responseHeaders.add(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN, "*"); // 允许所有来源
                responseHeaders.addAll(HttpHeaders.ACCESS_CONTROL_ALLOW_HEADERS, headers.getAccessControlRequestHeaders());
                if (requestMethod != null) {
                    responseHeaders.add(HttpHeaders.ACCESS_CONTROL_ALLOW_METHODS, requestMethod.name());
                }
                responseHeaders.add(HttpHeaders.ACCESS_CONTROL_ALLOW_CREDENTIALS, "true");
                responseHeaders.add(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, "Content-Type, Access-Control-Allow-Origin, Access-Control-Allow-Credentials");
                if (request.getMethod() == HttpMethod.OPTIONS) {
                    response.setStatusCode(HttpStatus.OK);
                    return Mono.empty();
                }
            }
            return chain.filter(exchange);
        };
    }
}

这段代码配置了一个全局的CORS过滤器，允许所有来源的跨域请求。在实际项目中，应该根据需要配置更严格的CORS策略。

5.5 WebSocketService与SockJsServiceFactory的深入理解

WebSocketService:
WebSocketService是Spring WebSocket模块的核心组件，负责处理WebSocket握手和数据传输。它封装了底层WebSocket协议的细节，并提供了统一的API供应用程序使用。在
WebSocketHandlerRegistry配置中，当你使用
withSockJS()时，Spring会自动配置
WebSocketService来处理WebSocket握手请求。

SockJsServiceFactory:
SockJsServiceFactory 负责创建和配置
SockJsService 实例。
SockJsService 是 SockJS 服务器端的核心组件，它处理 SockJS 客户端的连接请求，并根据客户端的能力选择合适的传输协议（WebSocket, HTTP 长轮询, HTTP 流等）。当客户端不支持 WebSocket 时，
SockJsService 会自动降级到其他传输协议。

当你使用
withSockJS() 时，Spring 会自动创建一个默认的
SockJsServiceFactory 实例，并使用默认的配置来创建
SockJsService。 如果需要自定义 SockJS 服务的配置，例如设置超时时间、允许的域名等，你可以自定义
SockJsServiceFactory。

自定义 SockJsServiceFactory 示例:

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
 
    @Autowired
    private MyWebSocketHandler myWebSocketHandler;
 
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myWebSocketHandler, "/ws")
                .addInterceptors(new HandshakeInterceptor())
                .withSockJS()
                .setStreamBytesLimit(512 * 1024) // 设置流式传输的字节限制
                .setSessionCookieNeeded(false); // 设置是否需要会话 Cookie
    }
 
    @Bean
    public MyWebSocketHandler myWebSocketHandler() {
        return new MyWebSocketHandler();
    }
 
    //如果需要自定义SockJsServiceFactory，可以这样配置
    //@Bean
    //public SockJsServiceFactory sockJsServiceFactory(ObjectProvider<List<SockJsServiceInterceptor>> interceptors) {
    //    DefaultSockJsServiceFactory factory = new DefaultSockJsServiceFactory(interceptors);
    //    factory.setSessionCookieNeeded(false);
    //    return factory;
    //}
}

表格总结配置要点：

配置项	描述	示例代码
Gateway路由配置	配置Gateway的WebSocket路由规则，将 /ws/**路径的请求转发到后端的WebSocket服务。	java @Bean public RouteLocator customRouteLocator(RouteLocatorBuilder builder) { return builder.routes() .route("websocket_route", r -> r.path("/ws/**") .uri("ws://localhost:8081")) .build(); }
后端WebSocketHandler	实现 WebSocketHandler接口，处理WebSocket连接和消息。	java @Component public class MyWebSocketHandler implements WebSocketHandler { ... }
SockJS支持	在 WebSocketConfigurer中启用SockJS支持。	java registry.addHandler(myWebSocketHandler, "/ws").withSockJS();
CORS配置	配置CORS，允许跨域请求。	java @Bean public WebFilter corsFilter() { ... }
SockJsServiceFactory	（可选）自定义 SockJsServiceFactory，配置SockJS服务的参数，例如超时时间、允许的域名等。	java registry.addHandler(myWebSocketHandler, "/ws").withSockJS().setStreamBytesLimit(512 * 1024).setSessionCookieNeeded(false);

6. 客户端代码示例

客户端需要使用SockJS库来连接WebSocket服务。

<!DOCTYPE html>
<html>
<head>
    <title>SockJS Example</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script>
        var sock = new SockJS('http://localhost:8080/ws'); // 连接到Gateway的/ws端点
 
        sock.onopen = function() {
            console.log('open');
            sock.send('test');
        };
 
        sock.onmessage = function(e) {
            console.log('message', e.data);
        };
 
        sock.onclose = function() {
            console.log('close');
        };
    </script>
</head>
<body>
    <h1>SockJS Example</h1>
</body>
</html>

注意，客户端连接的是Gateway的
/ws端点，而不是后端WebSocket服务的
/ws端点。

7. 调试与排错

如果SockJS降级仍然失败，我们可以使用以下方法进行调试：

查看浏览器控制台： 浏览器控制台会显示WebSocket连接的错误信息，以及SockJS的降级尝试。查看Gateway日志： Gateway日志会显示WebSocket请求的路由信息，以及可能的错误。查看后端WebSocket服务日志： 后端WebSocket服务日志会显示WebSocket连接的建立和关闭信息，以及可能的错误。使用网络抓包工具： 可以使用Wireshark等网络抓包工具来分析WebSocket连接的协议交互，以及SockJS的降级请求。

8. 常见的坑以及解决方案

CORS问题： 确保CORS配置正确，允许客户端的跨域请求。Gateway的WebSocket超时： 调整Gateway的WebSocket超时时间，避免连接过早断开。后端WebSocket服务的资源限制： 检查后端WebSocket服务的资源限制，例如最大连接数、最大消息大小等。防火墙和代理： 检查防火墙和代理是否阻止了WebSocket连接或SockJS的降级请求。

9. 其他替代方案

除了SockJS之外，还有其他一些WebSocket降级方案，例如：

Socket.IO： Socket.IO是一个流行的实时应用框架，它也提供了自动降级机制。自定义降级逻辑： 可以根据需要，自行实现WebSocket降级逻辑。

关于SockJS降级失败的几句话

SockJS降级的配置需要仔细的检查，特别是CORS配置和Gateway路由配置，这都是容易出错的地方。理解WebSocketService和SockJsServiceFactory的职责，有助于我们更好地排查和解决问题。最后，熟练使用调试工具是解决问题的关键。