1. 概述

1.1 插件名称

Websocket 插件

1.2 适用场景

转发场景，处理 websocket协议请求，将其转发到后端其他 websocket 协议的服务
服务负载均衡

1.3 插件功能

支持根据 host、uri、query 等请求信息做流量的治理
支持设置请求的负载均衡策略，同时支持服务预热，目前支持三种策略：ip hash（带虚拟节点的一致性哈希）、round-robbin（加权轮询）、random（加权随机）
支持设置接口级别请求超时时间
支持设置超时重试次数

1.4 插件代码

核心模块 shenyu-plugin-websocket
核心类 org.apache.shenyu.plugin.websocket.WebSocketPlugin

1.5 添加自哪个shenyu版本

2.4.3

2. 如何使用插件

2.1 插件使用流程图

名词解释

shenyu 网关：包含 shenyu-admin 和 shenyu-bootstrap 服务。
客户端项目：后端真实 websocket 服务

流程解释

启动 shenyu 网关服务：参照运维部署，启动 shenyu-admin 和 shenyu-bootstrap，确保 shenyu 网关服务正常
在 shenyu-admin 中启用 websocket 插件：在 shenyu-admin 插件管理的页面中开启 websocket 插件
配置和启动客户端项目：启动客户端项目（后端真实 websocket 服务），并将服务信息配置到 shenyu 网关中，分为手动配置和自动配置两种方式
检查转发是否正常：检查转发能否成功

2.2 启用插件

在 shenyu-admin —> 基础配置 —> 插件管理 —> websocket 设置为开启。

2.3 配置客户端服务

2.3.1 手动配置

在 shenyu-admin 页面上手动配置客户端服务，后端服务不需要任何改动，即可实现 websocket 协议转发

Websocket 插件中添加选择器

Websocket 插件中添加规则

启动客户端项目（后端 websocket 服务）
测试服务转发是否成功

测试代码见附件5.1

2.3.2 自动配置

如果某些场景你需要通过自动配置来减少工作量，可以在后端服务中增加注解，实现自动配置服务到 shenyu 网关中

在后端服务项目中的 pom.xml 文件中添加插件 maven 配置。

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

使用@ShenyuSpringWebSocketClient注解，该注解会将 websocket 服务自动注册到 shenyu 网关
调整插件配置，配置参数详情见 2.4.1
启动客户端项目（后端 websocket 服务），示例代码见 2.5 示例
检查 shenyu-admin 页面中插件列表服务注册信息是否注册成功
测试服务转发是否成功

测试代码见附件5.1

2.4 配置插件

2.4.1 在客户端项目中配置文件中配置接入参数

客户端接入方式和服务器地址，参数为: shenyu.register.*，下面的示例使用了 http 接入方式，目前客户端支持的接入的方式有以下几种：http、zookeeper、etcd、nacos、consul，详细的接入配置参数请参考客户端接入配置。
客户端配置，参数为: shenyu.client.websocket.*，包含服务的名称、路由地址以及端口，必须配置 contextPath 的值作为每个服务的路由地址。

shenyu:
  register:
    registerType: http
    serverLists: http://localhost:9095 
    props:
      username: admin
      password: 123456
  client:
    websocket:
      props:
        contextPath: /ws-annotation 
        appName: ws-annotation
        port: 8001 # 需要和服务端口保持一致

2.4.2 在 shenyu-admin 配置 websocket 插件的选择器和规则信息

使用自动配置的方式，在客户端启动之后会在 shenyu-admin -> 插件列表 -> Proxy -> Websocket 自动注册选择器和规则信息。

2.4.2.1 选择器的配置

Websocket 选择器示例，通用选择器配置请参考选择器和规则。

2.4.2.1.1 选择器处理信息配置

host：填写 localhost，该字段暂时没使用。
ip:port：ip 与端口，这里填写你真实服务的 ip + 端口。
protocol：：ws 协议，不填写默认为：ws://
startupTime：启动时间，单位毫秒。
weight：负载均衡权重，服务启动自动注册的默认值为 50。
warmupTime：预热时间，单位毫秒，在预热中的服务器会计算瞬时权重，计算值会小于实际配置的权重，以保护刚启动的服务器，服务启动注册的默认值为 10。举个例子预热时间 100 毫秒，目前启动了 50 毫秒，配置的权重 50，实际的权重是 25。
status：开启或关闭，开始状态此处理器才有效。

2.4.2.2 规则的配置

Websocket 规则示例，通用规则配置请参考选择器和规则。

2.4.2.2.1 规则处理信息配置

loadStrategy：如果 websocket 客户端是一个集群，Apache ShenYu 网关调用时采取哪种负载均衡策略，当前支持 roundRobin、random 和 hash。
timeout：调用客户端的超时时间。
retryCount：调用客户端超时失败的重试次数。

2.5 示例

3. 如何禁用插件

在 shenyu-admin —> 基础配置 —> 插件管理 —> 关闭 websocket 插件状态

4. 常见问题

4.1 websocket 建立连接出现 1002 错误

可能原因：客户端服务不正常，shenyu 网关和客户端项目不能建立正常连接，请检查网关到客户端的网络、客户端服务是否正常

4.2 多个客户端服务在 websocket 选择器中展示为空

可能原因：基础配置-> 插件管理 -> websocket -> multiSelectorHandle 选项选择 multiple handle

5. 附件

5.1 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>

Websocket插件