Skip to main content
Version: 当前版本

Websocket快速开始

本文档演示如何将Websocket服务接入到Apache ShenYu网关。

环境准备#

参考运维部署的内容，部署 Shenyu 网关

  1. 部署 shenyu-admin 服务
  • 启动成功后，需要在页面的基础配置->插件管理中，把Websocket 插件设置为开启。
  1. 部署 shenyu-bootstrap 服务
  • 启动之后 shenyu-bootstrap 会根据 shenyu.sync.websocket.url配置的地址，通过 websocket 协议进行数据同步

注意：在启动前，请确保网关已经引入相关依赖，默认已引入该依赖。

引入网关对Websocket的代理插件，在网关的 pom.xml 文件中增加如下依赖：

        <!--shenyu websocket plugin start-->        <dependency>            <groupId>org.apache.shenyu</groupId>            <artifactId>shenyu-spring-boot-starter-plugin-websocket</artifactId>            <version>${project.version}</version>        </dependency>

运行shenyu-examples-websocket项目#

  1. 下载 shenyu-examples-websocket（native-websocket 和 reactive-websocket 可以参考shenyu-examples-websocket 下的子项目）

  2. 运行org.apache.shenyu.examples.websocket.TestAnnotationWebsocketApplication main方法启动项目。

  • examples项目会根据 shenyu.register.serverLists 配置的地址，通过 http 协议将 websocket 服务的信息同步给 shenyu-admin, 之后再由 shenyu-admin 同步给 shenyu-bootstrap。

成功启动会有如下日志：

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}

测试websocket请求#

  1. shenyu-examples-websocket项目成功启动之后会自动把加 @ShenyuSpringWebSocketClient 注解的接口方法注册到网关，并添加选择器和规则，可以通过访问 shenyu-admin 页面 -> 插件列表 -> Proxy -> Websocket 看到 shenyu-examples-websocket 服务注册的信息，如果没有，可以参考Websocket插件手动添加配置。
  1. 下面使用测试代码(见附件)模拟 Websocket 协议的请求方式来请求你的Websocket服务。

附件#

websocket调试代码

  • 创建一个名为 websocket.html 的文件，复制下面的代码到文件中
  • 使用谷歌浏览器打开 websocket.html
<!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>