Send data to Node-red From app Angular

[Zakia Bouhout]

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

[Julian Knight]

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]

Thank you Julian!

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

[Zakia Bouhout]

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]

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]

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]

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]

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