SpringCloudGateway笔记(10)-websocket

时间 2020-07-08 标签 springcloudgateway 笔记 websocket

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

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

SpringCloudGateway支持websocket的转发java

配置websocket的客户端和服务端jquery

客户端页面代码git

<!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>

服务端配置github

WebSocketConfigweb

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

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

WebsocketControllerspring

@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用下面的配置，这里用上面这个配置就能够了chrome

- 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代码地址

欢迎关注微信交流