Fix Web Debugging and Other Websocket Endpoints with Metro 0.67

packages/cli-plugin-metro/src/commands/start/runServer.ts

@@ -70,7 +70,12 @@ async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
     );
   }
 
-  const {middleware, attachToServer} = createDevServerMiddleware({
+  const {
+    middleware,
+    websocketEndpoints,
+    messageSocketEndpoint,
+    eventsSocketEndpoint,
+  } = createDevServerMiddleware({
     host: args.host,
     port: metroConfig.server.port,
     watchFolders: metroConfig.watchFolders,
@@ -94,14 +99,13 @@ async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
     secureCert: args.cert,
     secureKey: args.key,
     hmrEnabled: true,
+    websocketEndpoints,
   });
 
-  const {messageSocket, eventsSocket} = attachToServer(serverInstance);
-
-  reportEvent = eventsSocket.reportEvent;
+  reportEvent = eventsSocketEndpoint.reportEvent;
 
   if (args.interactive) {
-    enableWatchMode(messageSocket);
+    enableWatchMode(messageSocketEndpoint);
   }
 
   // In Node 8, the default keep-alive for an HTTP connection is 5 seconds. In

packages/cli-server-api/package.json

@@ -15,13 +15,13 @@
     "nocache": "^3.0.1",
     "pretty-format": "^26.6.2",
     "serve-static": "^1.13.1",
-    "ws": "^1.1.0"
+    "ws": "^7.5.1"
   },
   "devDependencies": {
     "@types/compression": "^1.0.1",
     "@types/connect": "^3.4.33",
     "@types/errorhandler": "^0.0.32",
-    "@types/ws": "^6.0.3"
+    "@types/ws": "^7.4.7"
   },
   "files": [
     "build",

packages/cli-server-api/src/index.ts

@@ -1,5 +1,4 @@
-import http, {Server as HttpServer} from 'http';
-import {Server as HttpsServer} from 'https';
+import http from 'http';
 
 import compression from 'compression';
 import connect from 'connect';
@@ -17,9 +16,9 @@ import securityHeadersMiddleware from './securityHeadersMiddleware';
 import statusPageMiddleware from './statusPageMiddleware';
 import systraceProfileMiddleware from './systraceProfileMiddleware';
 
-import debuggerProxyServer from './websocket/debuggerProxyServer';
-import eventsSocketServer from './websocket/eventsSocketServer';
-import messageSocketServer from './websocket/messageSocketServer';
+import createDebuggerProxyEndpoint from './websocket/createDebuggerProxyEndpoint';
+import createMessageSocketEndpoint from './websocket/createMessageSocketEndpoint';
+import createEventsSocketEndpoint from './websocket/createEventsSocketEndpoint';
 
 export {devToolsMiddleware};
 export {indexPageMiddleware};
@@ -30,19 +29,20 @@ export {securityHeadersMiddleware};
 export {statusPageMiddleware};
 export {systraceProfileMiddleware};
 
-export {debuggerProxyServer};
-export {eventsSocketServer};
-export {messageSocketServer};
-
 type MiddlewareOptions = {
   host?: string;
   watchFolders: ReadonlyArray<string>;
   port: number;
 };
 
 export function createDevServerMiddleware(options: MiddlewareOptions) {
-  let isDebuggerConnected = () => false;
-  let broadcast = (_event: any) => {};
+  const debuggerProxyEndpoint = createDebuggerProxyEndpoint();
+  const isDebuggerConnected = debuggerProxyEndpoint.isDebuggerConnected;
+
+  const messageSocketEndpoint = createMessageSocketEndpoint();
+  const broadcast = messageSocketEndpoint.broadcast;
+
+  const eventsSocketEndpoint = createEventsSocketEndpoint(broadcast);
 
   const middleware = connect()
     .use(securityHeadersMiddleware)
@@ -52,7 +52,7 @@ export function createDevServerMiddleware(options: MiddlewareOptions) {
     .use('/debugger-ui', debuggerUIMiddleware())
     .use(
       '/launch-js-devtools',
-      devToolsMiddleware(options, () => isDebuggerConnected()),
+      devToolsMiddleware(options, isDebuggerConnected),
     )
     .use('/open-stack-frame', openStackFrameInEditorMiddleware(options))
     .use('/open-url', openURLMiddleware)
@@ -71,28 +71,14 @@ export function createDevServerMiddleware(options: MiddlewareOptions) {
   });
 
   return {
-    attachToServer(server: HttpServer | HttpsServer) {
-      const debuggerProxy = debuggerProxyServer.attachToServer(
-        server,
-        '/debugger-proxy',
-      );
-      const messageSocket = messageSocketServer.attachToServer(
-        server,
-        '/message',
-      );
-      broadcast = messageSocket.broadcast;
-      isDebuggerConnected = debuggerProxy.isDebuggerConnected;
-      const eventsSocket = eventsSocketServer.attachToServer(
-        server,
-        '/events',
-        messageSocket,
-      );
-      return {
-        debuggerProxy,
-        eventsSocket,
-        messageSocket,
-      };
+    websocketEndpoints: {
+      '/debugger-proxy': debuggerProxyEndpoint.server,
+      '/message': messageSocketEndpoint.server,
+      '/events': eventsSocketEndpoint.server,
     },
+    debuggerProxyEndpoint,
+    messageSocketEndpoint,
+    eventsSocketEndpoint,
     middleware,
   };
 }

packages/cli-server-api/src/websocket/debuggerProxyServer.ts → packages/cli-server-api/src/websocket/createDebuggerProxyEndpoint.ts

@@ -9,15 +9,14 @@
 
 import ws from 'ws';
 import {logger} from '@react-native-community/cli-tools';
-import {Server as HttpServer} from 'http';
-import {Server as HttpsServer} from 'https';
 
-type Server = HttpServer | HttpsServer;
-function attachToServer(server: Server, path: string) {
+export default function createDebuggerProxyEndpoint(): {
+  server: ws.Server;
+  isDebuggerConnected: () => boolean;
+} {
   const WebSocketServer = ws.Server;
   const wss = new WebSocketServer({
-    server,
-    path,
+    noServer: true,
   });
 
   let debuggerSocket: ws | null;
@@ -48,37 +47,33 @@ function attachToServer(server: Server, path: string) {
     send(debuggerSocket, JSON.stringify({method: '$disconnected'}));
   };
 
-  wss.on('connection', (connection: ws) => {
-    // @ts-ignore current definition of ws does not have upgradeReq type
-    const {url} = connection.upgradeReq;
+  wss.on('connection', (socket, request) => {
+    const {url} = request;
 
-    if (url.indexOf('role=debugger') > -1) {
+    if (url && url.indexOf('role=debugger') > -1) {
       if (debuggerSocket) {
-        connection.close(1011, 'Another debugger is already connected');
+        socket.close(1011, 'Another debugger is already connected');
         return;
       }
-      debuggerSocket = connection;
+      debuggerSocket = socket;
       if (debuggerSocket) {
         debuggerSocket.onerror = debuggerSocketCloseHandler;
         debuggerSocket.onclose = debuggerSocketCloseHandler;
         debuggerSocket.onmessage = ({data}) => send(clientSocket, data);
       }
-    } else if (url.indexOf('role=client') > -1) {
+    } else if (url && url.indexOf('role=client') > -1) {
       if (clientSocket) {
-        // @ts-ignore not nullable with current type definition of ws
-        clientSocket.onerror = null;
-        // @ts-ignore not nullable with current type definition of ws
-        clientSocket.onclose = null;
-        // @ts-ignore not nullable with current type definition of ws
-        clientSocket.onmessage = null;
+        clientSocket.onerror = () => {};
+        clientSocket.onclose = () => {};
+        clientSocket.onmessage = () => {};
         clientSocket.close(1011, 'Another client connected');
       }
-      clientSocket = connection;
+      clientSocket = socket;
       clientSocket.onerror = clientSocketCloseHandler;
       clientSocket.onclose = clientSocketCloseHandler;
       clientSocket.onmessage = ({data}) => send(debuggerSocket, data);
     } else {
-      connection.close(1011, 'Missing role param');
+      socket.close(1011, 'Missing role param');
     }
   });
 
@@ -89,7 +84,3 @@ function attachToServer(server: Server, path: string) {
     },
   };
 }
-
-export default {
-  attachToServer,
-};

packages/cli-server-api/src/websocket/eventsSocketServer.ts → packages/cli-server-api/src/websocket/createEventsSocketEndpoint.ts

@@ -1,9 +1,6 @@
 import {Server as WebSocketServer} from 'ws';
 import {logger} from '@react-native-community/cli-tools';
 import prettyFormat from 'pretty-format';
-import {Server as HttpServer} from 'http';
-import {Server as HttpsServer} from 'https';
-import messageSocketModule from './messageSocketServer';
 
 /**
  * The eventsSocket websocket listens at the 'events/` for websocket
@@ -21,8 +18,6 @@ import messageSocketModule from './messageSocketServer';
  *   Two useful commands are 'reload' and 'devmenu'.
  */
 
-type Server = HttpServer | HttpsServer;
-
 type Command = {
   version: number;
   type: 'command';
@@ -105,23 +100,18 @@ function serializeMessage(message: any) {
   }
 }
 
-type MessageSocket = ReturnType<typeof messageSocketModule.attachToServer>;
-
 /**
  * Starts the eventsSocket at the given path
  *
- * @param server
- * @param path typically: 'events/'
- * @param messageSocket: webSocket to which all connected RN apps are listening
  */
-function attachToServer(
-  server: Server,
-  path: string,
-  messageSocket: MessageSocket,
-) {
+export default function createEventsSocketEndpoint(
+  broadcast: (method: string, params?: Record<string, any>) => void,
+): {
+  server: WebSocketServer;
+  reportEvent: (event: any) => void;
+} {
   const wss = new WebSocketServer({
-    server: server,
-    path: path,
+    noServer: true,
     verifyClient({origin}: {origin: string}) {
       // This exposes the full JS logs and enables issuing commands like reload
       // so let's make sure only locally running stuff can connect to it
@@ -186,7 +176,7 @@ function attachToServer(
            * messageSocket.broadcast (not to be confused with our own broadcast above)
            * forwards a command to all connected React Native applications.
            */
-          messageSocket.broadcast(message.command, message.params);
+          broadcast(message.command, message.params);
         } catch (e) {
           logger.error('Failed to forward message to clients: ', e);
         }
@@ -197,12 +187,9 @@ function attachToServer(
   });
 
   return {
+    server: wss,
     reportEvent: (event: any) => {
       broadCastEvent(event);
     },
   };
 }
-
-export default {
-  attachToServer,
-};

packages/cli-server-api/src/websocket/messageSocketServer.ts → packages/cli-server-api/src/websocket/createMessageSocketEndpoint.ts

@@ -8,8 +8,6 @@
 import url from 'url';
 import {Server as WebSocketServer} from 'ws';
 import {logger} from '@react-native-community/cli-tools';
-import {Server as HttpServer} from 'http';
-import {Server as HttpsServer} from 'https';
 
 const PROTOCOL_VERSION = 2;
 
@@ -70,11 +68,12 @@ function isResponse(message: Message) {
   );
 }
 
-type Server = HttpServer | HttpsServer;
-function attachToServer(server: Server, path: string) {
+export default function createMessageSocketEndpoint(): {
+  server: WebSocketServer;
+  broadcast: (method: string, params?: Record<string, any>) => void;
+} {
   const wss = new WebSocketServer({
-    server,
-    path,
+    noServer: true,
   });
   const clients = new Map();
   let nextClientId = 0;
@@ -211,8 +210,7 @@ function attachToServer(server: Server, path: string) {
 
     clients.set(clientId, clientWs);
     const onCloseHandler = () => {
-      // @ts-ignore
-      clientWs.onmessage = null;
+      clientWs.onmessage = () => {};
       clients.delete(clientId);
     };
     clientWs.onclose = onCloseHandler;
@@ -245,10 +243,9 @@ function attachToServer(server: Server, path: string) {
   });
 
   return {
+    server: wss,
     broadcast: (method: string, params?: Record<string, any>) => {
       handleSendBroadcast(null, {method, params});
     },
   };
 }
-
-export default {attachToServer, parseMessage};

packages/debugger-ui/src/ui/index.js

@@ -49,7 +49,7 @@ const Page = (window.Page = {
     const statusNode = document.getElementById('status');
     switch (status.type) {
       case 'connected':
-        statusNode.innerHTML = 'Debugger session #' + status.id + ' active.';
+        statusNode.innerHTML = 'Debugger session active.';
         break;
       case 'error':
         statusNode.innerHTML =