运行 javascript 函数在 node-red 中使用 msg.payload

Question

我在 node-red 的模板节点中有一段 javascript 代码，这段代码是一个简单的进度条。运行 javascript 功能 html 代码的按钮很容易，但我想运行当 payload 到达时代码.. . 然后我想在 width 等于 95 时发送一个新的 payload...

我的想法是运行这段代码：当我的 payload 等于 0 时，msg.payload === 0 ? move() : '' 到运行 move()。但我不知道在哪里写。

然后我尝试在 witdh 等于 95 时将值 1 分配给我的 payload 但不起作用...我肯定没有使用良好的语法.. 有点迷失与此交互template node-red 中的节点。

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 100%;
  height: 30px;
  background-color: #4CAF50;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"> </div>
</div>
  <p id="msg">  </p>

  <button onclick="move()">Click Me</button> 

<br>


<script>
var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var message = document.getElementById("msg");
    var width = 100;
    var id = setInterval(frame, 100);
    function frame() {
      if (width <= 0) {
        clearInterval(id);
        i = 0;
      } else {
        width = width - 1;
        elem.style.width = width + "%";
        elem.textContent = width;
        if (width == 95) {
            message.textContent = "forcez";
            {payload: 1};

        }

      }
    }
  }
}
</script>

</body>

Answer 1

也许你已经知道了，但让我在这里重复一遍，因为很多人不知道或忘记了。

您的 Node-RED 流在服务器（后端）中作为 Node.js 应用程序运行。

脚本标签中的JavaScript代码在浏览器中运行。

浏览器中的代码无法在运行时直接从 ui_template 读取消息或向其发送消息。

(a) 从运行时向浏览器中的代码运行发送消息。

解决方案是围绕此函数包装您的函数：

(function(scope){
     scope.$watch('msg',function(){
          ...
   })
})(scope)

(b) 从浏览器中的代码运行向运行时发送一个对象。

范围对象有一个发送函数，可用于在运行时从 ui_template 节点发送消息。

您想使用此语句：scope.send(msg)，例如：scope.send({topic : "topic", payload : "payload"})

在您的特定情况下，您需要将这些行添加到 ui_template

中的代码中

<script>
(function(scope) {
    // $watch fires each time the node is triggered in the flow
    scope.$watch('msg', function(msg) {
            if (msg.payload == 0) {
                move();
            }
        });

.............

})(scope);
</script>

还有

 if (width == 95) {
    message.textContent = "forcez";
    scope.send({payload:"warning: width 95"});

 }

您的样本流程可能需要进行一些其他更改，例如当 ui_template 仍在倒计时时接收到新的有效载荷时，避免它从运行两次的保护。

此处尝试在您的示例代码中实施这些更改：

[{"id":"dba00648.b7f6d8","type":"tab","label":"Flow 12","disabled":false,"info":""},{"id":"4cc372c7.58d5ac","type":"ui_template","z":"dba00648.b7f6d8","group":"5af14c6e.d86604","name":"","order":5,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<style>\n#myProgress {\n width: 100%;\n background-color: #ddd;\n}\n\n#myBar {\n width: 100%;\n height: 30px;\n background-color: #4CAF50;\n}\n</style>\n<body>\n\n\n<div id=\"myProgress\">\n <div id=\"myBar\"> </div>\n</div>\n <p id=\"msg\"> {{msg.payload}} </p>\n \n\n\n<br>\n\n\n<script>\n\n(function(scope) {\n    // $watch fires each time the node is triggered in the flow\n    scope.$watch('msg', function(msg) {\n            if (msg.payload == 0) {\n                move();\n            }\n        });\n\nvar i = 0;\nfunction move() {\n if (i == 0) {\n i = 1;\n var elem = document.getElementById(\"myBar\");\n var message = document.getElementById(\"msg\");\n message.textContent = \"start\";\n var width = 100;\n var id = setInterval(frame, 100);\n \n function frame() {\n if (width <= 0) {\n clearInterval(id);\n i = 0;\n } else {\n width = width - 1;\n elem.style.width = width + \"%\";\n elem.textContent = width;\n if (width == 95) {\n \tmessage.textContent = \"forcez\";\n \tscope.send({payload:\"warning: width 95\"});\n \n }\n \n }\n }\n }\n}\n\n})(scope);\n</script>\n\n</body>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":440,"y":240,"wires":[["9779fd5e.1d736"]]},{"id":"9779fd5e.1d736","type":"debug","z":"dba00648.b7f6d8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":610,"y":240,"wires":[]},{"id":"dde1582.3b84ca8","type":"inject","z":"dba00648.b7f6d8","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":270,"y":240,"wires":[["4cc372c7.58d5ac"]]},{"id":"72ccb344.ed011c","type":"inject","z":"dba00648.b7f6d8","name":"","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":270,"y":280,"wires":[["4cc372c7.58d5ac"]]},{"id":"5af14c6e.d86604","type":"ui_group","z":"","name":"Compte à rebours","tab":"7560e5e8.ee7dfc","order":3,"disp":true,"width":"6","collapse":false},{"id":"7560e5e8.ee7dfc","type":"ui_tab","z":"","name":"Préhension SELFIT","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

参考文献：

https://flows.nodered.org/flow/2f1aaf0635f9bf23207152682323240a

运行 javascript 函数在 node-red 中使用 msg.payload

run javascript function using msg.payload in node-red

javascript

node-red