使用nodered将Json消息发布到网页中

时间:2018-02-13 16:29:13

标签: json web-services node-red

您好:我是IoT领域的新手。

我有一个MQTT节点从localhost中的MQTT代理接收数据,此节点的出口进入JSON条目以将MQTT消息转换为JSON,现在我想将此数据显示到网页中,原始杰森,但我不能。

我刚试过这个节点红色流程:

[{"id":"6cc9f88b.f94a28","type":"switch","z":"57d2c074.30568","name":"ID Switch","property":"payload.id","propertyType":"msg","rules":[{"t":"eq","v":"B201","vt":"str"}],"checkall":"false","outputs":1,"x":243,"y":407.75001525878906,"wires":[["56b9b7f2.67e668","8be52c6c.ac166","9805fdec.80c64","2c453ab0.e2c736","f73ed9a6.caed78"]]},{"id":"d1141712.3b4e88","type":"mqtt in","z":"57d2c074.30568","name":"local MQTT","topic":"altran/fof/AMWC/#","qos":"0","broker":"384d1e7a.794322","x":132.89578247070312,"y":71.63890075683594,"wires":[["681dc68b.d46848","ff9a3bab.1285d8"]]},{"id":"681dc68b.d46848","type":"json","z":"57d2c074.30568","name":"","x":134,"y":299.75001525878906,"wires":[["6cc9f88b.f94a28"]]},{"id":"ff9a3bab.1285d8","type":"debug","z":"57d2c074.30568","name":"B201","active":true,"console":"false","complete":"payload","x":339,"y":88.75001525878906,"wires":[]},{"id":"53d3a9b.659e458","type":"http request","z":"57d2c074.30568","name":"","method":"POST","ret":"txt","url":"/MWC","tls":"","x":294,"y":697.7500152587891,"wires":[["f73ed9a6.caed78"]]},{"id":"818a75ab.c085c8","type":"template","z":"57d2c074.30568","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n    <head>\n    <title>Simple Live Display</title>\n    <script type=\"text/javascript\">\n        var ws;\n        var wsUri = \"ws:\";\n        var loc = window.location;\n        console.log(loc);\n        if (loc.protocol === \"https:\") { wsUri = \"wss:\"; }\n        // This needs to point to the web socket in the Node-RED flow\n        // ... in this case it's ws/simple\n        wsUri += \"//\" + loc.host + loc.pathname.replace(\"simple\",\"ws/simple\");\n\n        function wsConnect() {\n            console.log(\"connect\",wsUri);\n            ws = new WebSocket(wsUri);\n            //var line = \"\";    // either uncomment this for a building list of messages\n            ws.onmessage = function(msg) {\n                var line = \"\";  // or uncomment this to overwrite the existing message\n                // parse the incoming message as a JSON object\n                var data = msg.data;\n                //console.log(data);\n                // build the output from the topic and payload parts of the object\n                line += \"<p>\"+data+\"</p>\";\n                // replace the messages div with the new \"line\"\n                document.getElementById('messages').innerHTML = line;\n                //ws.send(JSON.stringify({data:data}));\n            }\n            ws.onopen = function() {\n                // update the status div with the connection status\n                document.getElementById('status').innerHTML = \"connected\";\n                //ws.send(\"Open for data\");\n                console.log(\"connected\");\n            }\n            ws.onclose = function() {\n                // update the status div with the connection status\n                document.getElementById('status').innerHTML = \"not connected\";\n                // in case of lost connection tries to reconnect every 3 secs\n                setTimeout(wsConnect,3000);\n            }\n        }\n        \n        function doit(m) {\n            if (ws) { ws.send(m); }\n        }\n    </script>\n    </head>\n    <body onload=\"wsConnect();\" onunload=\"ws.disconnect();\">\n        <div id=\"messages\"></div>\n    </body>\n</html>\n","x":455,"y":601.75,"wires":[["61793a35.1e66c4"]]},{"id":"273117e3.191c88","type":"http in","z":"57d2c074.30568","name":"","url":"/MWC","method":"get","swaggerDoc":"","x":196,"y":614.7500152587891,"wires":[["818a75ab.c085c8"]]},{"id":"f73ed9a6.caed78","type":"function","z":"57d2c074.30568","name":"","func":"\nreturn msg;","outputs":1,"noerr":0,"x":492,"y":699.7500152587891,"wires":[["d4590354.c7222"]]},{"id":"61793a35.1e66c4","type":"http response","z":"57d2c074.30568","name":"","x":622,"y":607.75,"wires":[]},{"id":"d4590354.c7222","type":"websocket out","z":"57d2c074.30568","name":"","server":"c463feaf.ca512","client":"","x":644,"y":700.7500152587891,"wires":[]},{"id":"384d1e7a.794322","type":"mqtt-broker","z":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willPayload":"","birthTopic":"","birthQos":"0","birthPayload":""},{"id":"c463feaf.ca512","type":"websocket-listener","z":"","path":"/MWC","wholemsg":"false"}]

但是当我发出get请求时,网页会返回javascript代码。

0 个答案:

没有答案