如何用JavaScript搭建连接Node-RED的WebSocket实现树莓派LED控制

你当前实现完全无法连通的核心原因有两个：

• 对WebSocket连接地址的概念理解错误：代码里写的ws://var/www/html/index.html是Apache服务器上静态文件的本地存储路径，不是WebSocket服务的监听端点。WebSocket协议必须连接实际提供WS服务的IP、端口、服务路径，和前端HTML文件存放在Apache的哪个目录没有任何关系。
• 缺少Node-RED侧的WebSocket服务配置：Node-RED本身不会自动对外提供WebSocket连接，必须通过专用的WebSocket节点配置出可访问的WS端点，才能和前端建立通信。

1. Node-RED侧配置WebSocket服务端点 #

• 从左侧节点栏拖入websocket in节点、websocket out节点到流程画布
• 双击websocket in节点，点击配置项旁的铅笔图标新建服务：
  • 类型选择「Listen on port」
  • 勾选「Use Node-RED's HTTP port」复用Node-RED默认的1880端口，避免额外开端口
  • 路径填写自定义的服务标识，比如/rpiLedControl
• 将websocket in节点的输出连接到你已经调试好的LED控制逻辑节点（比如RPi GPIO输出节点）
• 将需要返回给前端的状态消息源连接到websocket out节点的输入，websocket out的服务配置选择刚才和websocket in绑定的同一个服务项
• 点击右上角「部署」，此时Node-RED会在ws://<树莓派局域网IP>:1880/rpiLedControl地址对外提供WebSocket服务

2. 修正后的前端HTML代码 #

把以下代码替换你原来的测试代码，注意把代码里的<树莓派局域网IP>换成你实际的树莓派地址（比如192.168.3.25），WS路径和你刚才在Node-RED里配的/rpiLedControl保持一致：

<!DOCTYPE HTML>
<html>
<head>
   <script type="text/javascript">
      let wsClient;
      // 页面加载完成后自动建立WebSocket连接
      window.addEventListener('load', () => {
         if (!("WebSocket" in window)) {
            alert("当前浏览器不支持WebSocket协议");
            return;
         }
         // 替换成你实际的树莓派IP
         const wsEndpoint = "ws://<树莓派局域网IP>:1880/rpiLedControl";
         wsClient = new WebSocket(wsEndpoint);

         // 连接建立成功回调
         wsClient.onopen = () => {
            alert("WebSocket连接Node-RED成功");
         }

         // 收到Node-RED返回消息的回调
         wsClient.onmessage = (event) => {
            alert("收到Node-RED推送的消息：" + event.data);
         }

         // 连接断开回调，增加自动重连逻辑
         wsClient.onclose = () => {
            alert("WebSocket连接已断开，3秒后自动重连");
            setTimeout(() => window.dispatchEvent(new Event('load')), 3000);
         }

         // 连接异常回调
         wsClient.onerror = () => {
            alert("WebSocket连接失败，请检查Node-RED运行状态、IP/端口/路径配置是否正确");
         }
      })

      // 发送LED控制指令的方法
      function triggerLed(isTurnOn) {
         // 判断WebSocket连接是否处于打开状态
         if (wsClient && wsClient.readyState === WebSocket.OPEN) {
            // 发送JSON格式指令，方便Node-RED侧解析处理
            wsClient.send(JSON.stringify({
               action: isTurnOn ? "led_on" : "led_off"
            }));
         } else {
            alert("WebSocket尚未连接完成，请稍候重试");
         }
      }
   </script>
</head>
<body>
   <div style="padding: 20px;">
      <h3>树莓派LED控制</h3>
      <button onclick="triggerLed(true)">点亮LED</button>
      <button onclick="triggerLed(false)">熄灭LED</button>
   </div>
</body>
</html>

• 检查Node-RED的监听配置：打开~/.node-red/settings.js文件，找到uiHost配置项，确认设置为uiHost: "0.0.0.0"（默认是仅本地127.0.0.1监听的话，局域网设备无法连接），修改完需要重启Node-RED服务。
• 防火墙放行：如果树莓派开启了ufw防火墙，需要执行sudo ufw allow 1880/tcp放行Node-RED的默认端口。
• 混合内容拦截：如果你是通过HTTPS协议访问Apache托管的HTML页面，浏览器会拦截非加密的ws://连接，这种情况要么用HTTP协议访问页面，要么给Node-RED配置对应的SSL证书，把WS地址换成加密的wss://格式。

内容的提问来源于stack exchange，提问作者AlinuxDEV