This document introduces how to quickly access the Apache ShenYu gateway using Websocket.
Refer to local deployment to deploy the Shenyu gateway.
shenyu-admin
service.Websocket
plugin to be enabled in the page's basic configuration ->
Plugin Management.shenyu-bootstrap
service.shenyu-bootstrap
will synchronize the data via the websocket
protocol according to the address configured in shenyu.sync.websocket.url
.Note: Before starting, make sure that the gateway has introduced the relevant dependency, which is introduced by default.
Import the gateway proxy plugin for Websocket
and add the following dependencies to the gateway's pom.xml
file.
<!--shenyu websocket plugin start--> <dependency> <groupId>org.apache.shenyu</groupId> <artifactId>shenyu-spring-boot-starter-plugin-websocket</artifactId> <version>${project.version}</version> </dependency>
Download shenyu-examples-websocket (native-websocket
and reactive-websocket
can refer to the subprojects under shenyu-examples-websocket).
Run main method of org.apache.shenyu.examples.websocket.TestAnnotationWebsocketApplication
to start this project.
shenyu-admin
via the http
protocol according to the address configured in shenyu.register.serverLists
, and then to shenyu-bootstrap
by shenyu-admin
.log info as follows after starting:
2022-08-09 23:37:34.994 INFO 61398 --- [or_consumer_-21] o.a.s.r.client.http.utils.RegisterUtils : metadata client register success: {"appName":"ws-annotation","contextPath":"/ws-annotation","path":"/ws-annotation/myWs","rpcType":"websocket","ruleName":"/ws-annotation/myWs","enabled":true,"pluginNames":[],"registerMetaData":false,"timeMillis":1660059454701} 2022-08-09 23:37:35.019 INFO 61398 --- [or_consumer_-18] o.a.s.r.client.http.utils.RegisterUtils : uri client register success: {"protocol":"ws://","appName":"ws-annotation","contextPath":"/ws-annotation","rpcType":"websocket","host":"192.168.1.3","port":8001}
shenyu-examples-websocket
project will automatically register the interface methods annotated with @ShenyuSpringWebSocketClient
to the gateway and add selectors and rules after successful start, you can see the information of shenyu-examples-websocket
service registration by visiting shenyu-admin
page -> PluginList -> Proxy -> Websocket to see the shenyu-examples-websocket
service registration information, if not, you can refer to Websocket plugin to add the configuration manually.Websocket
protocol to request your Websocket
service.websocket debugging code
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <title>Shenyu WebSocket Test</title> <script> var websocket; function connect() { try { websocket = new WebSocket(document.getElementById("url").value); websocket.onopen = onOpen; websocket.onerror = onError; websocket.onmessage = onReceive; websocket.onclose = onClose; } catch (e) { alert('[websocket] establish connection error.'); } } function onOpen() { alert('[websocket] connect success.'); } function onError(e) { alert("[websocket] connect error. code: " + e.code); } function onReceive(msg) { var show = document.getElementById("show"); show.innerHTML += "[Server Response] => " + msg.data + "<br/>"; show.scrollTop = show.scrollHeight; } function onClose(e) { console.log("[websocket] connect closed. code: " + e.code) alert("[websocket] connect closed."); document.getElementById("show").innerHTML = ""; document.getElementById("msg").value = ""; websocket = null; } function buttonClose() { if (websocket == null) { console.log("Please establish a connection first.") } else { websocket.close(1000); document.getElementById("show").innerHTML = ""; document.getElementById("msg").value = ""; } } function send() { if (websocket == null) { alert("Please establish a connection first.") } else { var msg = document.getElementById("msg").value; show.innerHTML += "[Client Request] => " + msg + "<br/>"; websocket.send(msg); } } </script> </head> <body> <input id="url" type="text" value="ws://localhost:9195/ws-annotation/myWs"><br /> <input id="msg" type="text"><br /> <button id="connect" onclick="connect();">Connect</button> <button id="send" onclick="send();">Send</button> <button id="close" onclick="buttonClose();">Close</button></br> <div id="show" class="show"></div> </body> </html> <style> input { width: 400px; margin-bottom: 10px; } .show { width: 600px; height: 400px; overflow-y: auto; border: 1px solid #333; margin-top: 10px; } </style>