Initial commit

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+.env
+*lock.json

Dockerfile

@@ -0,0 +1,29 @@
+FROM node:18-slim
+
+# Switch to the node user
+USER node
+
+# Set environment variables for the user
+ENV HOME=/home/node \
+    PATH=/home/node/.local/bin:$PATH
+
+# Set the working directory
+WORKDIR $HOME/app
+
+# Copy the package.json and package-lock.json files to the working directory
+COPY --chown=node:node package*.json ./
+
+# Install Node.js dependencies
+RUN npm install
+
+# Copy the application code to the working directory
+COPY --chown=node:node . .
+
+# Ensure the ownership of the directory to the node user
+RUN chown -R node:node .
+
+# Expose the port the app runs on
+EXPOSE 7860
+
+# Command to run the Node.js server
+CMD ["node", "index.js"]

README.md

@@ -0,0 +1,10 @@
+---
+title: Placemenext
+emoji: 🏢
+colorFrom: purple
+colorTo: indigo
+sdk: docker
+pinned: false
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.js

@@ -0,0 +1,204 @@
+
+// server.js
+
+const express = require('express');
+const http = require('http');
+const WebSocket = require('ws');
+const path = require('path');
+
+const app = express();
+const port = 7860;
+
+// Serve static files (if any)
+app.use(express.static('public'));
+
+// Data structures to store client data
+const clients = {};
+
+// HTTP server
+const server = http.createServer(app);
+
+// WebSocket server
+const wss = new WebSocket.Server({ server });
+
+// Handle new WebSocket connections
+wss.on('connection', (ws) => {
+    const clientId = generateId();
+    clients[clientId] = {
+        ws: ws,
+        html: '',
+        css: '',
+        url: ''
+    };
+
+    console.log(`Client ${clientId} connected`);
+
+    ws.on('message', (message) => {
+        try {
+            const data = JSON.parse(message);
+
+            if (data.type === 'sessionInfo') {
+               if(data.sessionId){
+                   clients[clientId].sessionId = data.sessionId;
+               }
+            }
+
+            if (data.type === 'pageContent') {
+                clients[clientId].html = data.html;
+                clients[clientId].css = data.css;
+                clients[clientId].url = data.url;
+            } else if (data.type === 'userInteraction') {
+                // Handle user interactions if needed
+                console.log(`Interaction from ${clientId}:`, data);
+            }
+        } catch (e) {
+            console.error('Error parsing message:', e);
+        }
+    });
+
+    ws.on('close', () => {
+        console.log(`Client ${clientId} disconnected`);
+        delete clients[clientId];
+    });
+});
+
+// Generate a unique client ID
+function generateId() {
+    return Math.random().toString(36).substr(2, 9);
+}
+
+// Tailwind Play CDN for including Tailwind CSS
+const tailwindCDN = `<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">`;
+
+// Route to list all active clients
+app.get('/', (req, res) => {
+    // Get the list of active clients
+    const clientKeys = Object.keys(clients);
+
+    // If no clients are available
+    if (clientKeys.length === 0) {
+        return res.send(`
+            ${tailwindCDN}
+            <div class="min-h-screen flex items-center justify-center bg-gray-100">
+                <h1 class="text-2xl font-bold text-gray-800">No Active Clients</h1>
+            </div>
+        `);
+    }
+
+    // Render the list of active clients using Tailwind
+    let clientListHTML = `
+        ${tailwindCDN}
+        <div class="min-h-screen bg-gray-100 py-10 px-4">
+            <h1 class="text-4xl font-bold text-center mb-10 text-gray-800">Active Clients</h1>
+            <div class="max-w-4xl mx-auto">
+                <ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+    `;
+
+    // Loop through each client and create a link for each one
+    clientKeys.forEach(clientId => {
+        clientListHTML += `
+            <li class="bg-white shadow-md rounded-lg p-6 hover:shadow-lg transition duration-300 ease-in-out">
+                <a href="/clientCSS/${clientId}" class="block text-lg font-semibold text-blue-600 hover:text-blue-800">
+                    Client ID: ${clientId}
+                    Session Name : ${clients[clientId].sessionId  ?? "No Session Name"}
+                </a>
+            </li>
+        `;
+    });
+
+    clientListHTML += `
+                </ul>
+            </div>
+        </div>
+    `;
+
+    // Send the rendered HTML response
+    res.send(clientListHTML);
+});
+
+// Route to render the client's page
+app.get('/client/:id', (req, res) => {
+    const client = clients[req.params.id];
+    if (client) {
+        res.send(client.html);
+    } else {
+        res.status(404).send('Client not found');
+    }
+});
+
+app.get('/clientCSS/:id', (req, res) => {
+    const client = clients[req.params.id];
+    if (client) {
+        let htmlContent = client.html;
+
+        // Inject the CSS into a style tag in the head
+        const cssTag = `<style>${client.css}</style>`;
+        htmlContent = htmlContent.replace('</head>', `${cssTag}</head>`);
+
+        //remove all script tags
+        htmlContent = htmlContent.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "");
+
+        //enable copy paste
+        htmlContent = htmlContent.replace(/-webkit-user-select: none;/gi, "");
+        htmlContent = htmlContent.replace(/user-select: none;/gi, "");
+        htmlContent = htmlContent.replace(/-moz-user-select: none;/gi, "");
+        htmlContent = htmlContent.replace(/-ms-user-select: none;/gi, "");
+        htmlContent = htmlContent.replace(/-o-user-select: none;/gi, "");
+
+        //enable right click
+        htmlContent = htmlContent.replace(/oncontextmenu="return false;"/gi, "");
+        htmlContent = htmlContent.replace(/onselectstart="return false;"/gi, "");
+        htmlContent = htmlContent.replace(/onselect="return false;"/gi, "");
+        htmlContent = htmlContent.replace(/ondragstart="return false;"/gi, "");
+        htmlContent = htmlContent.replace(/onmousedown="return false;"/gi, "");
+        htmlContent = htmlContent.replace(/onmouseup="return false;"/gi, "");
+        htmlContent = htmlContent.replace(/onselectstart="return false;"/gi, "");
+        htmlContent = htmlContent.replace(/onselect="return false;"/gi, "");
+        htmlContent = htmlContent.replace(/oncopy="return false;"/gi, "");
+
+        //add css to allow copy paste
+
+        //add css to allow right click
+
+        //add custom js code
+
+        
+        htmlContent = htmlContent.replace('</body>', `<script>
+            
+
+            function addGlobalStyle() {
+            const style = document.createElement('style');
+            style.innerHTML = ` + `"* { user-select: text !important; -webkit-user-select: text !important; -ms-user-select: text !important; cursor: text !important; }"` + `;
+            document.head.appendChild(style);
+        }
+            
+              function enableCopyPaste() {
+            document.oncopy = null;
+            document.onpaste = null;
+            document.oncut = null;
+            document.oncontextmenu = null;
+            document.onselectstart = null;
+
+            // Also enabling right-click
+            document.addEventListener('contextmenu', function(e) {
+                e.stopPropagation(); // Stop propagation of right-click blocking
+            }, true);
+        }
+
+        // Wait for the page to load before enabling copy-paste
+        window.addEventListener('DOMContentLoaded', (event) => {
+            enableCopyPaste();
+            addGlobalStyle();
+        });
+            </script></body>`);
+
+        res.send(htmlContent);
+    } else {
+        res.status(404).send('Client not found');
+    }
+});
+
+// Start the server
+server.listen(port, () => {
+    console.log(`Server is listening on http://localhost:${port}`);
+});

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "node_server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.21.0",
+    "ws": "^8.18.0"
+  }
+}

