@flowfuse/node-red-dashboard 1.31.1-e3609ab-202609141637.0 → 1.32.0

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/store/data.js

@@ -1,3 +1,5 @@
+const { isClientScoped } = require('../utils/index.js')
+
 const data = {}
 
 const config = {
@@ -19,7 +21,7 @@ function canSaveInStore (base, node, msg) {
 
     if (constrained.includes(node.type)) {
         // core check
-        if (msg._client?.socketId) {
+        if (isClientScoped(msg)) {
             // we are in a node type that allows for definition of specific clients,
             // and a client has been defined
             checks.push(false)

package/nodes/store/state.js

@@ -1,5 +1,7 @@
 // Store to manage any dynamic properties set
 
+const { isClientScoped } = require('../utils/index.js')
+
 const state = {}
 const config = {
     RED: null
@@ -18,7 +20,7 @@ function canSaveInStore (base, node, msg) {
         // core check
         if (base.acceptsClientConfig.includes(node.type)) {
             // we are in a node type that allows for definition of specific clients,
-            if (msg._client?.socketId) {
+            if (isClientScoped(msg)) {
                 // and a client has been defined
                 checks.push(false)
             } else {

package/nodes/utils/index.js

@@ -40,6 +40,30 @@ 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)
+}
+
+const CLIENT_TARGETS = {
+    socketId: (conn) => conn.id,
+    clientId: (conn) => conn._clientId
+}
+
+function clientTargets (msg) {
+    return Object.entries(CLIENT_TARGETS)
+        .map(([field, connValue]) => ({ value: normalizeClientId(msg?._client?.[field]), connValue }))
+        .filter((target) => target.value !== undefined)
+}
+
+function isClientScoped (msg) {
+    return clientTargets(msg).length > 0
+}
+
+function matchesClient (conn, msg) {
+    return clientTargets(msg).every((target) => target.value === target.connValue(conn))
+}
+
 /**
  * Adds socket/client data to a msg payload, if enabled
  *
@@ -60,7 +84,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 +152,8 @@ module.exports = {
     appendTopic,
     getTopic,
     addConnectionCredentials,
+    normalizeClientId,
+    isClientScoped,
+    matchesClient,
     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_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.1-e3609ab-202609141637.0",
+    "version": "1.32.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,7 +98,7 @@
         "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",