@flowfuse/node-red-dashboard 1.31.0 → 1.31.1-0abe89c-202609211346.0

package/nodes/config/ui_base.js

@@ -4,9 +4,10 @@ const path = require('path')
 const axios = require('axios')
 
 const v = require('../../package.json').version
+const { createClientStore } = require('../store/clients.js')
 const datastore = require('../store/data.js')
 const statestore = require('../store/state.js')
-const { appendTopic, addConnectionCredentials, getThirdPartyWidgets } = require('../utils/index.js')
+const { appendTopic, addConnectionCredentials, normalizeClientId, getThirdPartyWidgets } = require('../utils/index.js')
 
 // from: https://stackoverflow.com/a/28592528/3016654
 function join (...paths) {
@@ -59,6 +60,7 @@ module.exports = function (RED) {
         ioServer: null,
         /** @type {Object.<string, Socket>} */
         connections: {},
+        clientStore: createClientStore(),
         settings: {},
         contribs: {}
     }
@@ -413,6 +415,7 @@ module.exports = function (RED) {
                 socket.on('widget-action', onAction.bind(null, socket))
                 socket.on('widget-change', onChange.bind(null, socket))
                 socket.on('widget-load', onLoad.bind(null, socket))
+                socket.on('disconnect', () => uiShared.clientStore.disconnect(socket._clientId, socket.id))
             }
         }
         /** @type {NodeJS.Timeout} */
@@ -472,6 +475,10 @@ module.exports = function (RED) {
                 // we only send comms on the connection that matches that id
                 checks.push(msg._client?.socketId === conn.id)
             }
+            if (msg._client?.clientId) {
+                // clientId is the stable per-client key (spans a client's tabs/reconnects)
+                checks.push(normalizeClientId(msg._client.clientId) === conn._clientId)
+            }
             // ensure all checks validate sending this
             return !checks.length || !checks.includes(false)
         }
@@ -591,6 +598,7 @@ module.exports = function (RED) {
             socket.on('disconnect', reason => {
                 cleanupEventHandlers(socket)
                 delete uiShared.connections[socket.id]
+                uiShared.clientStore.disconnect(socket._clientId, socket.id)
                 node.log(`Disconnected ${socket.id} due to ${reason}`)
             })
         }