temp.js

@@ -0,0 +1,159 @@
+const express = require('express');
+const http = require('http');
+const WebSocket = require('ws');
+const path = require('path');
+
+const app = express();
+const port = 8080;
+
+// Serve static files (if any)
+app.use(express.static('public'));
+
+// Data structures to store client data
+const clients = {};
+
+// HTTP server
+const server = http.createServer(app);
+
+// WebSocket server
+const wss = new WebSocket.Server({ server });
+
+// Handle new WebSocket connections
+wss.on('connection', (ws) => {
+  let clientId = null;
+
+  ws.on('message', (message) => {
+    try {
+      const data = JSON.parse(message);
+
+      if (!clientId && data.clientId) {
+        clientId = data.clientId;
+        clients[clientId] = {
+          ws: ws,
+          html: '',
+          css: '',
+          url: ''
+        };
+        console.log(`Client ${clientId} connected`);
+      }
+
+      if (data.type === 'pageContent') {
+        clients[clientId].html = data.html;
+        clients[clientId].css = data.css;
+        clients[clientId].url = data.url;
+      } else if (data.type === 'keyboardEvent') {
+        // Relay the keyboard event to other clients
+        relayKeyboardEvent(data, clientId);
+      }
+    } catch (e) {
+      console.error('Error parsing message:', e);
+    }
+  });
+
+  ws.on('close', () => {
+    console.log(`Client ${clientId} disconnected`);
+    delete clients[clientId];
+  });
+});
+
+// Function to relay keyboard events to other clients
+function relayKeyboardEvent(data, senderId) {
+  // Send the keyboard event to all connected clients except the sender
+  for (const [id, client] of Object.entries(clients)) {
+    if (id !== senderId) {
+      client.ws.send(JSON.stringify(data));
+    }
+  }
+}
+
+// Route to list all active clients
+app.get('/clients', (req, res) => {
+  res.json(Object.keys(clients));
+});
+
+// Route to render the client's page
+app.get('/client/:id', (req, res) => {
+  const client = clients[req.params.id];
+  if (client) {
+    let htmlContent = client.html;
+
+    // Inject the CSS into a style tag in the head
+    const cssTag = `<style>${client.css}</style>`;
+    htmlContent = htmlContent.replace('</head>', `${cssTag}</head>`);
+
+    // Inject the script to establish WebSocket connection
+    const scriptTag = `
+      <script>
+        (function() {
+          const socket = new WebSocket('ws://' + location.host);
+
+          const clientId = '${req.params.id}-page';
+
+          socket.addEventListener('open', () => {
+            console.log('WebSocket connection opened from rendered page');
+          });
+
+          socket.addEventListener('message', (event) => {
+            const data = JSON.parse(event.data);
+
+            // Ignore messages originating from this client
+            if (data.clientId === clientId) return;
+
+            if (data.type === 'keyboardEvent') {
+              simulateKeyboardEvent(data.event);
+            }
+          });
+
+          // Send keyboard events to the server
+          function sendKeyboardEvent(event) {
+            const data = {
+              type: 'keyboardEvent',
+              event: serializeKeyboardEvent(event),
+              clientId: clientId
+            };
+            socket.send(JSON.stringify(data));
+          }
+
+          // Serialize keyboard event properties
+          function serializeKeyboardEvent(event) {
+            return {
+              type: event.type,
+              key: event.key,
+              code: event.code,
+              keyCode: event.keyCode,
+              charCode: event.charCode,
+              which: event.which,
+              altKey: event.altKey,
+              ctrlKey: event.ctrlKey,
+              metaKey: event.metaKey,
+              shiftKey: event.shiftKey,
+              repeat: event.repeat,
+              isComposing: event.isComposing,
+            };
+          }
+
+          // Simulate keyboard event
+          function simulateKeyboardEvent(eventData) {
+            const event = new KeyboardEvent(eventData.type, eventData);
+            document.activeElement.dispatchEvent(event);
+          }
+
+          // Listen for keyboard events
+          ['keydown', 'keypress', 'keyup'].forEach(eventType => {
+            document.addEventListener(eventType, sendKeyboardEvent, true);
+          });
+        })();
+      </script>
+    `;
+    htmlContent = htmlContent.replace('</body>', `${scriptTag}</body>`);
+
+    res.send(htmlContent);
+  } else {
+    res.status(404).send('Client not found');
+  }
+});
+
+// Start the server
+server.listen(port, () => {
+  console.log(`Server is listening on http://localhost:${port}`);
+});