1. 说明
上文《基于RTIO远程控制LED》分享在开发环境中使用一台Windows PC（WSL2）作为服务器，并通过curl对物联网设备进行控制。本文继续上文实验，使用手机浏览器控制设备。
模型如下图。
+----------+ +----------------------+
| | | WINDOWS11 |
| ESP32-C6 | ───────► | +------------------+ |
| | | | WSL2 | |
+----------+ | | | |
| | RTIO-Container | |
+----------+ | | -------------- | |
| | | | HTTP-Server | |
| Phone | ───────► | | | |
| (WEB) | | +------------------+ |
+----------+ +----------------------+
逻辑调用关系如下。
+----------+ +-----------+
| | 3 | |
| ESP32-C6 | ◄────────────────── | |
| | | RTIO |
+----------+ ┌► | |
│ | |
│ +-----------+
│
+----------+ 2 │ +-----------+
| | ─────────────────┘ | |
| Phone | |HTTP-Server|
| (WEB) | ──────────────────► | |
+----------+ 1 +-----------+
交互步骤如下：
- 手机端浏览器请求HTTP-Server，打开控制页面。
- 页面里的
JavaScript代码通过POST请求RTIO服务。 - RTIO将请求转发到具体设备的
URI上，并将结果返回到手机端。
如开发环境如果是Linux（比如Ubuntu PC），可跳过下文中WSL相关设置。
2. 硬件及环境设置
可参考上文 基于RTIO远程控制LED-硬件及环境设置 进行设置。
除此之外，服务端需要以下设置：
- Python3环境，Ubuntu下可尝试使用命令
sudo apt install python3安装。
3. 实验步骤
3.1. 服务端运行
sudo docker run -it --entrypoint ./rtio \
--rm -p 17017:17017 -p 17917:17917 registry.cn-guangzhou.aliyuncs.com/rtio/rtio:v0.8.0 \
-disable.deviceverify -disable.hubconfiger \
-enable.hub.tls \
-hub.tls.certfile ./certificates/demo_server.crt \
-hub.tls.keyfile ./certificates/demo_server.key \
-log.level info
使用WSL对外进行服务，需要设置防火墙、端口映射到WSL，参考 4.1. WSL网络配置 。
3.2. 设备端编译
可参考上文 基于RTIO远程控制LED-设备端编译 进行编译。
3.3. 启动HTTP-Server
打开另一终端，切换remote_switch/client目录，使用Python3的HTTP module作为HTTP服务，目录中包含“index.html”为设备控制页面。
cd rtio-device-sdk-c/demos-esp32/rtio/remote_switch/client
python3 -m http.server 18918
3.4. 手机端打开控制界面
打开手机浏览器，访问主机的18918端口（HTTP-Server），成功后会展示设备控制界面。如无法访问，请检查防火墙和端口转发等设置，可参考 4.1. WSL网络配置 。
比如主机地址为 192.168.1.100，可在浏览器地址栏输入如下：
http://92.168.1.100:18918
成功加载控制页面后，即可通过屏幕上的按钮开关LED，具体可参考附录三：成果展示。
4. 附录一：WSL相关设定
4.1. WSL网络配置
首先，确保Windows主机网络是“专用”网络，而不是“公用”网络。如果设置为公用，Windows 防火墙会限制局域网流量。
打开Windows设置，“网络和Internet”页面，点击顶部的“属性”，选择“专用网络”。
第二步，打开主机对外服务的端口，设置防火墙允许以下端口传入。
- 17017 - RTIO物联网设备接入端口。
- 17917 - RTIO HTTP API端口。
- 18918 - HTTP Server端口，用于传输WEB页面。
管理员权限下打开Windows PowerShell，执行以下命令。
netsh advfirewall firewall add rule name="17017 for RTIO" protocol=TCP localport=17017 dir=in action=allow
netsh advfirewall firewall add rule name="17917 for RTIO" protocol=TCP localport=17917 dir=in action=allow
netsh advfirewall firewall add rule name="18918 for RTIO" protocol=TCP localport=18918 dir=in action=allow
默认下Windows主机可能禁用“ICMP Echo”，如果希望使用Ping进行网络测试，可尝试增加以下规则。
netsh advfirewall firewall add rule name="ICMP for RTIO" protocol=ICMPV4 dir=in action=allow
可以使用如下命令查询RTIO相关的防火墙端口。
netsh advfirewall firewall show rule name=all | Select-String "RTIO"
第三步，端口转发，将开发板请求转发到WSL上。(这里WSL采用默认网络模型，也可尝试其他网络模式，比如 Mirrored mode networking，则可跳过下面步骤。)
获取目标WSL IP地址。
> wsl --list --running
Ubuntu-22.04
> wsl -d Ubuntu-22.04 hostname -I
172.22.3.95
参考“172.22.3.95”为例，注意替换该地址。执行以下命令进行端口转发。
netsh interface portproxy add v4tov4 listenaddress=0.0.0.0 listenport=17017 connectaddress=172.22.3.95 connectport=17017
netsh interface portproxy add v4tov4 listenaddress=0.0.0.0 listenport=17917 connectaddress=172.22.3.95 connectport=17917
netsh interface portproxy add v4tov4 listenaddress=0.0.0.0 listenport=18918 connectaddress=172.22.3.95 connectport=18918
可通过下面命令查看端口转发。
netsh interface portproxy show all
5. 附录二：实验结束（选做）
5.1. 恢复WSL网络相关设置
管理员权限下打开Windows PowerShell，运行如下命令。
查询当前端口转发。
netsh interface portproxy show all
删除RTIO相关的端口转发。
netsh interface portproxy delete v4tov4 listenaddress=0.0.0.0 listenport=17017
netsh interface portproxy delete v4tov4 listenaddress=0.0.0.0 listenport=17917
netsh interface portproxy delete v4tov4 listenaddress=0.0.0.0 listenport=18918
查询为RTIO添加的防火墙规则。
netsh advfirewall firewall show rule name=all | Select-String "RTIO"
删除相关规则。
netsh advfirewall firewall delete rule name="17017 for RTIO"
netsh advfirewall firewall delete rule name="17917 for RTIO"
netsh advfirewall firewall delete rule name="18918 for RTIO"
netsh advfirewall firewall delete rule name="ICMP for RTIO"
5.2. 恢复网络属性
如果实验前为“公用网络”，记得恢复网络属性。
打开Windows设置，“网络和Internet”页面，点击顶部的“属性”，选择“公用网络”。
6. 附录三：成果展示
如上图。可通过控制页面中“ON”、“OFF”控制开发板上的LED。
结论，在开发环境（WSL2）中，基于RTIO，使用手机通过WEB方式成功控制LED。