feat: add socket data in the UI (#37)

Related: https://github.com/socketio/socket.io-admin-ui/issues/32

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 = {
+    const createProxy = (obj: any) => {
-      clientId: clientId.substring(0, 12), // this information is quite sensitive
+      if (typeof obj !== "object") {
-      transport: socket.conn.transport.name,
+        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(
     {

lib/typed-events.ts

@@ -26,6 +26,7 @@ export interface SerializedSocket {
   clientId: string;
   transport: string;
   nsp: string;
+  data: any;
   handshake: any;
   rooms: string[];
 }

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>

ui/src/locales/en.json

@@ -14,6 +14,7 @@
   "status": "Status",
   "connected": "connected",
   "disconnected": "disconnected",
+  "data": "Data",
   "connection": {
     "title": "Connection",
     "serverUrl": "Server URL",