SpringCloudGateway笔记(10)-websocket
使用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的控制台也可以看到相关打印
欢迎关注微信交流
作者：yingziisme
来源链接：https://blog.csdn.net/yingziisme/article/details/94591157
版权声明：
1、JavaClub（https://www.javaclub.cn）以学习交流为目的，由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容，包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网，本站不享有版权，版权归原作者所有。
2、本站提供的内容仅用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容，请及时通知本站（javaclubcn@163.com），我们将第一时间核实后及时予以删除。
