SpringCloudGateway笔记(10)-websocket

最新推荐文章于 2025-07-11 17:16:52 发布

原创最新推荐文章于 2025-07-11 17:16:52 发布 · 1.5w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#SpringCloudGateway

springcloud 同时被 2 个专栏收录

13 篇文章

订阅专栏

Gateway

11 篇文章

订阅专栏

本文介绍了SpringCloudGateway如何支持WebSocket的转发，由于zuul不支持WebSocket，SpringCloudGateway成为了一个更好的选择。文中详细讲解了服务端和客户端的配置，包括WebSocketConfig、WebsocketController的设置，以及如何在客户端页面建立连接并收发消息。此外，还通过POSTMAN测试了后台发送消息的功能，并在Chrome控制台观察到相应输出。完整代码可在GITHUB找到。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用SpringCloudGateway的重要功能 – websocket的转发

spring-boot的第一代网关zuul不支持websocket的转发，而在实际应用场景中，websocket作为一个常用功能，这大大限制了zuul的使用

SpringCloudGateway支持websocket的转发

配置websocket的客户端和服务端

客户端页面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Spring Boot Websocket</title>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="sockjs.min.js" type="text/javascript"></script>
    <script src="stomp.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var stompCient = null;
        var host = "http://127.0.0.1:8801";

        function setConnected(connected) {
            document.getElementById("connectBt").disabled = connected;
            document.getElementById("disconnectBt").disabled = !connected;
            document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';

            $('#response').html();
        }

        function testGet() {

        }

        function connect() {
            console.log("====");
            var socket = new SockJS(host + "/websocket");
            stompCient = Stomp.over(socket);
            stompCient.connect({}, function (frame) {
                setConnected(true);
                console.log("connected: " + frame);
                stompCient.subscribe('/subscribe', function (response) {
                    showResponse(response.body);
                })
            })
        }

        function disconnect() {
            if (stompCient != null) {
                stompCient.disconnect();
            }
            setConnected(false);
            console.log("disconnected");
        }

        function send() {
            var name = $('#name').val();
            var message = $('#message').val();
            stompCient.send("/chat", {}, name + ":" + message);
        }

        function showResponse(message) {
            console.log("===respnse: "+message)
            var respons = $('#response');
            respons.html(message);
        }
    </script>
</head>

<body onload="disconnect();">
<noscript>
    <h2 style="color: #ff0000">not support websocket</h2>
</noscript>
<div>
    <div>
        <button id="test" onabort="testGet()">test</button>
        <p id="resText"></p>
    </div>
    <div>
        <button id="connectBt" onclick="connect()"> connect</button>
        <button id="disconnectBt" onclick="disconnect()">disconnect</button>
    </div>
    <div id="conversationDiv">
        <label>enter your name</label> <input type="text" id="name"/>
        <br>
        <label>enter message</label> <input type="text" id="message"/>
        <button id="send" onclick="send()">send</button>
        <p id="response"></p>
    </div>
</div>

</body>
</html>

服务端配置

WebSocketConfig

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry){
        //客户端连接端点
        registry.addEndpoint("/websocket")
                .setAllowedOrigins("*")
                .withSockJS();
    }
}

WebsocketController

@Slf4j
@RestController
public class WebsocketController {
    @Autowired
    private SimpMessagingTemplate template;


    @MessageMapping("/chat")
    @SendTo("/subscribe")
    public String say(String msg) {
        log.info("websocket msg: {}", msg);
        return msg;
    }

    @GetMapping("/websocket/reply")
    public String msgReply(@RequestParam String msg) {
        log.info("websocket reply: {}", msg);
        template.convertAndSend("/subscribe", msg);
        return msg;
    }
}

配置Gateway，普通的websocket用下面的配置，这里用上面这个配置就可以了

        - id: spring-cloud-client-demo3
          uri: lb://spring-cloud-client-demo
          predicates:
            - Path=/websocket/**
          filters:
            - StripPrefix=1
        - id: spring-cloud-client-demo4
          uri: lb:ws://spring-cloud-client-demo
          predicates:
            - Path=/websocket/**

运行程序

打开页面

在这里插入图片描述

点击connect连接websocket

在这里插入图片描述

连接成功输入消息发送

在这里插入图片描述

后台同样收到消息

2019-06-29 22:20:35.881  INFO 13880 --- [boundChannel-38] c.m.d.c.websocket.WebsocketController    : websocket msg: a:hello

POSTMAN调用后台发送消息的接口

在这里插入图片描述

查看页面同样可以收到消息

在这里插入图片描述

查看chrome的控制台也可以看到相关打印

在这里插入图片描述
GITHUB代码地址

欢迎关注微信交流
在这里插入图片描述