Merge pull request #6 from muke1908/copilot/change-origin-based-namespaces

feat: use full URL (scheme + host + port) for namespace derivation

Author: muke1908

packages/streamer/server/index.js

@@ -29,18 +29,29 @@ const namespaceViewers = new Map();
 const activeLoggerCounts = new Map();
 
 // Pattern used to identify viewer connections by URL path.
-// Matches namespace slugs that are either UUIDs or origin hostnames (e.g. www.domain1.com).
+// Matches namespace slugs that are either UUIDs or url-based slugs (e.g. https-www.domain1.com-3000).
 const NAMESPACE_PATH_RE = /^\/([a-zA-Z0-9](?:[a-zA-Z0-9._-]*[a-zA-Z0-9])?)\/?$/;
 
-// Valid hostname characters (no colons so IPv6 addresses fall back to UUID).
+// Valid namespace characters (no colons so IPv6 addresses fall back to UUID).
 const VALID_NAMESPACE_RE = /^[a-zA-Z0-9](?:[a-zA-Z0-9._-]*[a-zA-Z0-9])?$/;
 
-/** Derive a namespace slug from the WebSocket request's Origin header. */
+/** Derive a namespace slug from the WebSocket request's Origin header.
+ *  Uses the full URL (scheme + hostname + port) so that different origins
+ *  on the same host (e.g. http://localhost:3000 vs http://localhost:4000)
+ *  receive distinct namespaces.
+ */
 function getNamespaceFromOrigin(originHeader) {
   if (!originHeader) return null;
   try {
-    const { hostname } = new URL(originHeader);
-    return hostname && VALID_NAMESPACE_RE.test(hostname) ? hostname : null;
+    const { protocol, hostname, port } = new URL(originHeader);
+    const scheme = protocol.slice(0, -1); // strip trailing colon, e.g. "http:" → "http"
+    // The URL API normalises default ports (80/443) to an empty string, so two
+    // origins that differ only by the explicit presence of the default port
+    // (e.g. http://host and http://host:80) produce the same namespace.
+    const namespace = port
+      ? `${scheme}-${hostname}-${port}`
+      : `${scheme}-${hostname}`;
+    return VALID_NAMESPACE_RE.test(namespace) ? namespace : null;
   } catch {
     return null;
   }
@@ -158,7 +169,9 @@ wss.on('connection', (ws, req) => {
   } else {
     // ── Logger connection ─────────────────────────────────────────────────
     // Derive namespace from the Origin header so that all connections from
-    // the same origin share one namespace.  Fall back to a UUID when the
+    // the same origin share one namespace.  The full URL (scheme + hostname +
+    // port) is encoded into a path-safe slug so that different ports on the
+    // same host get distinct namespaces.  Fall back to a UUID when the
     // header is absent (e.g. Node.js clients) or contains an unusable value.
     const originNamespace = getNamespaceFromOrigin(req.headers.origin);
     const namespace = originNamespace ?? crypto.randomUUID();

packages/streamer/src/App.tsx

@@ -9,7 +9,7 @@ import { NamespaceLanding } from './components/NamespaceLanding';
 import type { FilterState, LogLevel } from './types';
 
 const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-// Accept both UUID-style and origin-hostname-style namespaces (e.g. www.domain1.com)
+// Accept both UUID-style and url-based namespaces (e.g. https-www.domain1.com-3000)
 const NAMESPACE_PATH_RE = /^\/([a-zA-Z0-9][a-zA-Z0-9._-]+)\/?$/i;
 
 function getNamespaceFromPath(): string | null {