refactor: inject bridge server into Metro (#88)

This change moves Harness bridge communication onto Metro so everything runs through a single dev server port instead of a separate bridge port.

It keeps the setup simpler and more predictable, reduces extra platform-specific port wiring, and preserves compatibility by keeping webSocketPort around as a deprecated config option for now.

Author: V3RON

actions/shared/index.cjs

@@ -4388,7 +4388,7 @@ var ConfigSchema = external_exports.object({
   defaultRunner: external_exports.string().optional(),
   host: external_exports.string().min(1, "Host is required").optional(),
   metroPort: external_exports.number().int("Metro port must be an integer").min(1, "Metro port must be at least 1").max(65535, "Metro port must be at most 65535").optional().default(DEFAULT_METRO_PORT),
-  webSocketPort: external_exports.number().optional().default(3001),
+  webSocketPort: external_exports.number().optional().describe("Deprecated. Bridge traffic now uses metroPort and this value is ignored."),
   bridgeTimeout: external_exports.number().min(1e3, "Bridge timeout must be at least 1 second").default(6e4),
   bundleStartTimeout: external_exports.number().min(1e3, "Bundle start timeout must be at least 1 second").default(15e3),
   maxAppRestarts: external_exports.number().min(0, "Max app restarts must be at least 0").default(2),

apps/playground/rn-harness.config.mjs

@@ -116,7 +116,6 @@ export default {
   ],
   defaultRunner: 'android',
   bridgeTimeout: 120000,
-  webSocketPort: 3002,
 
   resetEnvironmentBetweenTestFiles: true,
   unstable__enableMetroCache: true,

packages/bridge/src/server.ts

@@ -2,6 +2,8 @@ import { WebSocketServer, type WebSocket } from 'ws';
 import { type BirpcGroup, createBirpcGroup } from 'birpc';
 import { logger } from '@react-native-harness/tools';
 import { EventEmitter } from 'node:events';
+import type { Server as HttpServer } from 'node:http';
+import type { Server as HttpsServer } from 'node:https';
 import fs from 'node:fs/promises';
 import os from 'node:os';
 import path from 'node:path';
@@ -24,8 +26,25 @@ import { matchImageSnapshot } from './image-snapshot.js';
 export { DeviceNotRespondingError } from './errors.js';
 const bridgeLogger = logger.child('bridge');
 
-export type BridgeServerOptions = {
+type BridgeServerStandaloneOptions = {
   port: number;
+  host?: string;
+};
+
+type BridgeServerAttachedOptions = {
+  server: HttpServer | HttpsServer;
+  path?: string;
+};
+
+type BridgeServerNoServerOptions = {
+  noServer: true;
+};
+
+export type BridgeServerOptions = (
+  | BridgeServerStandaloneOptions
+  | BridgeServerAttachedOptions
+  | BridgeServerNoServerOptions
+) & {
   timeout?: number;
   context: HarnessContext;
 };
@@ -55,16 +74,43 @@ export type BridgeServer = {
 };
 
 export const getBridgeServer = async ({
-  port,
   timeout,
   context,
+  ...transport
 }: BridgeServerOptions): Promise<BridgeServer> => {
-  const wss = await new Promise<WebSocketServer>((resolve) => {
-    const server = new WebSocketServer({ port, host: '0.0.0.0' }, () => {
-      resolve(server);
-    });
-  });
-  bridgeLogger.debug('bridge server listening on port %d', port);
+  const wss =
+    'port' in transport
+      ? await new Promise<WebSocketServer>((resolve) => {
+          const server = new WebSocketServer(
+            {
+              port: transport.port,
+              host: transport.host ?? '0.0.0.0',
+            },
+            () => {
+              resolve(server);
+            }
+          );
+        })
+      : new WebSocketServer(
+          'server' in transport
+            ? {
+                server: transport.server,
+                path: transport.path,
+              }
+            : {
+                noServer: true,
+              }
+        );
+  if ('port' in transport) {
+    bridgeLogger.debug('bridge server listening on port %d', transport.port);
+  } else if ('server' in transport) {
+    bridgeLogger.debug(
+      'bridge server attached to existing HTTP server at path %s',
+      transport.path ?? '/'
+    );
+  } else {
+    bridgeLogger.debug('bridge server created in noServer mode');
+  }
   const emitter = new EventEmitter();
   const clients = new Set<WebSocket>();
   const binaryStore = new BinaryStore();

packages/bridge/src/shared.ts

@@ -6,6 +6,8 @@ import type { TestCollectorEvents } from './shared/test-collector.js';
 import type { BundlerEvents } from './shared/bundler.js';
 import type { HarnessPlatform } from '@react-native-harness/platforms';
 
+export const HARNESS_BRIDGE_PATH = '/__harness';
+
 export type FileReference = {
   path: string;
 };

packages/bundler-metro/src/__tests__/startup.test.ts

@@ -27,6 +27,8 @@ const createMetroInstance = (
   overrides: Partial<MetroInstance> = {}
 ): MetroInstance => ({
   events: getEmitter<ReportableEvent>(),
+  httpServer: {} as never,
+  websocketEndpoints: {},
   waitUntilHealthy: vi.fn(async () => 'HTTP 200: packager-status:running'),
   prewarm: vi.fn(async () => false),
   dispose: vi.fn(async () => undefined),

packages/bundler-metro/src/factory.ts

@@ -90,7 +90,7 @@ export const getMetroInstance = async (
   options: MetroOptions,
   abortSignal: AbortSignal
 ): Promise<MetroInstance> => {
-  const { projectRoot, harnessConfig } = options;
+  const { projectRoot, harnessConfig, websocketEndpoints = {} } = options;
   const metroPort = harnessConfig.metroPort;
   metroLogger.debug(
     'creating Metro instance for %s on port %d',
@@ -131,6 +131,7 @@ export const getMetroInstance = async (
   const maybeServer = await Metro.runServer(config, {
     waitForBundler: true,
     unstable_extraMiddleware: [middleware],
+    websocketEndpoints,
     ...(metroBindHost ? { host: metroBindHost } : {}),
     watch: process.env.CI ? false : undefined,
   });
@@ -150,6 +151,8 @@ export const getMetroInstance = async (
 
   return {
     events: reporter,
+    httpServer: server,
+    websocketEndpoints,
     waitUntilHealthy: async ({ timeoutMs, signal }) =>
       waitForMetroStatus({ port: metroPort, timeoutMs, signal }),
     prewarm: ({ platform, signal }) => {

packages/bundler-metro/src/index.ts

@@ -1,5 +1,10 @@
 export { getMetroInstance } from './factory.js';
-export type { MetroInstance, MetroFactory, MetroOptions } from './types.js';
+export type {
+  MetroInstance,
+  MetroFactory,
+  MetroOptions,
+  MetroWebSocketEndpoint,
+} from './types.js';
 export type { Reporter, ReportableEvent } from './reporter.js';
 export { isMetroCacheReusable } from './paths.js';
 export {

packages/bundler-metro/src/manifest.ts

@@ -6,7 +6,6 @@ import { getHarnessManifestPath } from './paths.js';
 const getManifestContent = (harnessConfig: HarnessConfig): string => {
   return `global.RN_HARNESS = { 
     appRegistryComponentName: '${harnessConfig.appRegistryComponentName}',
-    webSocketPort: ${harnessConfig.webSocketPort},
     disableViewFlattening: ${harnessConfig.disableViewFlattening},
   };`;
 };

packages/bundler-metro/src/types.ts

@@ -1,9 +1,18 @@
+import type { Server as HttpServer } from 'node:http';
+import type { Server as HttpsServer } from 'node:https';
+import type { RunServerOptions } from 'metro';
 import type { Reporter } from './reporter.js';
 import type { Config as HarnessConfig } from '@react-native-harness/config';
 
+export type MetroWebSocketEndpoints = NonNullable<
+  RunServerOptions['websocketEndpoints']
+>;
+export type MetroWebSocketEndpoint = MetroWebSocketEndpoints[string];
+
 export type MetroOptions = {
   projectRoot: string;
   harnessConfig: HarnessConfig;
+  websocketEndpoints?: MetroWebSocketEndpoints;
 };
 
 export type WaitForMetroHealthOptions = {
@@ -18,6 +27,8 @@ export type PrewarmMetroBundleOptions = {
 
 export type MetroInstance = {
   events: Reporter;
+  httpServer: HttpServer | HttpsServer;
+  websocketEndpoints: MetroWebSocketEndpoints;
   waitUntilHealthy: (options: WaitForMetroHealthOptions) => Promise<string>;
   prewarm: (options: PrewarmMetroBundleOptions) => Promise<boolean>;
   dispose: () => Promise<void>;

packages/bundler-metro/tsconfig.json

@@ -12,6 +12,9 @@
     {
       "path": "../tools"
     },
+    {
+      "path": "../bridge"
+    },
     {
       "path": "../babel-preset"
     },