feat: display sent and received events

Author: darrachequesne

lib/index.ts

@@ -365,6 +365,31 @@ const registerVerboseListeners = (
       });
     });
 
+    if (nsp !== adminNamespace) {
+      if (typeof socket.onAny === "function") {
+        socket.onAny((...args: any[]) => {
+          adminNamespace.emit(
+            "event_received",
+            nsp.name,
+            socket.id,
+            args,
+            new Date()
+          );
+        });
+      }
+      if (typeof socket.onAnyOutgoing === "function") {
+        socket.onAnyOutgoing((...args: any[]) => {
+          adminNamespace.emit(
+            "event_sent",
+            nsp.name,
+            socket.id,
+            args,
+            new Date()
+          );
+        });
+      }
+    }
+
     socket.on("disconnect", (reason: string) => {
       adminNamespace.emit(
         "socket_disconnected",

lib/typed-events.ts

@@ -63,6 +63,13 @@ export interface ServerEvents {
   ) => void;
   room_joined: (nsp: string, room: string, id: string, timestamp: Date) => void;
   room_left: (nsp: string, room: string, id: string, timestamp: Date) => void;
+  event_received: (
+    nsp: string,
+    id: string,
+    args: any[],
+    timestamp: Date
+  ) => void;
+  event_sent: (nsp: string, id: string, args: any[], timestamp: Date) => void;
 }
 
 export interface ClientEvents {

ui/src/App.vue

@@ -194,6 +194,17 @@ export default {
           this.$store.commit("main/onRoomLeft", { timestamp, nsp, room, id });
         }
       );
+      socket.on("event_received", (nsp, id, args, timestamp) => {
+        this.$store.commit("main/onEventReceived", {
+          timestamp,
+          nsp,
+          id,
+          args,
+        });
+      });
+      socket.on("event_sent", (nsp, id, args, timestamp) => {
+        this.$store.commit("main/onEventSent", { timestamp, nsp, id, args });
+      });
     },
 
     onSubmit(form) {

ui/src/components/EventType.vue

@@ -25,6 +25,10 @@ export default {
           return colors.amber.base;
         case "disconnection":
           return colors.red.base;
+        case "event_received":
+          return colors.blue.base;
+        case "event_sent":
+          return colors.orange.base;
       }
       return colors.gray.base;
     },

ui/src/locales/en.json

@@ -101,7 +101,13 @@
       "connection": "Connection",
       "disconnection": "Disconnection",
       "room_joined": "Room joined",
-      "room_left": "Room left"
-    }
+      "room_left": "Room left",
+      "event_received": "Event received",
+      "event_sent": "Event sent"
+    },
+    "eventName": "Event name",
+    "eventArgs": "Event arguments",
+    "reason": "Reason",
+    "room": "Room"
   }
 }

ui/src/locales/fr.json

@@ -98,7 +98,13 @@
       "connection": "Connexion",
       "disconnection": "Déconnexion",
       "room_joined": "Salle rejointe",
-      "room_left": "Salle quittée"
-    }
+      "room_left": "Salle quittée",
+      "event_received": "Évènement reçu",
+      "event_sent": "Évènement envoyé"
+    },
+    "eventName": "Nom de l'évènement",
+    "eventArgs": "Argument de l'évènement",
+    "reason": "Raison",
+    "room": "Salle"
   }
 }

ui/src/store/modules/main.js

@@ -234,5 +234,27 @@ export default {
         return elem.timestamp < Date.now() - TEN_MINUTES;
       });
     },
+    onEventReceived(state, { timestamp, nsp, id, args }) {
+      const namespace = getOrCreateNamespace(state.namespaces, nsp);
+      const eventName = args.shift();
+      pushEvents(namespace.events, {
+        type: "event_received",
+        timestamp,
+        id,
+        eventName,
+        args,
+      });
+    },
+    onEventSent(state, { timestamp, nsp, id, args }) {
+      const namespace = getOrCreateNamespace(state.namespaces, nsp);
+      const eventName = args.shift();
+      pushEvents(namespace.events, {
+        type: "event_sent",
+        timestamp,
+        id,
+        eventName,
+        args,
+      });
+    },
   },
 };

ui/src/views/Events.vue

@@ -14,6 +14,8 @@
         item-key="eventId"
         :sort-by="['timestamp', 'eventId']"
         :sort-desc="[true, true]"
+        single-expand
+        show-expand
       >
         <template #item.type="{ value }">
           <EventType :type="value" />
@@ -24,6 +26,51 @@
             value
           }}</router-link>
         </template>
+
+        <template #item.args="{ item, value }">
+          <span v-if="isExpandable(item)">
+            {{ $t("events.eventName") }}{{ $t("separator")
+            }}<code>{{ item.eventName }}</code>
+          </span>
+          <span v-else-if="item.type === 'disconnection'">
+            {{ $t("events.reason") }}{{ $t("separator")
+            }}<code>{{ value }}</code>
+          </span>
+          <span
+            v-else-if="item.type === 'room_joined' || item.type === 'room_left'"
+          >
+            {{ $t("events.room") }}{{ $t("separator") }}<code>{{ value }}</code>
+          </span>
+          <span v-else>
+            {{ value }}
+          </span>
+        </template>
+
+        <template #item.data-table-expand="{ item, isExpanded, expand }">
+          <v-btn
+            @click="expand(true)"
+            v-if="isExpandable(item) && !isExpanded"
+            icon
+          >
+            <v-icon>mdi-chevron-down</v-icon>
+          </v-btn>
+          <v-btn
+            @click="expand(false)"
+            v-if="isExpandable(item) && isExpanded"
+            icon
+          >
+            <v-icon>mdi-chevron-up</v-icon>
+          </v-btn>
+        </template>
+
+        <template #expanded-item="{ headers, item }">
+          <td :colspan="headers.length">
+            <div class="ma-3">
+              {{ $t("events.eventArgs") }}{{ $t("separator") }}
+              <pre><code>{{ item.args }}</code></pre>
+            </div>
+          </td>
+        </template>
       </v-data-table>
     </v-card>
   </div>
@@ -42,7 +89,7 @@ export default {
   data() {
     return {
       footerProps: {
-        "items-per-page-options": [20, 100, -1],
+        "items-per-page-options": [-1],
       },
     };
   },
@@ -73,10 +120,10 @@ export default {
           sortable: false,
         },
         {
-          text: this.$t("args"),
           value: "args",
           sortable: false,
         },
+        { text: "", value: "data-table-expand" },
       ];
     },
     ...mapGetters("main", ["events"]),
@@ -92,6 +139,9 @@ export default {
         params: { nsp: this.selectedNamespace.name, id: sid },
       };
     },
+    isExpandable(item) {
+      return ["event_received", "event_sent"].includes(item.type);
+    },
   },
 };
 </script>