-
-
Notifications
You must be signed in to change notification settings - Fork 85
Control Message Structure
This page is to be used for design notes around the control channel.
The control channel is a separate Socket.IO channel to the data channels (The server channel sends from the server to the client, the client channel goes from the client to the server). Each instance of a uibuilder node gets it own Socket.IO session and you can limit messages to specific clients by using the _clientId (delete it if you want to send a message from a specific client to all clients connected to a node instance).
The control channel is there to keep control information separate to the general data.
The general structure of a control message is:
{ "type": "<text>" }
But other properties can be added as required.
Initially, only 2 control messages have been used. Two more have now been added. Each of these is (v0.4.8+) copied to output port 2 - you will need debug nodes to show the whole msg as msg.payload is not used. msg.topic is also added from the last input msg or from the node itself.
-
type =
server connected
(server -> client): Sent when Socket.IO connects to client.Additional properties:
-
"debug": <boolean>
- tells the client whether uibuilderfe.js should use debug mode or not -
"_socketId": socket.id
- ensures control msg only sent to the correct client
-
-
type =
shutdown
(server -> client): Sent when the node instance is either redeployed or removed from Node-RED. -
type =
client disconnect
(server only)Additional properties:
-
"_socketId": socket.id
- so we know which client disconnected -
"reason": <string>
- The disconnection reason
-
-
type =
socket error
(server only)Additional properties:
-
"_socketId": socket.id
- so we know which client errored -
"error": <string>
- The error
-
-
type =
ready for content
(client -> server): Indicates the browser client is ready to receive messages from the server.(uibuilderfe v0.4.8+) By default, this is sent when the browser's window.load event fires indicating that the DOM is fully loaded as are all of the external resources. For some front-end libraries, even this may be too soon. So you can turn off the default with
uibuilder.utoSendReady(false)
and then send this message yourself - possible at the end of the FE libraries "mounted" event.Additional properties:
-
"cache-control": "REPLAY"
- to be used with the companion node node-red-contrib-infocache. This will trigger a replay of all cached messages for this client. -
"_socketId": socket.id
- so we know which client (re)loaded & is ready for messages.
-
You can also send messages manually from the client to the server by using uibuilder.sendCtrl(msg)
(uibuilderfe v0.4.8+).
Notes:
- If you reload a connected client page, you get a disconnect msg followed by a connect but they have different client ids because Socket.IO assigns a new one on connect.
- On first loading or on reloading a page, you will get a 'ready for content' control message sent from the client after the servers 'connected' message.
Some ideas
- Send standard information to new client connections
- Keep track of utilisation of your web app (analytics, charging, ...)
- Send alerts if too many clients connect (or too few)
Please add any questions you want answering here - please start them with your initials
-
JK: Should the server have a 2nd output port for passing on control messages? OR should they be passed out of the standard port. If using the standard port, should there be an option to turn them on/off?
CDL: I suggest the 2nd output port solution. I can't see any reason to not do that, and if the user wants to use the messages then it is simpler if they appear on a different port.
JK: Thanks Colin, I agree.
Please add any ideas you have here for further discussion and design. Please start with your initials.
NOTE: I've moved the comments on caching to its own page.
Please feel free to add comments to the page (clearly mark with your initials & please add a commit msg so we know what has changed). You can contact me in the Discourse forum, or raise an issue here in GitHub! I will make sure all comments & suggestions are represented here.
-
Walkthrough 🔗 Getting started
-
In Progress and To Do 🔗 What's coming up for uibuilder?
-
Awesome uibuilder Examples, tutorials, templates and references.
-
How To
- How to send data when a client connects or reloads the page
- Send messages to a specific client
- Cache & Replay Messages
- Cache without a helper node
- Use webpack to optimise front-end libraries and code
- How to contribute & coding standards
- How to use NGINX as a proxy for Node-RED
- How to manage packages manually
- How to upload a file from the browser to Node-RED
-
Vanilla HTML/JavaScript examples
-
VueJS general hints, tips and examples
- Load Vue (v2 or v3) components without a build step (modern browsers only)
- How to use webpack with VueJS (or other frameworks)
- Awesome VueJS - Tips, info & libraries for working with Vue
- Components that work
-
VueJS v3 hints, tips and examples
-
VueJS v2 hints, tips and examples
- Dynamically load .vue files without a build step (Vue v2)
- Really Simple Example (Quote of the Day)
- Example charts using Chartkick, Chart.js, Google
- Example Gauge using vue-svg-gauge
- Example charts using ApexCharts
- Example chart using Vue-ECharts
- Example: debug messages using uibuilder & Vue
- Example: knob/gauge widget for uibuilder & Vue
- Example: Embedded video player using VideoJS
- Simple Button Acknowledgement Example Thanks to ringmybell
- Using Vue-Router without a build step Thanks to AFelix
- Vue Canvas Knob Component Thanks to Klaus Zerbe
-
Examples for other frameworks (check version before trying)
- Basic jQuery example - Updated for uibuilder v6.1
- ReactJS with no build - updated for uibuilder v5/6
-
Examples for other frameworks (may not work, out-of-date)
-
Outdated Pages (Historic only)
- v1 Examples (these need updating to uibuilder v2/v3/v4/v5)