Node-RED中WebSocket与HTTP节点实现JSON数据HTML表格可视化求助

我来帮你梳理整个流程，从WebSocket获取数据到最终在HTML页面展示表格，步骤很清晰，咱们一步步来：

1. 先把WebSocket数据存起来 #

因为WebSocket是实时推送的，你得把最新的JSON数据存到Node-RED的上下文（Context）里，这样HTTP请求过来时能拿到最新的数据。

• 在WebSocket In节点后面接一个Change节点，设置操作：Set → global.latestData → msg.payload。这样每次WebSocket收到新数据，都会更新全局上下文里的latestData。

2. 处理HTTP请求，取出存储的JSON #

用HTTP In节点（选GET方法，路径比如设为/data-table）来接收前端的请求，之后加一个Function节点，把上下文里的数据取出来：

// 从全局上下文获取最新的WebSocket数据
msg.payload = global.get("latestData") || [];
return msg;

3. 解析JSON并生成HTML表格 #

这一步是核心，咱们用Function节点预处理数据，再用Template节点生成HTML：

第一步：预处理数据（Function节点） #

把JSON数组里的每个对象拆成键（表头）和值（表格内容），还要标记第一个对象用来生成表头：

const rawData = msg.payload;
// 确保数据是数组，避免出错
if (!Array.isArray(rawData)) {
    msg.payload = [];
    return msg;
}

// 处理每个数据项
msg.payload = rawData.map((item, idx) => ({
    keys: Object.keys(item),
    values: Object.values(item),
    first: idx === 0 // 标记第一个元素，用来渲染表头
}));

// 设置响应类型为HTML
msg.headers = { "Content-Type": "text/html" };
return msg;

第二步：用Template节点生成HTML表格 #

把Template节点的内容改成下面的代码，它用Mustache模板语法循环生成表格：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时数据表格</title>
    <style>
        table {
            border-collapse: collapse;
            width: 90%;
            margin: 30px auto;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        th, td {
            border: 1px solid #e0e0e0;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #f5f5f5;
            font-weight: 600;
        }
        tr:hover {
            background-color: #fafafa;
        }
        h2 {
            text-align: center;
            color: #333;
        }
    </style>
</head>
<body>
    <h2>WebSocket实时数据</h2>
    <table>
        <thead>
            <tr>
                {{#payload}}
                    {{#first}}
                        {{#keys}}<th>{{.}}</th>{{/keys}}
                    {{/first}}
                {{/payload}}
            </tr>
        </thead>
        <tbody>
            {{#payload}}
            <tr>
                {{#values}}<td>{{.}}</td>{{/values}}
            </tr>
            {{/payload}}
        </tbody>
    </table>
</body>
</html>

4. 返回HTML给前端 #

最后把Template节点的输出连到HTTP Out节点，这样当你访问http://你的Node-RED地址:1880/data-table时，就能看到格式化好的表格了！

一些小提示 #

• 如果Node-RED重启后数据丢失，可以在settings.js里配置持久化上下文，把数据存在文件里。
• 如果WebSocket推送的JSON不是数组，要先在Function节点里做格式转换，确保是数组才能正常渲染表格。
• 你可以根据自己的需求修改Template里的CSS样式，调整表格的外观。

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