Message Caching

Update 2023-01-10: uib-cache went live with uibuilder v5 as expected and has been improved since then. Caching leverages Node-RED's native context storage and so can be persistent across restarts if desired. Some of the other uibuilder nodes can also now use the same caching capabilities. uib-cache will continue to improve and so it strongly recommended that you use it rather than creating your own scheme.

Update 2022-01-19: When uibuilder v5 goes live, it will contain a new uib-cache node that will help deal with this issue.

---

One issue with the design uibuilder uses is that, when someone loads a new instance of the front-end, it won't receive any previous messages. This is especially problematic for dashboards. This happens when a user reloads a page as well, all of the dynamic data is lost.

In addition the front-end page is not always ready (or even loaded) when messages are already being received by the node instance.

To combat these issues, we need to somehow cache incoming messages and play them forwards to any new client (or one that is reloaded).

You can either handle this manually or better still, use the companion node node-red-contrib-infocache use the v5 uib-cache node instead. Simply send the control messages from the uibuilder instance to the input of an infocache uib-cache node and it will resend all cached messages back to the individual client when the client is ready to deal with them. Please note that development of the infocache uib-cache node is on hold as there are many edge cases that need handling and I just don't have time to do it justice. Also, using a function node isn't that hard and you can customise it to work exactly as you need it to. Examples for basic caching are available on this WIKI and are included in the Node-RED library for you to import and use.

By default, this will happen when the window.load event fires. But if you are using a front-end library like Riot, Vue, etc. you can override this by setting uibuilder.autoSendReady(false) and then use uibuilder.sendCtrl({'type':'ready for content', 'cache-control':'REPLAY'}) when your app is ready for content (e.g. perhaps at the end of the app.mounted event).

Example without using node-red-contrib-infocache

There is a simple example cache on this WIKI page. It shows how to do a simple cache with just a function node and a loop from the uibuilder control message port.