uniwrtc 1.0.3 → 1.0.6

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

@@ -125,6 +125,7 @@ class UniWRTCClient {
   }
 
   sendOffer(offer, targetId) {
+    console.log(`[Client] Sending offer to ${targetId}`);
     this.send({
       type: 'offer',
       offer: offer,
@@ -134,6 +135,7 @@ class UniWRTCClient {
   }
 
   sendAnswer(answer, targetId) {
+    console.log(`[Client] Sending answer to ${targetId}`);
     this.send({
       type: 'answer',
       answer: answer,
@@ -143,6 +145,7 @@ class UniWRTCClient {
   }
 
   sendIceCandidate(candidate, targetId) {
+    console.log(`[Client] Sending ICE candidate to ${targetId}`);
     this.send({
       type: 'ice-candidate',
       candidate: candidate,
@@ -210,18 +213,21 @@ class UniWRTCClient {
         });
         break;
       case 'offer':
+        console.log(`[Client] Received offer from ${message.peerId}`);
         this.emit('offer', {
           peerId: message.peerId,
           offer: message.offer
         });
         break;
       case 'answer':
+        console.log(`[Client] Received answer from ${message.peerId}`);
         this.emit('answer', {
           peerId: message.peerId,
           answer: message.answer
         });
         break;
       case 'ice-candidate':
+        console.log(`[Client] Received ICE candidate from ${message.peerId}`);
         this.emit('ice-candidate', {
           peerId: message.peerId,
           candidate: message.candidate
@@ -254,3 +260,6 @@ class UniWRTCClient {
 if (typeof window !== 'undefined') {
   window.UniWRTCClient = UniWRTCClient;
 }
+
+// ESM default export for bundlers like Vite
+export default UniWRTCClient;

package/demo.html

@@ -314,7 +314,7 @@
                 <p style="color: #999; text-align: center; padding: 20px;">Messages will appear here</p>
             </div>
             <div class="connection-controls" style="margin-bottom: 0;">
-                <input type="text" id="chatMessage" placeholder="Type a message..." style="grid-column: 1 / -1;">
+                <input type="text" id="chatMessage" placeholder="Type a message..." style="grid-column: 1 / -1;" onkeypress="if(event.key === 'Enter') sendChatMessage()">
                 <button class="btn-primary" onclick="sendChatMessage()" style="grid-column: 1 / -1;">Send Message</button>
             </div>
         </div>        <div class="card">

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.3",
+  "version": "1.0.6",
   "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,9 @@
   "dependencies": {
     "ws": "^8.17.1"
   },
+  "devDependencies": {
+    "vite": "^6.0.6"
+  },
   "engines": {
     "node": ">=14.0.0"
   }

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,379 @@
+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" 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" placeholder="my-room">
+                </div>
+            </div>
+            <div style="display: flex; gap: 10px; align-items: center;">
+                <button onclick="window.connect()" class="btn-primary" id="connectBtn">Connect</button>
+                <button onclick="window.disconnect()" class="btn-danger" id="disconnectBtn" disabled>Disconnect</button>
+                <span id="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" style="font-family: monospace; color: #333; margin-top: 5px;">Not connected</div>
+                </div>
+                <div>
+                    <strong style="color: #64748b;">Session ID:</strong>
+                    <div id="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" 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">
+                <p>Connect to a room and wait for peers to start chatting</p>
+            </div>
+            <div class="chat-controls">
+                <input type="text" id="chatMessage" placeholder="Type a message..." onkeypress="if(event.key === 'Enter') window.sendChatMessage()">
+                <button onclick="window.sendChatMessage()" class="btn-primary">Send</button>
+            </div>
+        </div>
+
+        <div class="card">
+            <h2>Activity Log</h2>
+            <div id="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}`;
+    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();
+    }
+};
+
+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/room.js

@@ -79,10 +79,14 @@ export class Room {
   async handleJoin(clientId, message) {
     const { sessionId, peerId } = message;
     
+    console.log(`[Room] Client ${clientId} joining session ${sessionId}`);
+    
     // Get list of other peers
     const peers = Array.from(this.clients.keys())
       .filter(id => id !== clientId);
     
+    console.log(`[Room] Existing peers in session:`, peers);
+    
     const client = this.clients.get(clientId);
     if (client && client.readyState === WebSocket.OPEN) {
       // Send joined confirmation (align with server schema)
@@ -95,6 +99,7 @@ export class Room {
     }
     
     // Notify other peers
+    console.log(`[Room] Broadcasting peer-joined for ${clientId}`);
     this.broadcast({
       type: 'peer-joined',
       sessionId: sessionId,

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/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"