SpringCloudGateway笔记(10)-websocket

灰太狼 2021-12-14 22:11 760阅读 0赞

使用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/**

运行程序

打开页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmd6aWlzbWU_size_16_color_FFFFFF_t_70]

点击connect连接websocket

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmd6aWlzbWU_size_16_color_FFFFFF_t_70 1]

连接成功 输入消息发送

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmd6aWlzbWU_size_16_color_FFFFFF_t_70 2]

后台同样收到消息

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmd6aWlzbWU_size_16_color_FFFFFF_t_70 3]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmd6aWlzbWU_size_16_color_FFFFFF_t_70 4]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmd6aWlzbWU_size_16_color_FFFFFF_t_70 5]  
[GITHUB代码地址][GITHUB]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmd6aWlzbWU_size_16_color_FFFFFF_t_70]: /images/20211214/14b095852cf148fcb696077b7effdc03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmd6aWlzbWU_size_16_color_FFFFFF_t_70 1]: /images/20211214/562f3c141f604240825cab65f7223a7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmd6aWlzbWU_size_16_color_FFFFFF_t_70 2]: /images/20211214/a1e338fe273945118142c09363cf3cfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmd6aWlzbWU_size_16_color_FFFFFF_t_70 3]: /images/20211214/5ed408363d6d4639a117ac0873171ca4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmd6aWlzbWU_size_16_color_FFFFFF_t_70 4]: /images/20211214/a157e7412ef04d999042aa40980fbdf3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmd6aWlzbWU_size_16_color_FFFFFF_t_70 5]: /images/20211214/451698b00c324bf9aff9d44d0c551254.png
[GITHUB]: https://github.com/yingziisme/spring-cloud-gateway-demo
[70]: /images/20211214/dcf8e8cb1c00440082c1d16295858dbc.png