Node-red，如何在 HTML 脚本中获取流上下文变量

Question

我对 Node-red 和 HTML 都很陌生，希望能在这个论坛上得到帮助。 我在核心模板节点中有一个 HTML 脚本。收到 GET 请求后，脚本会从数据数组中呈现折线图。数据由另一个节点保存在流上下文数组 var 中，我需要 HTML 脚本节点来读取这些数据并绘制它。在我在 HTML 脚本“内部”生成的模拟数据数组上一切正常，但我无法弄清楚如何从流上下文 var 中获取实际数据（请查看 TODO 在哪里）。 提前感谢您的帮助。

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var options =  {
    exportEnabled: true,
    animationEnabled: true,
    animationDuration: 200,
    theme: "light2",
    title :{
        text: "Simple Line Chart"
    },
    axisY: {
        includeZero: false
    },
    data: [{
        type: "spline",
        indexLabelFontSize: 16,
        dataPoints: []
    }]
};

var xVal = 0;
var yVal = 100;
var updateInterval = 2000;

var WaveData = [];
// TODO temporary random data
var createWaveData = function () {
    var srcData = flow.get('Pressure') || [];
    WaveData = srcData;
/*  WaveData = [];
    var count = 50;
    for ( var j = 0; j <count; j++) {
        yVal = yVal + Math.round(5 + Math.random() *(-5-5));
        WaveData.push(yVal);
    }*/
}

// when plotting next WaveData, let it start from x = 0
var updateChart = function (cnt) {
    createWaveData();
    options.data[0].dataPoints = [];
    for (var j = 0; j < cnt; j++) { 
        yVal = WaveData[j];
        options.data[0].dataPoints.push({y: yVal});
    }
    (new CanvasJS.Chart("chartContainer", options)).render();

};

setInterval(function(){ updateChart(WaveData.length) }, updateInterval); 

}

</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width:100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
</body>

Answer 1

简短的回答是，你不知道。无法从您的页面中直接访问 Node-RED 上下文。

但是你可以间接访问它，你有两个选择：

1. 当通过 http-in/http-reponse 节点加载页面时，使用模板节点在页面中包含上下文变量的当前状态。这将为您提供数据的快照，但不会随着时间的推移而更新。

2. 建立与 Node-RED 的连接以刷新值。有两种不同的方法来解决这个问题。

   我。添加第二个 http-in/http-response 流，该流返回上下文变量的内容，并在您每次要刷新图表时对其进行 AJAX 样式调用。

   二。使用 websocket-out 节点设置到页面的 websocket 连接，然后可以在更新上下文变量时向页面发送实时更新。这意味着该页面将始终使用最新数据。

这两种方法的组合意味着您可以在页面首次加载和实时更新时获得历史数据。

您还应该查看node-red-dashboard 节点集合，它可能会为您执行此操作。