노드 빨간색 대시 보드 - 목록에 삽입 Mqtt 요청시

Question

주제에 관한 수신 메시지를 수신하는 노드 빨간색 브라우저 ide에 mqtt 노드가 있습니다. 내가 그 정보를 노드 - 빨강 - 대시 보드 목록을 채우려

그래서 그 서식 템플릿 노드 추가 :

<ul id="messagesList"></ul> 

을 나는 할뿐만 아니라 수행 할 수있는 정보를 추가 할 각도 바인딩 또한 테이블에 최대 3 개의 메시지가 있도록 이전 항목을 삭제하려고합니다. 그래서 대시 보드 페이지에 액세스 할 수있는 모든 들어오는 메시지에 자바 스크립트를 실행해야합니다.

어떻게하면됩니까? 어떻게하면 메시지가 들어올 때마다 HTML 페이지에 액세스 할 수있는 자바 스크립트를 실행할 수 있습니까?

Answer 1

메시지를 플로우 컨텍스트에 저장하는 함수 노드를 추가하십시오. dahsboard 템플릿 노드에서

var message = msg.payload; 
var messages = flow.get("messagesList") || []; 

if(messages.length < 3) { 

    //Push to message list 
    messages.push(message); 
} else { 

    //Remove first message and add new one 
    messages.splice(0,1); 
    messages.push(message); 
} 

flow.set("messagesList", messages); 

msg.payload = messages; 
return msg; 

, 예를 들어, 목록을 표시하기 위해 사용 NG 반복 :

<ul id="messagesList"> 
    <li ng-repeat="x in msg.payload">{{x}}</li> 
</ul> 

근무 예 :

[{"id":"5c713e84.dacb98","type":"function","z":"47849408.20a044","name":"","func":"var message = msg.payload;\nvar messages = flow.get(\"messagesList\") || [];\n\nif(messages.length < 3) {\n\n //Push to message list\n messages.push(message);\n} else {\n\n //Remove first message and add new one\n messages.splice(0,1);\n messages.push(message);\n}\n\nflow.set(\"messagesList\", messages);\n\nmsg.payload = messages;\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":500,"wires":[["e6bdd32f.ec218"]]},{"id":"e6bdd32f.ec218","type":"ui_template","z":"47849408.20a044","group":"77d3195c.d9af28","name":"","order":0,"width":0,"height":0,"format":"<ul id=\"messagesList\">\n <li ng-repeat=\"x in msg.payload\">{{x}}</li>\n</ul>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":460,"y":500,"wires":[[]]},{"id":"87e7fba4.ccfa6","type":"inject","z":"47849408.20a044","name":"","topic":"","payload":"","payloadType":"date","repeat":"2","crontab":"","once":false,"x":150,"y":500,"wires":[["5c713e84.dacb98"]]},{"id":"77d3195c.d9af28","type":"ui_group","z":"","name":"Sensors","tab":"cd626a92.d20a78","disp":true,"width":"9"},{"id":"cd626a92.d20a78","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard"}]