@@ -606,6 +614,9 @@ module.exports = function (RED) {
             // node.connections[socket.id] = socket // store the connection for later use
             uiShared.connections[socket.id] = socket // store the connection for later use
 
+            socket._clientId = normalizeClientId(socket.handshake?.query?.clientId)
+            uiShared.clientStore.connect(socket._clientId, socket.id)
+
             emitConfig(socket)
 
             // clean up then re-register listeners
@@ -846,6 +857,9 @@ module.exports = function (RED) {
         node.on('close', (removed, done) => {
             uiShared.ioServer?.off('connection', onConnection)
             for (const conn of Object.values(uiShared.connections)) {
+                if (removed && conn._baseId === node.id) {
+                    uiShared.clientStore.dropSocket(conn._clientId, conn.id)
+                }
                 cleanupEventHandlers(conn)
             }
             close(node, function (err) {

package/nodes/store/clients.js

@@ -0,0 +1,71 @@
+const { EventEmitter } = require('events')
+
+const DEFAULT_GRACE_MS = 20000
+
+/**
+ * Tracks client presence across reconnects (socket.id churns every reconnect; clientId is stable).
+ * A client may hold several live sockets (one per tab); events fire on its socket count crossing
+ * zero, not per socket. Emits { event, clientId, socketId? }:
+ *   connected:   count 0 -> 1, no grace pending (new client)
+ *   reconnected: count 0 -> 1 during the grace window (returned before being declared gone)
+ *   gone:        count -> 0 and the grace window elapses
+ * Extra tabs (1 -> 2, 2 -> 1) emit nothing; the client is still present.
+ */
+function createClientStore ({ graceMs = DEFAULT_GRACE_MS, setTimeoutFn = setTimeout, clearTimeoutFn = clearTimeout } = {}) {
+    const clients = {} // clientId -> { sockets: Set<socketId>, graceTO }
+    const events = new EventEmitter()
+    events.setMaxListeners(0)
+
+    function connect (clientId, socketId) {
+        if (!clientId) { return }
+        let entry = clients[clientId]
+        const returning = !!(entry && entry.graceTO)
+        if (!entry) {
+            entry = clients[clientId] = { sockets: new Set(), graceTO: null }
+        }
+        if (entry.graceTO) {
+            clearTimeoutFn(entry.graceTO)
+            entry.graceTO = null
+        }
+        const wasEmpty = entry.sockets.size === 0
+        entry.sockets.add(socketId)
+        if (wasEmpty) {
+            events.emit('client', { event: returning ? 'reconnected' : 'connected', clientId, socketId })
+        }
+    }
+
+    function disconnect (clientId, socketId) {
+        if (!clientId) { return }
+        const entry = clients[clientId]
+        if (!entry) { return }
+        entry.sockets.delete(socketId)
+        if (entry.sockets.size === 0 && !entry.graceTO) {
+            entry.graceTO = setTimeoutFn(() => {
+                delete clients[clientId]
+                events.emit('client', { event: 'gone', clientId })
+            }, graceMs)
+            if (typeof entry.graceTO?.unref === 'function') { entry.graceTO.unref() }
+        }
+    }
+
+    function dropSocket (clientId, socketId) {
+        if (!clientId) { return }
+        const entry = clients[clientId]
+        if (!entry) { return }
+        entry.sockets.delete(socketId)
+        if (entry.sockets.size === 0) {
+            if (entry.graceTO) { clearTimeoutFn(entry.graceTO) }
+            delete clients[clientId]
+        }
+    }
+
+    function list () {
+        return Object.entries(clients)
+            .filter(([, entry]) => entry.sockets.size > 0)
+            .map(([clientId, entry]) => ({ clientId, socketId: entry.sockets.values().next().value }))
+    }
+
+    return { connect, disconnect, dropSocket, list, events }
+}
+
+module.exports = { createClientStore }

package/nodes/utils/index.js

@@ -40,6 +40,11 @@ async function getTopic (RED, config, wNode, msg) {
     return topic
 }
 
+function normalizeClientId (raw) {
+    if (Array.isArray(raw)) { raw = raw[0] }
+    return (raw === undefined || raw === null || raw === '') ? undefined : String(raw)
+}
+
 /**
  * Adds socket/client data to a msg payload, if enabled
  *
@@ -60,7 +65,8 @@ function addConnectionCredentials (RED, msg, conn, config) {
                 ...item._client,
                 ...{
                     socketId: conn.id,
-                    socketIp: conn.handshake?.address
+                    socketIp: conn.handshake?.address,
+                    clientId: normalizeClientId(conn.handshake?.query?.clientId)
                 }
             }
             return item
@@ -127,5 +133,6 @@ module.exports = {
     appendTopic,
     getTopic,
     addConnectionCredentials,
+    normalizeClientId,
     getThirdPartyWidgets
 }

package/nodes/widgets/locales/en-US/ui_control.json

@@ -7,7 +7,8 @@
         "events": {
             "all": "All Events",
             "change": "Page/Tab Change Events Only",
-            "connect": "Connection Events Only"
+            "connect": "Connection Events Only",
+            "clients": "Client Presence Events Only"
         }
     }
   }

package/nodes/widgets/ui_chart.js

@@ -63,10 +63,12 @@ module.exports = function (RED) {
                 const ago = (removeOlder * removeOlderUnit) * 1000 // milliseconds ago
                 const cutOff = (new Date()).getTime() - ago
                 const filterFn = (msg) => {
-                    let timestamp = msg._datapoint.x
+                    // msg._datapoint may be a single point or, in the case of multiple series in one msg, an array
+                    // if it is an array then all the elements will have the same timestamp so use the first one
+                    let timestamp = Array.isArray(msg._datapoint) ? msg._datapoint[0]?.x : msg._datapoint.x
                     // is x already a millisecond timestamp?
-                    if (typeof (msg._datapoint.x) === 'string') {
-                        timestamp = (new Date(msg._datapoint.x)).getTime()
+                    if (typeof (timestamp) === 'string') {
+                        timestamp = (new Date(timestamp)).getTime()
                     }
                     return timestamp > cutOff
                 }
@@ -165,6 +167,8 @@ module.exports = function (RED) {
                         // Deep merge new options in with old
                         const mergedOptions = deepMerge(currentOptions, updates.chartOptions)
                         statestore.set(group.getBase(), node, msg, 'chartOptions', mergedOptions)
+                        // pass the full set to the clients so they don't need to do the merge
+                        msg.ui_update.chartOptions = mergedOptions
                     }
                 }
 

package/nodes/widgets/ui_control.html

@@ -24,7 +24,7 @@
             oneditprepare: function () {
                 const node = this
                 const sel = $('#node-input-events')
-                for (const name of ['all', 'change', 'connect']) {
+                for (const name of ['all', 'change', 'connect', 'clients']) {
                     const text = c_('events.' + name)
                     $('<option/>').val(name).text(text).appendTo(sel)
                 }

package/nodes/widgets/ui_control.js

@@ -411,7 +411,35 @@ module.exports = function (RED) {
             node.error('No UI configured')
         }
 
+        let onClientEvent = null
+        let clientEventStore = null
+        if (ui && (config.events === 'all' || config.events === 'clients')) {
+            clientEventStore = ui.uiShared?.clientStore
+            if (clientEventStore) {
+                onClientEvent = (e) => {
+                    const wNode = RED.nodes.getNode(node.id)
+                    if (wNode && typeof wNode.send === 'function') {
+                        const client = { clientId: e.clientId }
+                        if (e.socketId) { client.socketId = e.socketId }
+                        let msg = { payload: 'client-' + e.event, _client: client }
+                        const conn = e.socketId ? ui.uiShared?.connections?.[e.socketId] : null
+                        if (conn) { msg = addConnectionCredentials(RED, msg, conn, ui) }
+                        wNode.send(msg)
+                    }
+                }
+                clientEventStore.events.on('client', onClientEvent)
+                setImmediate(() => {
+                    for (const c of clientEventStore.list()) {
+                        onClientEvent({ event: 'connected', clientId: c.clientId, socketId: c.socketId })
+                    }
+                })
+            }
+        }
+
         node.on('close', function (removed, done) {
+            if (onClientEvent && clientEventStore) {
+                clientEventStore.events.off('client', onClientEvent)
+            }
             if (removed) {
                 // handle node being removed
                 ui?.deregister(null, null, node)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flowfuse/node-red-dashboard",
-    "version": "1.31.0",
+    "version": "1.31.1-0abe89c-202609211346.0",
     "description": "FlowFuse Dashboard - A collection of Node-RED nodes that provide functionality to build your own UI applications (inc. forms, buttons, charts).",
     "keywords": [
         "node-red"
@@ -98,12 +98,12 @@
         "marked-highlight": "^2.2.3",
         "medium-zoom": "^1.1.0",
         "mermaid": "^11.12.2",
-        "mocha": "^11.7.5",
+        "mocha": "^12.0.1",
         "node-red": "^4.1.8",
         "node-red-node-test-helper": "^0.3.5",
         "npm-run-all": "^4.1.5",
         "sass": "^1.96.0",
-        "sharp": "^0.34.5",
+        "sharp": "^0.35.4",
         "should": "^13.2.3",
         "should-sinon": "^0.0.6",
         "sinon": "^21.0.0",
@@ -167,7 +167,7 @@
         },
         "esbuild": ">=0.25.0",
         "cross-spawn": "~7.0.5",
-        "js-yaml": ">=4.1.1",
+        "js-yaml": ">=5.4.1",
         "tar": ">=7.5.4"
     }
 }

package/dist/assets/abnfDiagram-N423BO3Z-BOzAedUe.js

@@ -1 +0,0 @@
-import{g as p,r as u,d as a}from"./chunk-6Q2QTUOP-DpGB6o5S.js";import{p as f}from"./chunk-JWPE2WC7-UNqcBwu_.js";import{_ as n,l as o}from"./mermaid-CX4mRs5N.js";import{M as c,b as d}from"./cynefin-VYW2F7L2-BDPznSFQ.js";var v=d().RailroadAbnf.parser.LangiumParser,l=n(e=>{const r=e.alternatives.map(g);return r.length===1?r[0]:{type:"choice",alternatives:r}},"transformAlternation"),g=n(e=>{const r=e.elements.map(y);return r.length===1?r[0]:{type:"sequence",elements:r}},"transformConcatenation"),b=n(e=>{if(e.includes("*")){const[t,s]=e.split("*"),i=t?parseInt(t,10):0,m=s?parseInt(s,10):1/0;return{min:i,max:m}}const r=parseInt(e,10);return{min:r,max:r}},"parseRepeat"),y=n(e=>{const r=A(e.primary);if(!e.repeat)return r;const{min:t,max:s}=b(e.repeat);return t===0&&s===1?{type:"optional",element:r}:{type:"repetition",element:r,min:t,max:s}},"transformElement"),A=n(e=>{switch(e.$type){case"AbnfStringLiteral":return{type:"terminal",value:e.value};case"AbnfNumVal":return{type:"terminal",value:e.value};case"AbnfRuleName":return{type:"nonterminal",name:e.name};case"AbnfGroup":return l(e.element);case"AbnfOptionalGroup":return{type:"optional",element:l(e.element)};default:throw new Error(`Unsupported ABNF primary node: ${e.$type}`)}},"transformPrimary"),P=n(e=>({name:e.name,definition:l(e.definition)}),"transformRule"),h=n(e=>{f(e,a),e.title&&a.setTitle(e.title),e.rules.map(r=>a.addRule(P(r)))},"populateDb"),R={parse:n(e=>{a.clear(),o.debug("[ABNF Parser] Starting Langium parse");const r=v.parse(e);if(r.lexerErrors.length>0||r.parserErrors.length>0)throw new c(r);const t=r.value;o.debug("[ABNF Parser] Parsed rules:",t.rules.length),h(t),o.debug("[ABNF Parser] Parse complete")},"parse"),parser:{yy:a}},w={parser:R,db:a,renderer:u,styles:p};export{w as diagram};