HTML页面如何通过WebSocket接收Node-RED数据并显示wind_speed_last值

1. 添加页面展示容器 #

先在HTML的<body>标签内，你想要显示风速的位置插入如下元素，用来承载动态更新的风速值：

<div class="wind-show">
  <h3>实时风速监测</h3>
  <p>最新风速：<span id="windSpeedVal">加载中...</span></p>
</div>

这里给显示值的span设置了唯一idwindSpeedVal，后续JS会通过这个id定位元素更新内容。

2. 替换原有WebSocket脚本 #

把你原来的script标签内容替换为下面的代码，核心是增加JSON解析、字段提取、页面渲染的逻辑，同时去掉了会打断使用的弹窗提示，改为控制台打印日志：

// 建立WebSocket连接，地址和你之前测试通的保持一致
const socket = new WebSocket("ws://192.168.86.84:1880/endpoint/test");
// 获取页面上的风速显示元素
const windSpeedDom = document.getElementById('windSpeedVal');

socket.onmessage = function (event) {
  try {
    // WebSocket接收的默认是字符串，先转成JS可操作的JSON对象
    const resp = JSON.parse(event.data);
    // 校验数据结构合法性，避免格式错误导致脚本报错
    if (resp?.data?.conditions && Array.isArray(resp.data.conditions)) {
      // 从conditions数组里找到带风速字段的气象数据组
      const windRecord = resp.data.conditions.find(item => Object.hasOwn(item, 'wind_speed_last'));
      if (windRecord) {
        // 将风速值更新到页面，可根据传感器实际单位修改后缀
        windSpeedDom.textContent = `${windRecord.wind_speed_last} m/s`;
      }
    }
  } catch (err) {
    console.error('风速数据解析失败：', err);
  }
};

socket.onopen = function () {
  console.log('WebSocket连接已建立，等待接收数据');
};

socket.onclose = function (event) {
  if (event.wasClean) {
    console.log(`连接正常关闭，状态码：${event.code}，原因：${event.reason}`);
    windSpeedDom.textContent = '连接已断开';
  } else {
    console.log('连接异常中断');
    windSpeedDom.textContent = '连接异常';
  }
};

socket.onerror = function (err) {
  console.error('WebSocket连接出错：', err);
  windSpeedDom.textContent = '连接出错';
};

关键说明 #

• 没有硬编码数组索引取风速值，而是通过字段匹配查找，即使后续传感器返回的conditions数组顺序变动，也能正常拿到风速数据
• 增加了异常捕获和数据校验，单条数据格式错误不会导致整个页面脚本崩溃
• 连接断开、出错时会在页面给出提示，不会频繁弹出alert窗口影响使用
• 如果你需要自定义展示样式，直接给#windSpeedVal添加CSS样式即可，不影响数据更新逻辑

常见注意事项 #

• 如果打开页面控制台报跨域错误，需要打开Node-RED的websocket in节点配置页，勾选允许跨域访问选项，或者将HTML页面部署在Node-RED的http静态目录下同域访问
• 代码里的风速单位m/s是示例，请替换为你所用传感器实际对应的单位
• 只要WebSocket连接正常，后端每推送一次新数据，页面上的风速值就会自动刷新，不需要手动刷新页面

内容的提问来源于stack exchange，提问作者Jérôme