- Added devtools reconnection for frontend and for plugin

GerasNyx · GerasNyx · commit 5563347557db · 2025-02-24T23:56:40.000+01:00
diff --git a/packages/devtools-plugin/src/devtools.event.handler.ts b/packages/devtools-plugin/src/devtools.event.handler.ts
@@ -31,7 +31,7 @@ export class DevtoolsEventHandler {
 
     this.socketEmitter = this.socket.createEmitter<any>()({ topic: "DEVTOOLS_PLUGIN_EMITTER" });
     this.socketListener = this.socket.createListener<any>()({ topic: "DEVTOOLS_PLUGIN_LISTENER" });
-    this.socket.connect().then(() => console.log("CONNECTED"));
+    this.socket.connect();
     this.socket.onDisconnected(() => {
       // TODO handle reconnection?
     });
@@ -41,8 +41,6 @@ export class DevtoolsEventHandler {
     this.socket.onConnected(() => {
       this.isConnected = true;
       while (this.eventQueue.length > 0) {
-        // TODO - optimize with Dequeue to have O(1)
-        // TODO - add timestamps for particular events.
         const nextEvent = this.eventQueue.shift();
         this.socketEmitter.emit({ payload: nextEvent });
       }
diff --git a/packages/devtools/__tests__/helpers/helpers.ts b/packages/devtools/__tests__/helpers/helpers.ts
@@ -16,15 +16,15 @@ export const connectDevtoolsClient = ({
 } = {}) => {
   const client = new Client({ url: baseUrl });
 
-  const devtools = devtoolsPlugin({
+  const plugin = devtoolsPlugin({
     appName: clientName,
     socketAddress,
     socketPort,
   });
 
-  client.addPlugin(devtools);
+  client.addPlugin(plugin);
 
-  return client;
+  return { client, plugin };
 };
 
 export const connectDevtoolsFrontend = async ({
@@ -34,22 +34,20 @@ export const connectDevtoolsFrontend = async ({
   socketAddress?: string;
   socketPort?: number;
 }) => {
-  const initSocket = new Socket({
+  let initSocket = new Socket({
     url: `ws://${socketAddress}:${socketPort}`,
     adapterOptions: { autoConnect: false },
   }).setDebug(true);
-  const socketConnected = initSocket.setQueryParams({ connectionName: ConnectionName.HF_DEVTOOLS_APP });
+  initSocket = initSocket.setQueryParams({ connectionName: ConnectionName.HF_DEVTOOLS_APP });
 
-  await socketConnected.connect();
+  await initSocket.connect();
+  return initSocket;
 };
 
 export const listenForServerMessage = async (wss: any) => {
   return new Promise((resolve) => {
     wss.on("connection", (wsConn, request) => {
-      console.log("CONNECTION LISTEN FOR SERVER", request.url);
       wsConn.on("message", (message) => {
-        console.log("CONNECTION LISTEN FOR SERVER MESSAGE", request.url);
-        console.log("MESSAGE", message);
         return resolve(message);
       });
     });
diff --git a/packages/devtools/__tests__/server/server.spec.ts b/packages/devtools/__tests__/server/server.spec.ts
@@ -1,5 +1,6 @@
+import { MessageType } from "types/messages.types";
 import { startServer } from "../../src/server";
-import { connectDevtoolsFrontend, connectDevtoolsClient } from "../helpers/helpers";
+import { connectDevtoolsFrontend, connectDevtoolsClient, listenForServerMessage } from "../helpers/helpers";
 import { waitFor } from "@testing-library/react";
 // TODO handle lost connection from client
 describe("Devtools Socket Server", () => {
@@ -15,4 +16,39 @@ describe("Devtools Socket Server", () => {
       await waitFor(() => expect(Object.keys(connections || {}).length).toBeGreaterThan(0));
     });
   });
+  describe("If connection to the frontend app is established and then disconnected and reconnected again", () => {
+    it("Should allow for reconnection", async () => {
+      let receivedMessage = null;
+      const { DEVTOOLS_FRONTEND_WS_CONNECTION, connections } = (await startServer()) || {};
+
+      const socket = await connectDevtoolsFrontend({
+        socketAddress: "localhost",
+        socketPort: 1234,
+      });
+      socket.onMessage((message) => {
+        receivedMessage = message;
+        return message;
+      });
+      const { plugin } = await connectDevtoolsClient();
+      await waitFor(() => expect(Object.keys(connections || {}).length).toBeGreaterThan(0));
+
+      expect(DEVTOOLS_FRONTEND_WS_CONNECTION).toBeDefined();
+      expect(connections?.["HF_DEVTOOLS_CLIENT_test-client"].ws).toBeDefined();
+
+      await plugin.data.emitter?.socket.disconnect();
+      await waitFor(() => expect(connections?.["HF_DEVTOOLS_CLIENT_test-client"].ws).toBeNull);
+      await waitFor(() => expect(receivedMessage).toBeDefined);
+      expect(receivedMessage).toEqual({
+        event: { messageType: MessageType.DEVTOOLS_CLIENT_HANGUP, connectionName: "HF_DEVTOOLS_CLIENT_test-client" },
+      });
+
+      await socket.disconnect();
+      expect(DEVTOOLS_FRONTEND_WS_CONNECTION).toBeNull();
+
+      await socket.connect();
+      await plugin.data.emitter?.socket.connect();
+      expect(DEVTOOLS_FRONTEND_WS_CONNECTION).toBeDefined();
+      await waitFor(() => expect(connections?.["HF_DEVTOOLS_CLIENT_test-client"].ws).toBeDefined);
+    });
+  });
 });
diff --git a/packages/devtools/src/server/index.ts b/packages/devtools/src/server/index.ts
@@ -6,8 +6,10 @@ import { SocketTopics } from "../sockets/topics";
 import { MessageType, MessageTypes } from "../types/messages.types";
 import { ConnectionName } from "../sockets/connection.name";
 
-const sendHandshake = (devtoolsAppConnection: WebSocket, connectionName: string) => {
-  devtoolsAppConnection.send(
+// TODO - handle message with info about lostConnection for a given app when connection is lost on frontend side.
+
+const initializeFrontendForConnection = (devtoolsAppConnection: WebSocket, connectionName: string) => {
+  devtoolsAppConnection?.send(
     JSON.stringify({
       ...{
         topic: SocketTopics.DEVTOOLS_APP_MAIN_LISTENER,
@@ -17,26 +19,38 @@ const sendHandshake = (devtoolsAppConnection: WebSocket, connectionName: string)
   );
 };
 
-// TODO - add heartbeat + cleanup of hangup connections.
+const getConnectionName = (requestUrl: string) => {
+  const queryParams = url.parse(requestUrl, true).query;
+  const { connectionName } = (queryParams || {}) as { connectionName: string };
+  return connectionName;
+};
 
-const connections: Record<string, { ws: WebSocket; handshake: "pending" | "sent" | "confirmed"; events: any[] }> = {};
+const connections: Record<
+  string,
+  {
+    ws: WebSocket | null;
+    frontendStatus: "pending" | "sent" | "initialized";
+    events: any[];
+    status: "connected" | "hangup";
+  }
+> = {};
 const addConnection = (devtoolsAppConnection: WebSocket | null, connectionName: string, connection: WebSocket) => {
   if (!connections[connectionName]) {
-    connections[connectionName] = { ws: connection, handshake: "pending", events: [] };
+    connections[connectionName] = { ws: connection, frontendStatus: "pending", events: [], status: "connected" };
   } else {
     connections[connectionName].ws = connection;
   }
   if (devtoolsAppConnection) {
-    sendHandshake(devtoolsAppConnection, connectionName);
-    connections[connectionName].handshake = "sent";
+    initializeFrontendForConnection(devtoolsAppConnection, connectionName);
+    connections[connectionName].frontendStatus = "sent";
   }
 };
 
-const sendPendingHandshakes = (devtoolsAppConnection: WebSocket) => {
+const initializePendingFrontends = (devtoolsAppConnection: WebSocket) => {
   Object.keys(connections).forEach((connectionName) => {
-    if (connections[connectionName].handshake === "pending") {
-      sendHandshake(devtoolsAppConnection, connectionName);
-      connections[connectionName].handshake = "sent";
+    if (connections[connectionName].frontendStatus === "pending") {
+      initializeFrontendForConnection(devtoolsAppConnection, connectionName);
+      connections[connectionName].frontendStatus = "sent";
     }
   });
 };
@@ -53,22 +67,45 @@ export const startServer = async (port = 1234) => {
   let DEVTOOLS_FRONTEND_WS_CONNECTION: WebSocket | null = null;
 
   wss.on("connection", (wsConn, request) => {
-    const queryParams = url.parse(request.url!, true).query;
-    const { connectionName } = queryParams as { connectionName: string };
+    const connectionName = getConnectionName(request.url || "");
     if (!connectionName) {
       console.error("MISSING CONNECTION NAME", request.url);
       return;
     }
-    // TODO HANDLE REFRESHING CONNECTION AND HANGUP
     if (connectionName && connectionName === ConnectionName.HF_DEVTOOLS_APP) {
       DEVTOOLS_FRONTEND_WS_CONNECTION = wsConn;
-      sendPendingHandshakes(DEVTOOLS_FRONTEND_WS_CONNECTION);
+      initializePendingFrontends(DEVTOOLS_FRONTEND_WS_CONNECTION);
     }
     if (connectionName && !Array.isArray(connectionName) && connectionName.startsWith("HF_DEVTOOLS_CLIENT")) {
       addConnection(DEVTOOLS_FRONTEND_WS_CONNECTION, connectionName, wsConn);
     }
     wsConn.on("error", console.error);
-
+    wsConn.on("close", () => {
+      const closedConnectionName = getConnectionName(request.url || "");
+      if (!closedConnectionName) {
+        return;
+      }
+      if (closedConnectionName === ConnectionName.HF_DEVTOOLS_APP) {
+        DEVTOOLS_FRONTEND_WS_CONNECTION = null;
+      }
+      if (connections[connectionName]) {
+        const hangupConnection = connections[connectionName];
+        hangupConnection.ws = null;
+        hangupConnection.status = "hangup";
+        if (!DEVTOOLS_FRONTEND_WS_CONNECTION) {
+          console.error(`Something went wrong. Connection to devtools frontend and devtools plugin lost.`);
+          return;
+        }
+        DEVTOOLS_FRONTEND_WS_CONNECTION.send(
+          JSON.stringify({
+            ...{
+              topic: SocketTopics.DEVTOOLS_APP_MAIN_LISTENER,
+              data: { messageType: MessageType.DEVTOOLS_CLIENT_HANGUP, connectionName },
+            },
+          }),
+        );
+      }
+    });
     wsConn.on("message", (msg: MessageTypes) => {
       const message = JSON.parse(msg.toString()) as MessageTypes;
       if (!DEVTOOLS_FRONTEND_WS_CONNECTION) {
@@ -80,7 +117,7 @@ export const startServer = async (port = 1234) => {
         case MessageType.HF_DEVTOOLS_EVENT: {
           const { connectionName } = message.data;
           console.log("RECEIVED EVENT FROM DEVTOOLS", message);
-          if (connections[connectionName]) {
+          if (connections[connectionName]?.ws) {
             connections[connectionName].ws.send(
               JSON.stringify({ ...message, topic: SocketTopics.DEVTOOLS_PLUGIN_LISTENER }),
             );
@@ -93,15 +130,15 @@ export const startServer = async (port = 1234) => {
             return;
           }
 
-          connections[message.data.connectionName].handshake = "confirmed";
+          connections[message.data.connectionName].frontendStatus = "initialized";
           const connectionEvents = connections[message.data.connectionName]?.events;
           sendStoredEvents(DEVTOOLS_FRONTEND_WS_CONNECTION, connectionEvents);
 
           return;
         }
         case MessageType.HF_APP_EVENT: {
           const conn = message.data.connectionName;
-          if (connections[conn]?.handshake && DEVTOOLS_FRONTEND_WS_CONNECTION) {
+          if (connections[conn]?.frontendStatus && DEVTOOLS_FRONTEND_WS_CONNECTION) {
             DEVTOOLS_FRONTEND_WS_CONNECTION.send(
               JSON.stringify({ ...message, topic: SocketTopics.DEVTOOLS_APP_CLIENT_LISTENER }),
             );
diff --git a/packages/devtools/src/types/messages.types.ts b/packages/devtools/src/types/messages.types.ts
@@ -19,6 +19,8 @@ export enum EmitableCustomEvents {
 export enum MessageType {
   DEVTOOLS_CLIENT_INIT = "DEVTOOLS_CLIENT_INIT",
   DEVTOOLS_CLIENT_CONFIRM = "DEVTOOLS_CLIENT_CONFIRM",
+  DEVTOOLS_CLIENT_HANGUP = "DEVTOOLS_CLIENT_HANGUP",
+  DEVTOOLS_CLIENT_RECONNECTED = "DEVTOOLS_CLIENT_RECONNECTED",
   HF_APP_EVENT = "HF_APP_EVENT",
   HF_DEVTOOLS_EVENT = "HF_DEVTOOLS_EVENT",
 }
diff --git a/packages/sockets/src/socket/socket.ts b/packages/sockets/src/socket/socket.ts
@@ -87,7 +87,6 @@ export class Socket<Adapter extends SocketAdapterInstance = WebsocketAdapterType
   };
 
   setQueryParams = (queryParams: ExtractAdapterQueryParamsType<Adapter>) => {
-    console.log("SETTING QUERY PARAMS", queryParams);
     this.adapter.setQueryParams(queryParams);
     return this;
   };

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,8 @@ export enum EmitableCustomEvents {`
`19`	`19`	`export enum MessageType {`
`20`	`20`	`DEVTOOLS_CLIENT_INIT = "DEVTOOLS_CLIENT_INIT",`
`21`	`21`	`DEVTOOLS_CLIENT_CONFIRM = "DEVTOOLS_CLIENT_CONFIRM",`
	`22`	`+ DEVTOOLS_CLIENT_HANGUP = "DEVTOOLS_CLIENT_HANGUP",`
	`23`	`+ DEVTOOLS_CLIENT_RECONNECTED = "DEVTOOLS_CLIENT_RECONNECTED",`
`22`	`24`	`HF_APP_EVENT = "HF_APP_EVENT",`
`23`	`25`	`HF_DEVTOOLS_EVENT = "HF_DEVTOOLS_EVENT",`
`24`	`26`	`}`