uniwrtc 1.0.4 → 1.0.7

package/README.md

@@ -53,14 +53,21 @@ PORT=8080
 
 ### Try the Demo
 
-Open `demo.html` in your web browser to try the interactive demo:
-
-1. Start the server with `npm start` (local signaling at `ws://localhost:8080`), **or** use the deployed Workers endpoint `wss://signal.peer.ooo`.
-2. Open `demo.html` in your browser.
-3. Click "Connect" to connect to the signaling server.
-4. Enter a session ID and click "Join Session".
-5. Open another browser window/tab with the same demo page.
-6. Join the same session to see peer connections in action and P2P data channels open.
+The interactive demo is available live at **https://signal.peer.ooo/** (Cloudflare Workers deployment) or run locally:
+
+**Using the deployed demo (recommended):**
+1. Open https://signal.peer.ooo/ in two browser tabs
+2. Default room is `demo-room`—both tabs will auto-connect
+3. Click "Connect" to join
+4. Watch the activity log to see peers connecting
+5. Open the P2P chat and send messages between tabs
+
+**Or run locally:**
+1. Start the server: `npm start` (signaling at `ws://localhost:8080`)
+2. Start the Vite dev server: `npm run dev` (demo at `http://localhost:5173/`)
+3. Open the demo in two browser tabs
+4. Enter the same session ID in both, then Connect
+5. Chat P2P once data channels open
 
 ## Usage
 
@@ -166,10 +173,11 @@ The signaling server accepts WebSocket connections and supports the following me
 
 Use directly from npm:
 ```javascript
-// ESM
-import { UniWRTCClient } from 'uniwrtc/client-browser.js';
-// or CommonJS (Node)
-const { UniWRTCClient } = require('uniwrtc/client.js');
+// ESM (browser)
+import UniWRTCClient from 'uniwrtc/client-browser.js';
+
+// CommonJS (Node.js)
+const UniWRTCClient = require('uniwrtc/client.js');
 ```
 
 The `client.js` library provides a convenient wrapper for the signaling protocol:
