Node-RED 如何在模板 HTML 中接收 msg.payload答案

【问题标题】：Node-RED how to receive msg.payload in template HTMLNode-RED 如何在模板 HTML 中接收 msg.payload
【发布时间】：2020-04-06 20:36:11
【问题描述】：

注意：根据@hardillb 的回答，我修复了上述流程并在下方发布了正确的流程。提前感谢您的帮助。我是 HTML 的初学者，必须在 Node-RED 中使用它。我有一个简单的流程（如上图链接所示）。我在有效负载中注入带有示例折线图点的消息。我想在模板节点的 HTML 脚本中接收消息，然后将接收到的 msg.payload 数据呈现在浏览器的折线图上。如果我从脚本内部生成随机图形，HTML 脚本可以正常工作，但我无法让脚本接收 msg.payload。我尝试了类似于How to send msg.payload from function node to template node

波形 HTML 中的 HTML 脚本如下。我指出了我尝试过但没有工作的 TODO。

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

//define line graph options for CanvasJS line graph
var options =  {
	exportEnabled: true,
	animationEnabled: true,
	animationDuration: 200,
	theme: "light2",
	title :{
		text: "Simple Line Chart"
	},
	axisY: {
		includeZero: false
	},
	data: [{
		type: "spline",
		indexLabelFontSize: 16,
		dataPoints: []  //this will be loaded with "y" values from msg.payload
	}]
};

//TODO not working ---------------------
//load WaveData from msg.payload 
var WaveData = [];
var createWaveData = function () {
    WaveData = {{{payload}}};   //TODO fix, not working
    //WaveData = [1, 2, 3, 4, 5, 4, 3, 2, 1]; //debug code, works fine, sample data is plotted on graph
}
//--------------------------------------

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();

};

var updateInterval = 2000;
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>
</html>

这是每个@hardillb 答案的正确流程。

【问题讨论】：

不，注入节点在这里仍然没有用处，将其完全删除。还要编辑问题以显示功能节点中的内容

标签： html node-red

【解决方案1】：

Node-RED 节点一次只作用于一条消息。

http-in 节点会产生一条消息，由模板节点更新，然后由http-out 节点返回。 http 节点必须成对运行，一个输入消息直接导致对发出请求的浏览器的 http 响应。

模板节点不保存任何状态，它只是使用来自传入消息的数据呈现模板。

因此，拥有注入节点不会做任何有用的事情，因为在模板节点呈现消息中的任何信息后，http-out 节点将丢弃它，因为它不是来自 http-in 节点。

您需要在 http-in 节点和模板节点之间包含一个节点，该节点将使用您的数据更新 msg.payload。这可以是变更节点或功能节点。两者都可用于获取上下文变量并从 be http-in 节点更新 msg。

然后在模板节点中你需要类似的东西

var waveData = {{payload}};

您可能需要 3 组花括号，以阻止数组转义 HTML，请检查模板节点的信息侧边栏

编辑：

实际上已经回来并再次查看了模板节点的文档，您不需要函数节点在模板节点中使用上下文变量。这意味着以下应该有效。

var waveData = {{flow.waveData}}

【讨论】：

感谢您的回答。我根据您的回答更新了流程，现在可以获取消息。但是，我仍然没有弄清楚如何将 msg.payload 加载到 WaveData[]
感谢您的回答。我根据您的回答更新了流程，现在可以获取 msg。但是，我仍然没有弄清楚如何将 msg.payload 加载到 WaveData[]
是否有理由使用 flow.waveData 而不是 flow.get('waveData') ？
因为它不起作用，而且它不是文档中的内容。请参阅模板信息侧边栏的底部。