Websocket快速开始

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

环境准备

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

  1. 部署 shenyu-admin 服务
  • 启动成功后，需要在页面的基础配置->插件管理中，把Websocket 插件设置为开启。

Websocket快速开始 - 图1

  1. 部署 shenyu-bootstrap 服务
  • 启动之后 shenyu-bootstrap 会根据 shenyu.sync.websocket.url配置的地址，通过 websocket 协议进行数据同步

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

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

  1.         <!--shenyu websocket plugin start-->
  2.         <dependency>
  3.             <groupId>org.apache.shenyu</groupId>
  4.             <artifactId>shenyu-spring-boot-starter-plugin-websocket</artifactId>
  5.             <version>${project.version}</version>
  6.         </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。

成功启动会有如下日志：

  1. 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} 
  2. 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插件手动添加配置。

Websocket快速开始 - 图2

  1. 下面使用测试代码(见附件)模拟 Websocket 协议的请求方式来请求你的Websocket服务。

Websocket快速开始 - 图3

附件

websocket调试代码

  • 创建一个名为 websocket.html 的文件，复制下面的代码到文件中
  • 使用谷歌浏览器打开 websocket.html
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html" />
  5.     <title>Shenyu WebSocket Test</title>
  6.     <script>
  7.         var websocket;
  8.         function connect() {
  9.             try {
  10.                 websocket = new WebSocket(document.getElementById("url").value);
  11.                 websocket.onopen = onOpen;
  12.                 websocket.onerror = onError;
  13.                 websocket.onmessage = onReceive;
  14.                 websocket.onclose = onClose;
  15.             } catch (e) {
  16.                 alert('[websocket] establish connection error.');
  17.             }
  18.         }
  19.         function onOpen() {
  20.             alert('[websocket] connect success.');
  21.         }
  22.         function onError(e) {
  23.             alert("[websocket] connect error. code: " + e.code);
  24.         }
  25.         function onReceive(msg) {
  26.             var show = document.getElementById("show");
  27.             show.innerHTML += "[Server Response] => " + msg.data + "<br/>";
  28.             show.scrollTop = show.scrollHeight;
  29.         }
  30.         function onClose(e) {
  31.             console.log("[websocket] connect closed. code: " + e.code)
  32.             alert("[websocket] connect closed.");
  33.             document.getElementById("show").innerHTML = "";
  34.             document.getElementById("msg").value = "";
  35.             websocket = null;
  36.         }
  37.         function buttonClose() {
  38.             if (websocket == null) {
  39.                 console.log("Please establish a connection first.")
  40.             } else {
  41.                 websocket.close(1000);
  42.                 document.getElementById("show").innerHTML = "";
  43.                 document.getElementById("msg").value = "";
  44.             }
  45.         }
  46.         function send() {
  47.             if (websocket == null) {
  48.                 alert("Please establish a connection first.")
  49.             } else {
  50.                 var msg = document.getElementById("msg").value;
  51.                 show.innerHTML += "[Client Request] => " + msg + "<br/>";
  52.                 websocket.send(msg);
  53.             }
  54.         }
  55.     </script>
  56. </head>
  57. <body>
  58.     <input id="url" type="text" value="ws://localhost:9195/ws-annotation/myWs"><br />
  59.     <input id="msg" type="text"><br />
  60.     <button id="connect" onclick="connect();">Connect</button>
  61.     <button id="send" onclick="send();">Send</button>
  62.     <button id="close" onclick="buttonClose();">Close</button></br>
  63.     <div id="show" class="show"></div>
  64. </body>
  65. </html>
  66. <style>
  67.     input {
  68.         width: 400px;
  69.         margin-bottom: 10px;
  70.     }
  71.     .show {
  72.         width: 600px;
  73.         height: 400px;
  74.         overflow-y: auto;
  75.         border: 1px solid #333;
  76.         margin-top: 10px;
  77.     }
  78. </style>