[uibuilder] The next step - 3rd-party comms with a uibuilder front-end

Share Your Nodes
2

And as expected, the implementation didn't quite follow the script :slight_smile:

However, I've now pushed a new branch to GitHub called vNext if you would like to try things out. Still some rough edges but those are mainly due to the part-finished security changes (don't try those, they don't work properly yet in this branch).

Check out the CHANGELOG file which details the changes so far and also contains a very messy To Do list.

If you want to try the external send/receive, create a simple uibuilder flow then deploy. Then change to the full Vue/bootstrap template. Then add a simple flow with a uib-sender node. Change the settings to select the correct uibuilder URL and check the "Allow return" checkbox and deploy.

In your front-end index.js file, change the uibuilder.on function to add the lines:

if ( msg._uib && msg._uib.originator ) {
    uibuilder.send( {payload:"This is a returned message!"}, msg._uib.originator )
}

Now, every time to send a msg in Node-RED to the sender node, you will automatically get a reply message to the same node.

You can also do uibuilder.setOriginator('<originator_node_id>') (obviously replacing the id with an actual id of a uib-sender node instance or picking one up from a received msg as above. This sets ALL sent messages from your client to go back to the sender node.

I will add a better example and suitable template as soon as I get a chance.

Have a play if you have time and let me know what you think. I'm pretty pleased with it so far. It seems to work OK but there is still a fair bit to do in order to get it ready to handle automated component messaging.

Some of the things still to do:

  • Work out the best way to map from a uibuilder-compatible node (like uib-sender) to a specific on-page component instance.
  • Decide whether uibuilder control messages should also be routable back to sender nodes (currently all control messages go back to the uibuilder node).
  • Work out a standard method for a node to tell the front-end what component needs to be loaded.
  • Work out a standard method for the front-end library to lazy-load components which may (or may not) be defined in a node
  • Work out a standard way for a node to provide a folder of web resources (including maybe web or front-end framework components) to uibuilder front-ends. Not only adding the folder(s) to uibuilder's web server but also automating the load of specific resources.

Then there is still a bunch of work to do finishing off the editor rework, updating package management to allow scoped packages, GitHub packages and specific package versions to be installed along with indicators and controls for updates needed. Then there is the security stuff that I've left alone for a bit in order to try and get some more inspiration.

Anyway, install the vNext branch direct from GitHub if you want to have a go.

Without a doubt, when vNext is released, it will be uibuilder v5.

1 Like