From 3773fe4b1cbf2206708e1f21ce65f430a522527f Mon Sep 17 00:00:00 2001
From: Corey <40738690+C1200@users.noreply.github.com>
Date: Tue, 19 Apr 2022 13:01:05 +0100
Subject: [PATCH] feat: add socket data in the UI (#37)

Related: https://github.com/socketio/socket.io-admin-ui/issues/32
---
 lib/index.ts                               | 38 ++++++++++++++++++----
 lib/typed-events.ts                        |  1 +
 ui/src/components/Socket/SocketDetails.vue |  8 +++++
 ui/src/locales/en.json                     |  1 +
 4 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/lib/index.ts b/lib/index.ts
index 24e792c..eea78c3 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -299,15 +299,35 @@ const registerListeners = (
   adminNamespace: Namespace<{}, ServerEvents>,
   nsp: Namespace
 ) => {
-  nsp.on("connection", (socket) => {
+  nsp.prependListener("connection", (socket) => {
     // @ts-ignore
     const clientId = socket.client.id;
-    socket.data = socket.data || {};
-    socket.data._admin = {
-      clientId: clientId.substring(0, 12), // this information is quite sensitive
-      transport: socket.conn.transport.name,
+
+    const createProxy = (obj: any) => {
+      if (typeof obj !== "object") {
+        return obj;
+      }
+      return new Proxy(obj, {
+        set(target: any, p: string | symbol, value: any): boolean {
+          target[p] = createProxy(value);
+
+          adminNamespace.emit("socket_updated", {
+            id: socket.id,
+            nsp: nsp.name,
+            data: serializeData(socket.data),
+          });
+          return true;
+        },
+      });
     };
 
+    socket.data = createProxy({
+      _admin: {
+        clientId: clientId.substring(0, 12), // this information is quite sensitive
+        transport: socket.conn.transport.name,
+      },
+    });
+
     adminNamespace.emit("socket_connected", serialize(socket, nsp.name));
 
     socket.conn.on("upgrade", (transport: any) => {
@@ -319,7 +339,7 @@ const registerListeners = (
       });
     });
 
-    socket.on("disconnect", (reason) => {
+    socket.on("disconnect", (reason: string) => {
       adminNamespace.emit("socket_disconnected", nsp.name, socket.id, reason);
     });
   });
@@ -350,6 +370,7 @@ const serialize = (
     clientId,
     transport,
     nsp,
+    data: serializeData(socket.data),
     handshake: {
       address,
       headers: socket.handshake.headers,
@@ -365,6 +386,11 @@ const serialize = (
   };
 };
 
+const serializeData = (data: any) => {
+  const { _admin, ...obj } = data;
+  return obj;
+};
+
 export function instrument(io: Server, opts: Partial<InstrumentOptions>) {
   const options: InstrumentOptions = Object.assign(
     {
diff --git a/lib/typed-events.ts b/lib/typed-events.ts
index e1cbc1c..0df6c71 100644
--- a/lib/typed-events.ts
+++ b/lib/typed-events.ts
@@ -26,6 +26,7 @@ export interface SerializedSocket {
   clientId: string;
   transport: string;
   nsp: string;
+  data: any;
   handshake: any;
   rooms: string[];
 }
diff --git a/ui/src/components/Socket/SocketDetails.vue b/ui/src/components/Socket/SocketDetails.vue
index 19cfd14..704b276 100644
--- a/ui/src/components/Socket/SocketDetails.vue
+++ b/ui/src/components/Socket/SocketDetails.vue
@@ -91,6 +91,14 @@
             <td></td>
           </tr>
 
+          <tr>
+            <td class="key-column">{{ $t("data") }}</td>
+            <td>
+              <pre><code>{{ JSON.stringify(socket.data, null, 2) }}</code></pre>
+            </td>
+            <td></td>
+          </tr>
+
           <tr>
             <td class="key-column">{{ $t("status") }}</td>
             <td>
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index dbf1e6f..41461eb 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -14,6 +14,7 @@
   "status": "Status",
   "connected": "connected",
   "disconnected": "disconnected",
+  "data": "Data",
   "connection": {
     "title": "Connection",
     "serverUrl": "Server URL",