Send data to Node-red From app Angular

542 views
Skip to first unread message

Zakia Bouhout

unread,
May 30, 2017, 7:07:35 AM5/30/17
to Node-RED
Hi all,

I just need, to begin, to send data to Node-red.
(my app: i got a button which insert some value, and i need to send this value to node-red)

Thanks for help
nodered.html
Auto Generated Inline Image 1

Julian Knight

unread,
May 30, 2017, 7:52:01 AM5/30/17
to Node-RED
You have not included anything that lets your page send back to Node-RED.

There are a number of approaches:
  • Use Dashboard that has Angular built in along with an integrated websocket channel
  • Use my node-red-contrib-uibuilder node which allows any framework to be used and includes an inbuilt websocket channel
  • Add a websocket node and add code manually to your Angular app to talk over websockets.
Take your choice.

Zakia Bouhout

unread,
May 30, 2017, 8:06:53 AM5/30/17
to Node-RED
Thank you Julian!

I think i'm going to use websocket even if i'm newbie.

Zakia Bouhout

unread,
May 30, 2017, 8:55:13 AM5/30/17
to Node-RED
Just something

This website shows one approache which not use websocket, so how does it make it?

https://www.compose.com/articles/5-minute-signup-with-node-red-and-compose/

Thanks for reply

steve rickus

unread,
May 30, 2017, 9:30:55 AM5/30/17
to Node-RED
Ah, yes, option #4 -- set up two http endpoints in node-red:

The first one generates an html form with input fields and a submit button. When the form is submitted, it goes to the second http endpoint, effectively pushing a msg object into a node-red flow. The submitted msg object has a field for every form element, with its value.

Julian Knight

unread,
May 30, 2017, 4:17:40 PM5/30/17
to Node-RED
Yes, OK, you got me! Yes, they use a different end point (URL) as the target to send (post) the form to.

I'm so used to using websockets that it is easy to forget the simple approach!

What it comes down to is how dynamic you want your system to be. For example, when someone submits a form, do you need information to flow back without the user having to have a new page loaded? If so, you need websockets, otherwise not. Node-RED makes websockets really easy though so why not use them!

Zakia Bouhout

unread,
Jun 7, 2017, 5:15:59 AM6/7/17
to Node-RED
Hi Guys ,
it's me ... again...


Ok i need help about my http post in Node-red.

In my app i call Node-red like this :

(I just want to test if when i click on an Add button , data is posted in NODE-RED - it works with a simple page html with submit button)


addThing() {
    if(this.newThing) {
      this.$http.post('http://localhost:1880/toto', {name: this.newThing})
      .then(function successCallBack(data){
        console.log(data);
      })
      .catch(console.error);
      /*this.$http.post('api/things', {
        name: this.newThing
      });*/
      this.newThing = '';
    }
  }
}

My Node:


Response:
But when i click on ADD button, console returns :
OPTIONS  XHR  http://localhost:1880/toto [HTTP/1.1 200 OK 1 ms]
Object { data: null, status: -1, headers: headersGetter/<(), config: Object, statusText: "" }



So no data returns in NODE-RED AND OPTIONS mode instead of POST.

Thanks

Julian Knight

unread,
Jun 8, 2017, 3:38:13 PM6/8/17
to Node-RED
Does the input from the http in node need to be translated to json using a json node? 

The following worked just fine (except an eventual error from the http request node as I haven't included a response from the http in node):

[{"id":"c0712e7d.8fcb2","type":"http in","z":"4e7cac1e.5280b4","name":"","url":"/toto","method":"post","swaggerDoc":"","x":180,"y":860,"wires":[["32727072.9f745"]]},{"id":"32727072.9f745","type":"debug","z":"4e7cac1e.5280b4","name":"","active":true,"console":"false","complete":"false","x":590,"y":860,"wires":[]},{"id":"68ac521b.c6d9ec","type":"http request","z":"4e7cac1e.5280b4","name":"","method":"POST","ret":"txt","url":"http://localhost:1880/toto","tls":"","x":370,"y":900,"wires":[["39a6823e.0da1ce"]]},{"id":"c453fb12.9ca918","type":"inject","z":"4e7cac1e.5280b4","name":"","topic":"","payload":"{\"name\": \"this.newThing\"}","payloadType":"json","repeat":"","crontab":"","once":false,"x":170,"y":900,"wires":[["68ac521b.c6d9ec"]]},{"id":"39a6823e.0da1ce","type":"debug","z":"4e7cac1e.5280b4","name":"","active":true,"console":"false","complete":"false","x":590,"y":900,"wires":[]}]

using NR to do the post as well. Maybe check that the output of 
Reply all
Reply to author
Forward
0 new messages