Merge pull request #632 from FlowFuse/631-custom-ui-event

UI Event: Ensure consistency in API & docs for custom UI Events

docs/nodes/widgets/ui-event.md

@@ -37,8 +37,6 @@ Each time a user views a page, the `ui-event` node will emit:
 ```js
 msg = {
     topic: '$pageview',
-    socketid: '1234',
-    socketip: '127.0.0.1'
     payload: {
         page: {
             name: 'Page Name',
@@ -48,14 +46,31 @@ msg = {
             layout: 'default',
             _groups: []
         }
+    },
+    _client: {
+        socketId: '1234',
     }
 }
 ```
 
 ## Custom Events
 
-In your own `ui-template` nodes, you can emit custom events that will get captured by any `ui-event` node calling the embeded `$socket` operator directly, for example:
+In your own `ui-template` nodes, you can emit custom events that will get captured by any `ui-event` node calling the embeded `$socket` operator directly. 
+
+The `$socket.emit` function takes in 3 arguments:
+
+- The event name, in this case, `ui-event`
+- The `id` of the `ui-event` node you want to emit this to. You can also use `all` to emit to all `ui-event` nodes.
+- The full `msg` you want to send.
+
+So in the case where we want to send to a specific `ui-event` node:
+
+```vue
+<v-btn @click="$socket.emit('ui-event', 'ui-event-node-id', msg)">Send Custom Event</v-btn>
+```
+
+Or, in the case where we brodcast to _all_ `ui-event` nodes:
 
 ```vue
-<v-btn @click="$socket.emit('ui-event', 'custom-event-name', msg)">Send Custom Event</v-btn>
+<v-btn @click="$socket.emit('ui-event', 'all', msg)">Send Custom Event</v-btn>
 ```

nodes/config/ui_base.js

@@ -442,7 +442,7 @@ module.exports = function (RED) {
                                 handler(socket)
                             }
                         } else {
-                            widget._onSocketHandlers = widget._socketIO || {}
+                            widget._onSocketHandlers = widget._onSocketHandlers || {}
                             widget._onSocketHandlers[eventName] = handler.bind(null, socket)
                             socket.on(eventName, widget._onSocketHandlers[eventName])
                         }

nodes/widgets/ui_event.js

@@ -11,17 +11,15 @@ module.exports = function (RED) {
 
         const evts = {
             onSocket: {
-                'ui-event': function (conn, id, evt, payload) {
+                'ui-event': function (conn, id, msg) {
                     const wNode = RED.nodes.getNode(node.id)
                     if (!wNode) {
                         console.log('ui-event node not found', id)
                     }
-                    if (wNode && id === node.id) {
+                    // possible to send to all ui-event nodes,
+                    // or just a specific one specified by id
+                    if ((wNode && id === node.id) || id === 'all') {
                         // this was sent by this particular node
-                        let msg = {
-                            topic: evt,
-                            payload
-                        }
                         msg = addConnectionCredentials(RED, msg, conn, ui)
                         wNode.send(msg)
                     }

ui/src/widgets/ui-event/UIEvent.vue

@@ -23,10 +23,16 @@ export default {
                 // this only fire if we switch between two pages of the same layout type,
                 // the full component isn't torn down, so we can watch for changes
                 const oldMsg = this.createPayload(this.pages[oldVal])
-                this.$socket.emit('ui-event', this.id, '$pageleave', oldMsg)
+                this.$socket.emit('ui-event', this.id, {
+                    topic: '$pageleave',
+                    payload: oldMsg
+                })
 
                 const newMsg = this.createPayload(this.pages[val])
-                this.$socket.emit('ui-event', this.id, '$pageview', newMsg)
+                this.$socket.emit('ui-event', this.id, {
+                    topic: '$pageview',
+                    payload: newMsg
+                })
             }
         }
     },
@@ -47,8 +53,11 @@ export default {
             this.trigger('$pageleave')
         },
         trigger (evt) {
-            const msg = this.createPayload(this.page)
-            this.$socket.emit('ui-event', this.id, evt, msg)
+            const payload = this.createPayload(this.page)
+            this.$socket.emit('ui-event', this.id, {
+                topic: evt,
+                payload
+            })
         },
         createPayload (page) {
             page = { ...page }