fix: the problem of socket host when use ip:port url (#571)

web-infra-dev · Oct 28, 2024 · 5b5355c · 5b5355c
1 parent b6508b6
commit 5b5355c
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 16 deletions.
diff --git a/packages/cli/src/commands/bundle-diff.ts b/packages/cli/src/commands/bundle-diff.ts
@@ -118,14 +118,16 @@ example: ${bin} ${Commands.BundleDiff} --baseline="x.json" --current="x.json"
     const baselineManifestsBuffer = Buffer.from(
       JSON.stringify({
         __LOCAL__SERVER__: true,
-        __SOCKET__URL__: baselineSdk.server.socketUrl,
+        __SOCKET__URL__: baselineSdk.server.socketUrl.socketUrl,
+        __SOCKET__PORT__: baselineSdk.server.socketUrl.port,
         ...baselineData,
       }),
     );
     const currentManifestsBuffer = Buffer.from(
       JSON.stringify({
         __LOCAL__SERVER__: true,
-        __SOCKET__URL__: currentSdk.server.socketUrl,
+        __SOCKET__PORT__: currentSdk.server.socketUrl.port,
+        __SOCKET__URL__: currentSdk.server.socketUrl.socketUrl,
         ...currentData,
       }),
     );

diff --git a/packages/components/src/utils/data/local.ts b/packages/components/src/utils/data/local.ts
@@ -68,11 +68,11 @@ export class LocalServerDataLoader extends BaseDataLoader {
     const [api, body] = args;
     // request limitation key
     const key = body ? `${api}_${JSON.stringify(body)}` : `${api}`;
-    const socketUrl = this.get('__SOCKET__URL__') ?? ''
-    
+    const socketPort = this.get('__SOCKET__PORT__') ?? '';
+
     return this.limit(key, async () => {
       return new Promise((resolve) => {
-        getSocket(socketUrl).emit(
+        getSocket(socketPort).emit(
           api,
           body,
           (res: SDK.ServerAPI.SocketResponseType<T>) => {

diff --git a/packages/components/src/utils/socket.ts b/packages/components/src/utils/socket.ts
@@ -17,7 +17,35 @@ function ensureSocket(socketUrl: string = defaultSocketUrl) {
   }
   return map.get(socketUrl)!;
 }
-export function getSocket(socketUrl?: string): Socket {
-  const socket = ensureSocket(socketUrl || defaultSocketUrl);
+
+export function getSocket(socketPort?: string): Socket {
+  const socketUrl = formatURL({
+    port: socketPort,
+    hostname: location.hostname,
+    protocol: location.protocol,
+  });
+  const socket = ensureSocket(socketPort ? socketUrl : defaultSocketUrl);
   return socket;
 }
+
+export function formatURL({
+  port,
+  protocol,
+  hostname,
+}: {
+  port?: string;
+  protocol: string;
+  hostname: string;
+}) {
+  if (typeof URL !== 'undefined') {
+    const url = new URL('http://localhost');
+    url.port = String(port);
+    url.hostname = hostname;
+    url.protocol = location.protocol.includes('https') ? 'wss' : 'ws';
+    return url.toString();
+  }
+
+  // compatible with IE11
+  const colon = protocol.indexOf(':') === -1 ? ':' : '';
+  return `${protocol}${colon}//${hostname}:${port}`;
+}
diff --git a/packages/sdk/src/sdk/sdk/webpack.ts b/packages/sdk/src/sdk/sdk/webpack.ts
@@ -466,7 +466,8 @@ export class RsdoctorWebpackSDK<
         return t;
       }, {} as Common.PlainObject) as unknown as Manifest.RsdoctorManifestWithShardingFiles['data'],
       __LOCAL__SERVER__: true,
-      __SOCKET__URL__: this.server.socketUrl,
+      __SOCKET__PORT__: this.server.socketUrl.port.toString(),
+      __SOCKET__URL__: this.server.socketUrl.socketUrl,
     };
 
     return data;

diff --git a/packages/sdk/src/sdk/server/index.ts b/packages/sdk/src/sdk/server/index.ts
@@ -16,6 +16,8 @@ import { getLocalIpAddress } from './utils';
 import { isUndefined } from 'lodash';
 export * from './utils';
 
+export type ISocketType = { port: number; socketUrl: string };
+
 export class RsdoctorServer implements SDK.RsdoctorServerInstance {
   private _server!: Common.PromiseReturnType<typeof Server.createServer>;
 
@@ -59,8 +61,11 @@ export class RsdoctorServer implements SDK.RsdoctorServerInstance {
     return `http://${this.host}:${this.port}`;
   }
 
-  public get socketUrl(): string {
-    return `ws://localhost:${this.port}`;
+  public get socketUrl(): ISocketType {
+    return {
+      port: this.port,
+      socketUrl: `ws://localhost:${this.port}`,
+    };
   }
 
   public get innerClientPath(): string {

diff --git a/packages/types/src/manifest.ts b/packages/types/src/manifest.ts
@@ -38,6 +38,7 @@ export interface RsdoctorManifestWithShardingFiles
    * local server will proxy the manifest content and inject `__LOCAL__SERVER__: true`
    */
   __LOCAL__SERVER__?: boolean;
+  __SOCKET__PORT__?: string;
   __SOCKET__URL__?: string;
 }
 
@@ -73,10 +74,10 @@ export type RsdoctorManifestMappingKeys =
         ? RsdoctorManifestData[K] extends Array<unknown>
           ? never
           : string extends keyof RsdoctorManifestData[K]
-          ? never
-          : keyof RsdoctorManifestData[K] extends string
-          ? `${K}.${keyof RsdoctorManifestData[K]}`
-          : never
+            ? never
+            : keyof RsdoctorManifestData[K] extends string
+              ? `${K}.${keyof RsdoctorManifestData[K]}`
+              : never
         : never;
     }[RsdoctorManifestObjectKeys]
   | RsdoctorManifestRootKeys;
@@ -89,8 +90,8 @@ export type InferManifestDataValue<T> =
         : never
       : never
     : T extends RsdoctorManifestRootKeys
-    ? RsdoctorManifestData[T]
-    : never;
+      ? RsdoctorManifestData[T]
+      : never;
 
 export interface ManifestDataLoader {
   loadManifest(): Promise<RsdoctorManifest | RsdoctorManifestWithShardingFiles>;