@@ -211,8 +219,8 @@ client.on('ice-candidate', (data) => {
 // Connect to the server
 await client.connect();
 
-// Join a room
-client.joinRoom('my-room');
+// Join a session
+client.joinSession('my-session');
 
 // Send WebRTC signaling messages
 client.sendOffer(offerObject, targetPeerId);
@@ -298,6 +306,11 @@ client.on('ice-candidate', async (data) => {
 // Connect and join session
 await client.connect();
 client.joinSession('my-video-session');
+
+// Or use Cloudflare Durable Objects deployment
+const cfClient = new UniWRTCClient('wss://signal.peer.ooo?room=my-session');
+await cfClient.connect();
+cfClient.joinSession('my-session');
 ```
 
 ## API Reference
@@ -319,12 +332,12 @@ new UniWRTCClient(serverUrl, options)
 
 - `connect()`: Connect to the signaling server (returns Promise)
 - `disconnect()`: Disconnect from the server
-- `joinSession(sessionId)`: Join a specific session
+- `joinSession(sessionId)`: Join a specific session (peers isolated by session)
 - `leaveSession()`: Leave the current session
-- `sendOffer(offer, targetId)`: Send a WebRTC offer
-- `sendAnswer(answer, targetId)`: Send a WebRTC answer
-- `sendIceCandidate(candidate, targetId)`: Send an ICE candidate
-- `listRooms()`: Request list of available rooms
+- `sendOffer(offer, targetId)`: Send a WebRTC offer to a specific peer
+- `sendAnswer(answer, targetId)`: Send a WebRTC answer to a specific peer
+- `sendIceCandidate(candidate, targetId)`: Send an ICE candidate to a specific peer
+- `listRooms()`: Request list of available sessions (legacy)
 - `on(event, handler)`: Register event handler
 - `off(event, handler)`: Unregister event handler
 
@@ -359,21 +372,22 @@ Response:
 
 ## Architecture
 
-### Session Management
+### Session-based Peer Isolation
 
-- Each session is identified by a unique session ID (string)
-- Clients can join/leave sessions dynamically
-- Messages can be sent to specific peers or broadcast to all peers in a session
-- Empty sessions are automatically cleaned up
+- **Sessions**: Each session is identified by a unique string ID (also called "room" in the UI)
+- **Peer routing**: Each peer gets a unique client ID; signaling messages are routed only to intended targets
+- **Session isolation**: Peers in different sessions cannot see or communicate with each other
+- **Cloudflare Durable Objects**: Uses DO state to isolate sessions; routing by `?room=` query param per session
+- Clients join with `joinSession(sessionId)` and receive notifications when other peers join the same session
 
 ### Message Flow
 
-1. Client connects via WebSocket
-2. Server assigns a unique client ID
-3. Client joins a room
-4. Server notifies existing peers about the new client
-5. Peers exchange WebRTC signaling messages through the server
-6. Server routes messages based on target ID or broadcasts to room
+1. Client connects via WebSocket (or WS-over-HTTP for Cloudflare)
+2. Server/Durable Object assigns a unique client ID
+3. Client sends join message with session ID
+4. Server broadcasts `peer-joined` to other peers in the same session only
+5. Peers exchange WebRTC offers/answers/ICE candidates via the server
+6. Server routes signaling messages to specific peers by target ID (unicast, not broadcast)
 
 ## Security Considerations
 

package/client-browser.js

@@ -260,3 +260,6 @@ class UniWRTCClient {
 if (typeof window !== 'undefined') {
   window.UniWRTCClient = UniWRTCClient;
 }
+
+// ESM default export for bundlers like Vite
+export default UniWRTCClient;

package/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UniWRTC Demo - WebRTC Signaling</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+</body>
+</html>

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "uniwrtc",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "description": "A universal WebRTC signaling service",
   "main": "server.js",
+  "type": "module",
   "scripts": {
     "start": "node server.js",
-    "dev": "node server.js",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "server": "node server.js",
     "test": "node test.js"
   },
   "keywords": [
@@ -20,6 +24,10 @@
   "dependencies": {
     "ws": "^8.17.1"
   },
+  "devDependencies": {
+    "@playwright/test": "^1.57.0",
+    "vite": "^6.0.6"
+  },
   "engines": {
     "node": ">=14.0.0"
   }

package/playwright.config.js

@@ -0,0 +1,33 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  // Run tests IN PARALLEL - all browsers at the same time
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 4, // Multiple workers - run browsers in parallel
+  reporter: 'html',
+  use: {
+    baseURL: 'https://signal.peer.ooo',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+});

package/public/favicon.ico

@@ -0,0 +1 @@
+UNI WRTC ICON

package/src/index.js

@@ -1,6 +1,7 @@
 /**
  * UniWRTC Cloudflare Worker
  * WebRTC Signaling Service using Durable Objects
+ * Serves both static assets and WebSocket signaling
  */
 
 import { Room } from './room.js';
@@ -10,6 +11,7 @@ export { Room };
 export default {
   async fetch(request, env) {
     const url = new URL(request.url);
+    console.log(`[Worker] ${request.method} ${url.pathname}${url.search}`);
 
     // Health check
     if (url.pathname === '/health') {
@@ -18,16 +20,56 @@ export default {
       });
     }
 
-    // WebSocket signaling
-    if (url.pathname === '/signaling' || url.pathname === '/') {
-      const roomId = url.searchParams.get('room') || 'default';
+    // Handle WebSocket upgrade on /ws endpoint
+    if (url.pathname === '/ws') {
+      if (request.headers.get('Upgrade') === 'websocket') {
+        console.log(`[Worker] WebSocket upgrade detected for room: ${url.searchParams.get('room')}`);
+        const roomId = url.searchParams.get('room') || 'default';
+        const id = env.ROOMS.idFromName(roomId);
+        const roomStub = env.ROOMS.get(id);
+        console.log(`[Worker] Routing to Durable Object: ${roomId}`);
+        return roomStub.fetch(request);
+      }
+      return new Response('WebSocket upgrade required', { status: 400 });
+    }
+
+    // Serve root as index.html
+    if (url.pathname === '/') {
+      try {
+        const asset = await env.ASSETS.get('index.html');
+        if (asset) {
+          return new Response(asset, {
+            headers: { 'Content-Type': 'text/html; charset=utf-8' }
+          });
+        }
+      } catch (e) {
+        // ASSETS binding may not exist in local dev
+      }
+    }
 
-      // Get Durable Object stub for this room
-      const id = env.ROOMS.idFromName(roomId);
-      const roomStub = env.ROOMS.get(id);
+    // Serve static assets (CSS, JS, images, etc.)
+    if (request.method === 'GET') {
+      try {
+        const pathname = url.pathname.replace(/^\//, '');
+        const asset = await env.ASSETS.get(pathname);
+        if (asset) {
+          let contentType = 'application/octet-stream';
+          if (pathname.endsWith('.html')) contentType = 'text/html; charset=utf-8';
+          else if (pathname.endsWith('.js')) contentType = 'application/javascript';
+          else if (pathname.endsWith('.css')) contentType = 'text/css';
+          else if (pathname.endsWith('.json')) contentType = 'application/json';
+          else if (pathname.endsWith('.svg')) contentType = 'image/svg+xml';
+          else if (pathname.endsWith('.png')) contentType = 'image/png';
+          else if (pathname.endsWith('.jpg')) contentType = 'image/jpeg';
+          else if (pathname.endsWith('.ico')) contentType = 'image/x-icon';
 
-      // Forward request to Durable Object
-      return roomStub.fetch(request);
+          return new Response(asset, {
+            headers: { 'Content-Type': contentType }
+          });
+        }
+      } catch (e) {
+        // ASSETS binding may not exist in local dev
+      }
     }
 
     return new Response('Not Found', { status: 404 });

package/src/main.js

@@ -0,0 +1,393 @@
+import './style.css';
+import UniWRTCClient from '../client-browser.js';
+
+// Make UniWRTCClient available globally for backwards compatibility
+window.UniWRTCClient = UniWRTCClient;
+
+let client = null;
+const peerConnections = new Map();
+const dataChannels = new Map();
+
+// Initialize app
+document.getElementById('app').innerHTML = `
+    <div class="container">
+        <div class="header">
+            <h1>🌐 UniWRTC Demo</h1>
+            <p>WebRTC Signaling made simple</p>
+        </div>
+
+        <div class="card">
+            <h2>Connection</h2>
+            <div class="connection-controls">
+                <div>
+                    <label style="display: block; margin-bottom: 5px; color: #64748b; font-size: 13px;">Server URL</label>
+                    <input type="text" id="serverUrl" data-testid="serverUrl" placeholder="wss://signal.peer.ooo or ws://localhost:8080" value="wss://signal.peer.ooo">
+                </div>
+                <div>
+                    <label style="display: block; margin-bottom: 5px; color: #64748b; font-size: 13px;">Room / Session ID</label>
+                    <input type="text" id="roomId" data-testid="roomId" placeholder="my-room">
+                </div>
+            </div>
+            <div style="display: flex; gap: 10px; align-items: center;">
+                <button onclick="window.connect()" class="btn-primary" id="connectBtn" data-testid="connectBtn">Connect</button>
+                <button onclick="window.disconnect()" class="btn-danger" id="disconnectBtn" data-testid="disconnectBtn" disabled>Disconnect</button>
+                <span id="statusBadge" data-testid="statusBadge" class="status-badge status-disconnected">Disconnected</span>
+            </div>
+        </div>
+
+        <div class="card">
+            <h2>Client Info</h2>
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
+                <div>
+                    <strong style="color: #64748b;">Client ID:</strong>
+                    <div id="clientId" data-testid="clientId" style="font-family: monospace; color: #333; margin-top: 5px;">Not connected</div>
+                </div>
+                <div>
+                    <strong style="color: #64748b;">Session ID:</strong>
+                    <div id="sessionId" data-testid="sessionId" style="font-family: monospace; color: #333; margin-top: 5px;">Not joined</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <h2>Connected Peers</h2>
+            <div id="peerList" data-testid="peerList" class="peer-list">
+                <p style="color: #94a3b8;">No peers connected</p>
+            </div>
+        </div>
+
+        <div class="card">
+            <h2>Peer-to-Peer Chat</h2>
+            <div id="chatContainer" data-testid="chatContainer">
+                <p>Connect to a room and wait for peers to start chatting</p>
+            </div>
+            <div class="chat-controls">
+                <input type="text" id="chatMessage" data-testid="chatMessage" placeholder="Type a message..." onkeypress="if(event.key === 'Enter') window.sendChatMessage()">
+                <button onclick="window.sendChatMessage()" class="btn-primary" data-testid="sendBtn">Send</button>
+            </div>
+        </div>
+
+        <div class="card">
+            <h2>Activity Log</h2>
+            <div id="logContainer" data-testid="logContainer" class="log-container">
+                <div class="log-entry success">UniWRTC Demo ready</div>
+            </div>
+        </div>
+    </div>
+`;
+
+// Prefill room input from URL (?room= or ?session=); otherwise set a visible default the user can override
+const roomInput = document.getElementById('roomId');
+const params = new URLSearchParams(window.location.search);
+const urlRoom = params.get('room') || params.get('session');
+if (urlRoom) {
+    roomInput.value = urlRoom;
+    log(`Prefilled room ID from URL: ${urlRoom}`, 'info');
+} else {
+    const defaultRoom = 'demo-room';
+    roomInput.value = defaultRoom;
+    log(`Using default room ID: ${defaultRoom}`, 'info');
+}
+
+function log(message, type = 'info') {
+    const logContainer = document.getElementById('logContainer');
+    const entry = document.createElement('div');
+        entry.className = `log-entry ${type}`;
+    const timestamp = new Date().toLocaleTimeString();
+        entry.textContent = `[${timestamp}] ${message}`;
+    
+    // Add testid for specific log messages
+    if (message.includes('Connected with client ID')) {
+        entry.setAttribute('data-testid', 'log-connected');
+    } else if (message.includes('Joined session')) {
+        entry.setAttribute('data-testid', 'log-joined');
+    } else if (message.includes('Peer joined')) {
+        entry.setAttribute('data-testid', 'log-peer-joined');
+    } else if (message.includes('Data channel open')) {
+        entry.setAttribute('data-testid', 'log-data-channel');
+    }
+    
+    logContainer.appendChild(entry);
+    logContainer.scrollTop = logContainer.scrollHeight;
+}
+
+function updateStatus(connected) {
+    const badge = document.getElementById('statusBadge');
+    const connectBtn = document.getElementById('connectBtn');
+    const disconnectBtn = document.getElementById('disconnectBtn');
+    
+    if (connected) {
+        badge.textContent = 'Connected';
+        badge.className = 'status-badge status-connected';
+        connectBtn.disabled = true;
+        disconnectBtn.disabled = false;
+    } else {
+        badge.textContent = 'Disconnected';
+        badge.className = 'status-badge status-disconnected';
+        connectBtn.disabled = false;
+        disconnectBtn.disabled = true;
+        document.getElementById('clientId').textContent = 'Not connected';
+        document.getElementById('sessionId').textContent = 'Not joined';
+    }
+}
+
+function updatePeerList() {
+    const peerList = document.getElementById('peerList');
+    if (peerConnections.size === 0) {
+        peerList.innerHTML = '<p style="color: #94a3b8;">No peers connected</p>';
+    } else {
+        peerList.innerHTML = '';
+        peerConnections.forEach((pc, peerId) => {
+            const peerItem = document.createElement('div');
+            peerItem.className = 'peer-item';
+            peerItem.textContent = peerId.substring(0, 8) + '...';
+            peerList.appendChild(peerItem);
+        });
+    }
+}
+
+window.connect = async function() {
+    const serverUrl = document.getElementById('serverUrl').value.trim();
+    const roomId = document.getElementById('roomId').value.trim();
+
+    if (!serverUrl) {
+        log('Please enter a server URL', 'error');
+        return;
+    }
+
+    if (!roomId) {
+        log('Please enter a room ID', 'error');
+        return;
+    }
+
+    try {
+            log(`Connecting to ${serverUrl}...`, 'info');
+        
+        // For Cloudflare, use /ws endpoint with room ID query param
+        let finalUrl = serverUrl;
+        if (serverUrl.includes('signal.peer.ooo')) {
+                finalUrl = `${serverUrl.replace(/\/$/, '')}/ws?room=${roomId}`;
+                log(`Using Cloudflare Durable Objects with session: ${roomId}`, 'info');
+        }
+        
+        client = new UniWRTCClient(finalUrl, { autoReconnect: false });
+        
+        client.on('connected', (data) => {
+                log(`Connected with client ID: ${data.clientId}`, 'success');
+            document.getElementById('clientId').textContent = data.clientId;
+            updateStatus(true);
+            
+            // Auto-join the room
+                log(`Joining session: ${roomId}`, 'info');
+            client.joinSession(roomId);
+        });
+
+        client.on('joined', (data) => {
+                log(`Joined session: ${data.sessionId}`, 'success');
+            document.getElementById('sessionId').textContent = data.sessionId;
+            
+            if (data.clients && data.clients.length > 0) {
+                    log(`Found ${data.clients.length} existing peers`, 'info');
+                data.clients.forEach(peerId => {
+                        log(`Creating connection to existing peer: ${peerId.substring(0, 6)}...`, 'info');
+                    createPeerConnection(peerId, true);
+                });
+            }
+        });
+
+        client.on('peer-joined', (data) => {
+            // Only handle peers in our session
+            if (client.sessionId && data.sessionId !== client.sessionId) {
+                    log(`Ignoring peer from different session: ${data.sessionId}`, 'warning');
+                return;
+            }
+            
+                log(`Peer joined: ${data.peerId.substring(0, 6)}...`, 'success');
+            
+            // Wait a bit to ensure both peers are ready
+            setTimeout(() => {
+                createPeerConnection(data.peerId, false);
+            }, 100);
+        });
+
+        client.on('peer-left', (data) => {
+                log(`Peer left: ${data.peerId.substring(0, 6)}...`, 'warning');
+            const pc = peerConnections.get(data.peerId);
+            if (pc) {
+                pc.close();
+                peerConnections.delete(data.peerId);
+                dataChannels.delete(data.peerId);
+                updatePeerList();
+            }
+        });
+
+        client.on('offer', async (data) => {
+                log(`Received offer from ${data.peerId.substring(0, 6)}...`, 'info');
+            const pc = peerConnections.get(data.peerId) || await createPeerConnection(data.peerId, false);
+            await pc.setRemoteDescription(new RTCSessionDescription(data.offer));
+            const answer = await pc.createAnswer();
+            await pc.setLocalDescription(answer);
+            client.sendAnswer(answer, data.peerId);
+                log(`Sent answer to ${data.peerId.substring(0, 6)}...`, 'success');
+        });
+
+        client.on('answer', async (data) => {
+                log(`Received answer from ${data.peerId.substring(0, 6)}...`, 'info');
+            const pc = peerConnections.get(data.peerId);
+            if (pc) {
+                await pc.setRemoteDescription(new RTCSessionDescription(data.answer));
+            }
+        });
+
+        client.on('ice-candidate', async (data) => {
+                log(`Received ICE candidate from ${data.peerId.substring(0, 6)}...`, 'info');
+            const pc = peerConnections.get(data.peerId);
+            if (pc && data.candidate) {
+                await pc.addIceCandidate(new RTCIceCandidate(data.candidate));
+            }
+        });
+
+        client.on('disconnected', () => {
+            log('Disconnected from server', 'error');
+            updateStatus(false);
+            peerConnections.forEach(pc => pc.close());
+            peerConnections.clear();
+            dataChannels.clear();
+            updatePeerList();
+        });
+
+        client.on('error', (data) => {
+                log(`Error: ${data.message}`, 'error');
+        });
+
+        await client.connect();
+    } catch (error) {
+            log(`Connection error: ${error.message}`, 'error');
+        updateStatus(false);
+    }
+};
+
+window.disconnect = function() {
+    if (client) {
+        client.disconnect();
+        client = null;
+        peerConnections.forEach(pc => pc.close());
+        peerConnections.clear();
+        dataChannels.clear();
+        updatePeerList();
+        updateStatus(false);
+        log('Disconnected', 'warning');
+    }
+};
+
+async function createPeerConnection(peerId, shouldInitiate) {
+    if (peerConnections.has(peerId)) {
+            log(`Peer connection already exists for ${peerId.substring(0, 6)}...`, 'warning');
+        return peerConnections.get(peerId);
+    }
+
+        log(`Creating peer connection with ${peerId.substring(0, 6)}... (shouldInitiate: ${shouldInitiate})`, 'info');
+
+    const pc = new RTCPeerConnection({
+        iceServers: [
+            { urls: ['stun:stun.l.google.com:19302', 'stun:stun1.l.google.com:19302'] }
+        ]
+    });
+
+    pc.onicecandidate = (event) => {
+        if (event.candidate) {
+                log(`Sending ICE candidate to ${peerId.substring(0, 6)}...`, 'info');
+            client.sendIceCandidate(event.candidate, peerId);
+        }
+    };
+
+    pc.ondatachannel = (event) => {
+            log(`Received data channel from ${peerId.substring(0, 6)}`, 'info');
+        setupDataChannel(peerId, event.channel);
+    };
+
+    if (shouldInitiate) {
+        const dc = pc.createDataChannel('chat');
+        setupDataChannel(peerId, dc);
+        
+        const offer = await pc.createOffer();
+        await pc.setLocalDescription(offer);
+        client.sendOffer(offer, peerId);
+            log(`Sent offer to ${peerId.substring(0, 6)}...`, 'success');
+    } else {
+            log(`Waiting for offer from ${peerId.substring(0, 6)}...`, 'info');
+    }
+
+    peerConnections.set(peerId, pc);
+    updatePeerList();
+    return pc;
+}
+
+function setupDataChannel(peerId, dataChannel) {
+    dataChannel.onopen = () => {
+            log(`Data channel open with ${peerId.substring(0, 6)}...`, 'success');
+    };
+
+    dataChannel.onmessage = (event) => {
+        displayChatMessage(event.data, `${peerId.substring(0, 6)}...`, false);
+    };
+
+    dataChannel.onclose = () => {
+            log(`Data channel closed with ${peerId.substring(0, 6)}...`, 'warning');
+        dataChannels.delete(peerId);
+    };
+
+    dataChannels.set(peerId, dataChannel);
+}
+
+window.sendChatMessage = function() {
+    const message = document.getElementById('chatMessage').value.trim();
+    
+    if (!message) {
+        return;
+    }
+
+    if (dataChannels.size === 0) {
+        log('No peer connections available. Wait for data channels to open.', 'error');
+        return;
+    }
+
+    // Send to all connected peers
+    let sent = 0;
+    dataChannels.forEach((dc, peerId) => {
+        if (dc.readyState === 'open') {
+            dc.send(message);
+            sent++;
+        }
+    });
+
+    if (sent > 0) {
+        displayChatMessage(message, 'You', true);
+        document.getElementById('chatMessage').value = '';
+    } else {
+        log('No open connections to send message', 'error');
+    }
+};
+
+function displayChatMessage(message, sender, isLocal) {
+    const chatContainer = document.getElementById('chatContainer');
+    
+    // Clear placeholder if needed
+    if (chatContainer.querySelector('p')) {
+        chatContainer.innerHTML = '';
+    }
+
+    const messageEl = document.createElement('div');
+    messageEl.className = 'log-entry';
+    messageEl.style.background = isLocal ? 'rgba(16, 185, 129, 0.1)' : 'rgba(100, 116, 139, 0.1)';
+        messageEl.innerHTML = `
+            <span style="color: ${isLocal ? '#10b981' : '#64748b'}; font-weight: bold;">${sender}:</span>
+            <span style="margin-left: 8px;">${message}</span>
+        `;
+    chatContainer.appendChild(messageEl);
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+}
+
+// Initialize
+updateStatus(false);
+log('UniWRTC Demo ready', 'success');

package/src/style.css

@@ -0,0 +1,210 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.header {
+    text-align: center;
+    color: white;
+    margin-bottom: 30px;
+}
+
+.header h1 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+}
+
+.header p {
+    font-size: 1.1em;
+    opacity: 0.9;
+}
+
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 25px;
+    margin-bottom: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.card h2 {
+    margin-bottom: 15px;
+    color: #333;
+    font-size: 1.5em;
+}
+
+.connection-controls {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+input {
+    width: 100%;
+    padding: 12px;
+    border: 2px solid #e0e0e0;
+    border-radius: 6px;
+    font-size: 14px;
+    transition: border-color 0.3s;
+}
+
+input:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+button {
+    padding: 12px 24px;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.btn-primary {
+    background: #667eea;
+    color: white;
+}
+
+.btn-primary:hover {
+    background: #5568d3;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.btn-secondary {
+    background: #e0e0e0;
+    color: #333;
+}
+
+.btn-secondary:hover {
+    background: #d0d0d0;
+}
+
+.btn-danger {
+    background: #ef4444;
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+}
+
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none !important;
+}
+
+.status-badge {
+    display: inline-block;
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.status-connected {
+    background: #10b981;
+    color: white;
+}
+
+.status-disconnected {
+    background: #ef4444;
+    color: white;
+}
+
+.log-container {
+    height: 250px;
+    overflow-y: auto;
+    background: #f9fafb;
+    border-radius: 6px;
+    padding: 15px;
+    font-family: 'Monaco', 'Courier New', monospace;
+    font-size: 13px;
+}
+
+.log-entry {
+    padding: 6px 10px;
+    margin-bottom: 4px;
+    border-radius: 4px;
+    background: rgba(100, 116, 139, 0.05);
+    line-height: 1.5;
+}
+
+.log-entry.success {
+    color: #059669;
+    background: rgba(16, 185, 129, 0.1);
+}
+
+.log-entry.error {
+    color: #dc2626;
+    background: rgba(239, 68, 68, 0.1);
+}
+
+.log-entry.info {
+    color: #2563eb;
+    background: rgba(37, 99, 235, 0.1);
+}
+
+.log-entry.warning {
+    color: #d97706;
+    background: rgba(245, 158, 11, 0.1);
+}
+
+.peer-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.peer-item {
+    background: #f3f4f6;
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #374151;
+}
+
+.chat-controls {
+    display: flex;
+    gap: 10px;
+    margin-top: 15px;
+}
+
+.chat-controls input {
+    flex: 1;
+}
+
+#chatContainer {
+    height: 300px;
+    overflow-y: auto;
+    background: #f9fafb;
+    border-radius: 6px;
+    padding: 15px;
+    margin-bottom: 15px;
+}
+
+#chatContainer p {
+    color: #64748b;
+    text-align: center;
+    padding: 20px;
+}

package/tests/e2e.spec.js

@@ -0,0 +1,332 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('UniWRTC Demo - Full Integration Tests', () => {
+  const BASE_URL = 'https://signal.peer.ooo';
+  const ROOM_ID = 'test';
+  
+  test.describe('Connection and Session Management', () => {
+    test('should load demo page and display UI', async ({ page }) => {
+      await page.goto(BASE_URL);
+      
+      // Check main elements exist
+      await expect(page.locator('h1')).toContainText('UniWRTC Demo');
+      await expect(page.locator('text=Connection')).toBeVisible();
+      await expect(page.getByTestId('serverUrl')).toHaveValue('wss://signal.peer.ooo');
+      await expect(page.getByTestId('roomId')).toHaveValue('demo-room');
+      await expect(page.getByTestId('connectBtn')).toBeVisible();
+    });
+
+    test('should connect to signaling server and join session', async ({ page }) => {
+      await page.goto(BASE_URL);
+      
+      // Click connect
+      await page.getByTestId('connectBtn').click();
+      
+      // Wait for connection success log
+      await expect(page.getByTestId('log-connected')).toBeVisible({ timeout: 10000 });
+      await expect(page.getByTestId('log-joined')).toBeVisible({ timeout: 10000 });
+      
+      // Check status changed to connected
+      const badge = page.getByTestId('statusBadge');
+      await expect(badge).toContainText('Connected');
+      
+      // Client ID should be populated
+      const clientId = page.getByTestId('clientId');
+      const clientIdText = await clientId.textContent();
+      expect(clientIdText).not.toContain('Not connected');
+      expect(clientIdText?.length).toBeGreaterThan(0);
+    });
+
+    test('should handle disconnect', async ({ page }) => {
+      await page.goto(BASE_URL);
+      
+      // Connect first
+      await page.getByTestId('connectBtn').click();
+      await expect(page.getByTestId('log-connected')).toBeVisible({ timeout: 10000 });
+      
+      // Now disconnect
+      await page.getByTestId('disconnectBtn').click();
+      
+      // Check status changed back to disconnected
+      const badge = page.getByTestId('statusBadge');
+      await expect(badge).toContainText('Disconnected');
+      await expect(page.getByTestId('clientId')).toContainText('Not connected');
+    });
+  });
+
+  test.describe('Multi-peer Session', () => {
+    test('should connect three peers and see peer-joined notifications', async ({ browser }) => {
+      // Open three browser contexts (simulating three users)
+      const context1 = await browser.newContext();
+      const page1 = await context1.newPage();
+      
+      const context2 = await browser.newContext();
+      const page2 = await context2.newPage();
+      
+      const context3 = await browser.newContext();
+      const page3 = await context3.newPage();
+      
+      try {
+        // Connect all three peers to same room
+        await page1.goto(BASE_URL);
+        await page2.goto(BASE_URL);
+        await page3.goto(BASE_URL);
+        
+        // Use shared room ID for all three peers
+        await page1.getByTestId('roomId').fill(ROOM_ID);
+        await page2.getByTestId('roomId').fill(ROOM_ID);
+        await page3.getByTestId('roomId').fill(ROOM_ID);
+        
+        // Connect peer 1
+        await page1.getByTestId('connectBtn').click();
+        await expect(page1.getByTestId('log-connected')).toBeVisible({ timeout: 10000 });
+        
+        // Connect peer 2
+        await page2.getByTestId('connectBtn').click();
+        await expect(page2.getByTestId('log-connected')).toBeVisible({ timeout: 10000 });
+        
+        // Peer 1 should see peer 2 joined (use .last() to get most recent)
+        await expect(page1.getByTestId('log-peer-joined').last()).toBeVisible({ timeout: 10000 });
+        
+        // Connect peer 3
+        await page3.getByTestId('connectBtn').click();
+        await expect(page3.getByTestId('log-connected')).toBeVisible({ timeout: 10000 });
+        
+        // Peer 2 should see peer 3 joined (use first() to avoid strict mode with multiple peer-joined logs)
+        await expect(page2.getByTestId('log-peer-joined').first()).toBeVisible({ timeout: 10000 });
+        
+        // All three should show peers in connected peers list
+        const peerList1 = page1.getByTestId('peerList');
+        const peerList2 = page2.getByTestId('peerList');
+        const peerList3 = page3.getByTestId('peerList');
+        
+        await expect(peerList1).not.toContainText('No peers connected');
+        await expect(peerList2).not.toContainText('No peers connected');
+        await expect(peerList3).not.toContainText('No peers connected');
+        
+      } finally {
+        await context1.close();
+        await context2.close();
+        await context3.close();
+      }
+    });
+
+    test('should open P2P data channels between three peers', async ({ browser }) => {
+      const context1 = await browser.newContext();
+      const page1 = await context1.newPage();
+      
+      const context2 = await browser.newContext();
+      const page2 = await context2.newPage();
+      
+      const context3 = await browser.newContext();
+      const page3 = await context3.newPage();
+      
+      try {
+        // Connect all three peers
+        await page1.goto(BASE_URL);
+        await page2.goto(BASE_URL);
+        await page3.goto(BASE_URL);
+        
+        await page1.getByTestId('roomId').fill(ROOM_ID);
+        await page2.getByTestId('roomId').fill(ROOM_ID);
+        await page3.getByTestId('roomId').fill(ROOM_ID);
+        
+        await page1.getByTestId('connectBtn').click();
+        await expect(page1.getByTestId('log-connected')).toBeVisible({ timeout: 10000 });
+        
+        await page2.getByTestId('connectBtn').click();
+        await expect(page2.getByTestId('log-connected')).toBeVisible({ timeout: 10000 });
+        
+        await page3.getByTestId('connectBtn').click();
+        await expect(page3.getByTestId('log-connected')).toBeVisible({ timeout: 10000 });
+        
+        // Give peers time to discover each other (wait a bit before checking peer-joined)
+        await page1.waitForTimeout(500);
+        
+        // Wait for peer-joined on all sides (use .last() to get most recent)
+        // For peer3, check if it has at least one peer-joined (it may not join from earlier connections)
+        await expect(page1.getByTestId('log-peer-joined').last()).toBeVisible({ timeout: 20000 });
+        await expect(page2.getByTestId('log-peer-joined').last()).toBeVisible({ timeout: 20000 });
+        
+        // Peer3 might have peer-joined logs, but even if not, it should eventually see data channels
+        try {
+          await expect(page3.getByTestId('log-peer-joined').last()).toBeVisible({ timeout: 20000 });
+        } catch (e) {
+          // It's OK if peer3 doesn't have peer-joined log initially, data channels will still establish
+        }
+        
+        // Wait for data channels to open - wait for at least one data channel log on each peer with extended timeout
+        await expect(page1.getByTestId('log-data-channel').first()).toBeVisible({ timeout: 25000 });
+        await expect(page2.getByTestId('log-data-channel').first()).toBeVisible({ timeout: 25000 });
+        await expect(page3.getByTestId('log-data-channel').first()).toBeVisible({ timeout: 25000 });
+        
+        // Wait longer to ensure all data channels are fully established
+        await page1.waitForTimeout(2000);
+        
+        // Check that we have at least 2 data channels (accumulation from parallel tests OK)
+        const dc1Count = await page1.getByTestId('logContainer').locator('[data-testid="log-data-channel"]').count();
+        const dc2Count = await page2.getByTestId('logContainer').locator('[data-testid="log-data-channel"]').count();
+        const dc3Count = await page3.getByTestId('logContainer').locator('[data-testid="log-data-channel"]').count();
+        
+        expect(dc1Count).toBeGreaterThanOrEqual(2);
+        expect(dc2Count).toBeGreaterThanOrEqual(2);
+        expect(dc3Count).toBeGreaterThanOrEqual(2);
+        
+      } finally {
+        await context1.close();
+        await context2.close();
+        await context3.close();
+      }
+    });
+
+    test('should send P2P chat messages between three peers', async ({ browser }) => {
+      const context1 = await browser.newContext();
+      const page1 = await context1.newPage();
+      
+      const context2 = await browser.newContext();
+      const page2 = await context2.newPage();
+      
+      const context3 = await browser.newContext();
+      const page3 = await context3.newPage();
+      
+      try {
+        // Connect all three peers
+        await page1.goto(BASE_URL);
+        await page2.goto(BASE_URL);
+        await page3.goto(BASE_URL);
+        
+        await page1.getByTestId('roomId').fill(ROOM_ID);
+        await page2.getByTestId('roomId').fill(ROOM_ID);
+        await page3.getByTestId('roomId').fill(ROOM_ID);
+        
+        await page1.getByTestId('connectBtn').click();
+        await expect(page1.getByTestId('log-connected')).toBeVisible({ timeout: 10000 });
+        
+        await page2.getByTestId('connectBtn').click();
+        await expect(page2.getByTestId('log-connected')).toBeVisible({ timeout: 10000 });
+        
+        await page3.getByTestId('connectBtn').click();
+        await expect(page3.getByTestId('log-connected')).toBeVisible({ timeout: 10000 });
+        
+        // Wait for data channels to open on all peers first with extended timeout
+        await expect(page1.getByTestId('log-data-channel').first()).toBeVisible({ timeout: 25000 });
+        await expect(page2.getByTestId('log-data-channel').first()).toBeVisible({ timeout: 25000 });
+        await expect(page3.getByTestId('log-data-channel').first()).toBeVisible({ timeout: 25000 });
+        
+        // Wait longer to ensure all data channels are fully established
+        await page1.waitForTimeout(2000);
+        
+        // Check that we have at least 2 data channels
+        const chat1Count = await page1.getByTestId('logContainer').locator('[data-testid="log-data-channel"]').count();
+        const chat2Count = await page2.getByTestId('logContainer').locator('[data-testid="log-data-channel"]').count();
+        const chat3Count = await page3.getByTestId('logContainer').locator('[data-testid="log-data-channel"]').count();
+        
+        expect(chat1Count).toBeGreaterThanOrEqual(2);
+        expect(chat2Count).toBeGreaterThanOrEqual(2);
+        expect(chat3Count).toBeGreaterThanOrEqual(2);
+        
+        // Send message from peer 1
+        const testMessage = 'Hello from Peer 1! ' + Date.now();
+        await page1.getByTestId('chatMessage').fill(testMessage);
+        await page1.getByTestId('sendBtn').click();
+        
+        // Wait for message to appear on all three with extended timeout
+        await expect(page1.locator(`text=${testMessage}`)).toBeVisible({ timeout: 15000 });
+        await expect(page2.locator(`text=${testMessage}`)).toBeVisible({ timeout: 15000 });
+        await expect(page3.locator(`text=${testMessage}`)).toBeVisible({ timeout: 15000 });
+        
+        // Send message from peer 2
+        const testMessage2 = 'Response from Peer 2! ' + Date.now();
+        await page2.getByTestId('chatMessage').fill(testMessage2);
+        await page2.getByTestId('sendBtn').click();
+        
+        // Wait for message to appear on all three
+        await expect(page1.locator(`text=${testMessage2}`)).toBeVisible({ timeout: 15000 });
+        await expect(page2.locator(`text=${testMessage2}`)).toBeVisible({ timeout: 15000 });
+        await expect(page3.locator(`text=${testMessage2}`)).toBeVisible({ timeout: 15000 });
+        
+        // Send message from peer 3
+        const testMessage3 = 'Third message from Peer 3! ' + Date.now();
+        await page3.getByTestId('chatMessage').fill(testMessage3);
+        await page3.getByTestId('sendBtn').click();
+        
+        // Wait for message to appear on all three
+        await expect(page1.locator(`text=${testMessage3}`)).toBeVisible({ timeout: 15000 });
+        await expect(page2.locator(`text=${testMessage3}`)).toBeVisible({ timeout: 15000 });
+        await expect(page3.locator(`text=${testMessage3}`)).toBeVisible({ timeout: 15000 });
+        
+        // Wait for message to appear on all three
+        await expect(page1.locator(`text=${testMessage3}`)).toBeVisible({ timeout: 5000 });
+        await expect(page2.locator(`text=${testMessage3}`)).toBeVisible({ timeout: 5000 });
+        await expect(page3.locator(`text=${testMessage3}`)).toBeVisible({ timeout: 5000 });
+        
+      } finally {
+        await context1.close();
+        await context2.close();
+        await context3.close();
+      }
+    });
+  });
+
+  test.describe('Session Isolation', () => {
+    test('should not connect peers from different sessions', async ({ browser }) => {
+      const context1 = await browser.newContext();
+      const page1 = await context1.newPage();
+      
+      const context2 = await browser.newContext();
+      const page2 = await context2.newPage();
+      
+      try {
+        // Connect to different rooms
+        await page1.goto(BASE_URL);
+        await page2.goto(BASE_URL);
+        
+        // Use different unique room IDs to ensure isolation
+        const roomA = `iso-a-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+        const roomB = `iso-b-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+        await page1.getByTestId('roomId').fill(roomA);
+        await page2.getByTestId('roomId').fill(roomB);
+        
+        await page1.getByTestId('connectBtn').click();
+        await expect(page1.getByTestId('log-connected')).toBeVisible({ timeout: 10000 });
+        
+        await page2.getByTestId('connectBtn').click();
+        await expect(page2.getByTestId('log-connected')).toBeVisible({ timeout: 10000 });
+        
+        // Wait a bit to see if peer-joined appears (it shouldn't)
+        await page1.waitForTimeout(3000);
+        
+        // Neither should see the other's peer-joined
+        const peerList1 = page1.getByTestId('peerList');
+        const peerList2 = page2.getByTestId('peerList');
+        
+        await expect(peerList1).toContainText('No peers connected');
+        await expect(peerList2).toContainText('No peers connected');
+        
+      } finally {
+        await context1.close();
+        await context2.close();
+      }
+    });
+  });
+
+  test.describe('Error Handling', () => {
+    test('should show error when server URL is empty', async ({ page }) => {
+      await page.goto(BASE_URL);
+      
+      await page.getByTestId('serverUrl').fill('');
+      await page.getByTestId('connectBtn').click();
+      
+      await expect(page.locator('text=Please enter a server URL')).toBeVisible({ timeout: 5000 });
+    });
+
+    test('should show error when room ID is empty', async ({ page }) => {
+      await page.goto(BASE_URL);
+      
+      await page.getByTestId('roomId').fill('');
+      await page.getByTestId('connectBtn').click();
+      
+      await expect(page.locator('text=Please enter a room ID')).toBeVisible({ timeout: 5000 });
+    });
+  });
+});

package/vite.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  root: '.',
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      input: {
+        main: './index.html'
+      }
+    }
+  }
+});

package/wrangler.toml

@@ -1,6 +1,7 @@
 name = "uniwrtc"
 main = "src/index.js"
 compatibility_date = "2024-12-20"
+workers_dev = false
 
 [[migrations]]
 tag = "v1"
@@ -19,5 +20,13 @@ routes = [
 name = "ROOMS"
 class_name = "Room"
 
+[env.production.assets]
+binding = "ASSETS"
+directory = "dist"
+
 [build]
-command = "npm install"
+command = "npm run build"
+
+[build.upload]
+format = "modules"
+directory = "dist"

package/test.js

@@ -1,62 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Simple test script for UniWRTC
- * Runs two clients and tests peer connections
- */
-
-const { UniWRTCClient } = require('./client.js');
-
-async function sleep(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-async function runTest() {
-  console.log('🚀 Starting UniWRTC Test...\n');
-
-  // Create two clients
-  const client1 = new UniWRTCClient('ws://localhost:8080');
-  const client2 = new UniWRTCClient('ws://localhost:8080');
-
-  try {
-    // Connect first client
-    console.log('📱 Connecting Client 1...');
-    const id1 = await client1.connect();
-    console.log(`✅ Client 1 connected with ID: ${id1}\n`);
-
-    await sleep(500);
-
-    // Connect second client
-    console.log('📱 Connecting Client 2...');
-    const id2 = await client2.connect();
-    console.log(`✅ Client 2 connected with ID: ${id2}\n`);
-
-    await sleep(500);
-
-    // Join same room
-    console.log('🏠 Client 1 joining room: test-room');
-    client1.joinRoom('test-room');
-    
-    await sleep(500);
-
-    console.log('🏠 Client 2 joining room: test-room');
-    client2.joinRoom('test-room');
-
-    await sleep(1000);
-
-    console.log('\n✨ Test complete! Both clients joined the room.');
-    console.log('📊 Peers in Client 1:', Array.from(client1.peers.keys()));
-    console.log('📊 Peers in Client 2:', Array.from(client2.peers.keys()));
-
-    // Cleanup
-    client1.disconnect();
-    client2.disconnect();
-    
-    process.exit(0);
-  } catch (error) {
-    console.error('❌ Test failed:', error.message);
-    process.exit(1);
-  }
-}
-
-runTest();