Update client-channel.js

Author: benhatsor

worker/client-channel.js

@@ -4,7 +4,7 @@
 
 
 // update worker name when updating worker
-const WORKER_NAME = 'codeit-worker-v501';
+const WORKER_NAME = 'codeit-worker-v502';
 
 
 // internal paths
@@ -22,6 +22,11 @@ const INTERNAL_PATHS = {
 }
 
 
+// key                : value
+// live view client ID: codeit client ID
+let liveViewClients = {};
+
+
 // get path type
 function getPathType(path) {
 
@@ -72,51 +77,56 @@ function createResponse(data, type, status) {
 
 
 // send fetch request to client
-function sendRequestToClient(request) {
+function sendRequestToClient(request, clientId) {
 
   return new Promise((resolve, reject) => {
 
+    // get client ID
+    const clientId = liveViewClients[clientId] ?? clientId;
+    
+    let url = request.url;
+
+    // append .html to url if navigating
+    if (request.mode === 'navigate'
+        && !url.endsWith('.html')
+        && !url.endsWith('/')) url += '.html';
+    
+    // send request to client
+    workerChannel.postMessage({
+      url: url,
+      toClient: clientId,
+      type: 'request'
+    });
+    
+
     // set MIME type depending on request mode
     let mimeType = 'application/octet-stream';
 
     if (request.mode === 'navigate'
-        || request.url.endsWith('.html')) mimeType = 'text/html';
+        || url.endsWith('.html')) mimeType = 'text/html';
 
     if (request.mode === 'script'
-        || request.url.endsWith('.js')) mimeType = 'text/javascript';
+        || url.endsWith('.js')) mimeType = 'text/javascript';
 
     if (request.mode === 'style'
-        || request.url.endsWith('.css')) mimeType = 'text/css';
+        || url.endsWith('.css')) mimeType = 'text/css';
+
+    if (url.endsWith('.wasm')) mimeType = 'application/wasm';
 
-    if (request.url.endsWith('.wasm')) mimeType = 'application/wasm';
 
     if (enableDevLogs) {
       console.warn(mimeType, request.mode, request.url);
     }
 
 
-    let url = request.url;
-
-    // append .html to url if navigating
-    if (request.mode === 'navigate'
-        && !url.endsWith('.html')
-        && !url.endsWith('/')) url += '.html';
-
-
-    // send request to client
-    workerChannel.postMessage({
-      url: url,
-      type: 'request'
-    });
-
-
     // add worker/client channel listener
 
     function workerListener(event) {
 
       // if response url matches
       if (event.data.type === 'response' &&
-          event.data.url === url) {
+          event.data.url === url &&
+          event.data.fromClient === clientId) {
 
         if (enableDevLogs) {
           console.debug('[ServiceWorker] Recived response data from client', event.data);
@@ -186,9 +196,27 @@ function handleFetchRequest(request, event) {
       if (enableDevLogs) {
         console.debug('[ServiceWorker] Intercepted live fetch', request.url, request);
       }
+      
+      
+      const clientId = event.clientId;
+      
+      // if codeit client is creating a new live view
+      if (clientId && event.resultingClientId) {
+        
+        // add live view to client array
+        
+        const parentClientId = event.clientId;
+        const liveViewClientId = event.resultingClientId;
+        
+        // pair live view client ID
+        // with codeit client ID
+        // in client array
+        liveViewClients[liveViewClientId] = parentClientId;
+        
+      }
 
       // return response from client
-      resolve(sendRequestToClient(request));
+      resolve(sendRequestToClient(request, clientId));
 
     } else if (pathType === 'clientId') { // if fetching client ID