How do i create an AngularTS app which can listen to NR Sockets

Core Development
1

So, i have a client which really likes node red's ease of use for Diagram designing. It has a nice little flow he created. That information then needs to be forwarded to monitoring dashboards which is where I have been looking at the UIBUILDER. For the purpose of the uibuilder it is not built for advanced usage. It is for (in my opinion) creating a custom dashboard or a form. Nothing super fancy, but since the client likes the tool, the issue is that the tool itself doesnt have security or user profiles and the pipe flows need to be managed with our ops support team. Hence, the complete requirement on my end to leverage user management, various dbms, mfa logins, metrics management, and the full 9.

The issue is that, I noticed with the client is that they essentially want a Single Page App (SPA) at the route of /foo. This tool would be for our Operations support team, so it would have user management, lots of security, Lots of buttons, lots of validation, forms, dashboards etc all in 1 place. I also noticed a lot of tenative code reuse, so i said well, instead of making a widget for uibuilder to consume, why not just create a SPA using Angular and then from there develop a socket between NodeRed and the SPA. I was attempting to do some demo but didnt have anything in place.

Ideally, given the simple use case of WHY node-red is being consumed, lends me to believe that the client may veer away as a Diagram Creation Tool with a Decision Tree that you can pipe data through to get a result isnt hard to make, but i am not here to say what works and doesnt. I am trying to create a smooth environment for the consumer of the nice tool an extension for the data.

My Goal is as follows. They have a diagram which through the uibuilder uses a socket to keep getting up to date data. It looks like they pipe the output of a flow into the input and then since it is cyclic, the uibuilder on js side of the house will look for messages and then parse the data. I like this but given the scale they need, I didnt know if there is say, a way to create a SPA, implement sockets, and then somehow use the flow to route to the endpoint: localhost:4200 or something which would attempt to create a socket to nodered's socket for up to date info.

In the Angular Side of the house, I plan to have a Service which monitors for changes and then updaets some info and by Angular, just use observers to monitor changes.

I figure this IS possible. The issue like i said comes down to user criteria that they want a fully fledged app for the operations support team to utilize. Is this possible? can it be done? I posted on Stackoverflow, but didnt get any results and was sort of confused.

2

This is incorrect. uibuilder certainly IS built to allow very advanced usage or very simple.

You can use Angular with uibuilder - I don't have any examples because I don't like nor do I use Angular. But I can guarantee that it works.

For advance usage, the clunkiest part of uibuilder right now is where you want to have a build step in your SPA. Right now, you need some understanding of how uibuilder presents either the dist or src folders, the uibuilder folder structure and how to use the command line.

There is an example on the WIKI of using a build step with VueJS which would be easily adapted to Angular.

You don't need to do that, the uibuilder libraries do that for you. All you need to do is to start the uibuilderfe library and create an onchange function to deal with incoming messages. See my recent Svelte example.

3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.