版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yingziisme/article/details/94591157
使用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的控制台也可以看到相关打印