Adding optional websockets to the server example

Author: Brian Genisio

README.md

@@ -98,6 +98,47 @@ modal.updateContent(newHelpContent);
 modal.destroy();
 ```
 
+## Server
+
+This template includes a local development server (`server.js`) that provides:
+- Static file serving for your application
+- WebSocket support for real-time messaging
+- A REST API for triggering client-side alerts
+
+### Starting the Server
+
+```bash
+node server.js
+```
+
+The server will start on `http://localhost:3000` by default.
+
+### WebSocket Messaging API
+
+The server provides a `POST /message` endpoint that allows you to send real-time messages to connected clients. This can be used to signal changes in the client during events like "Run" or "Submit". When a message is sent, the preview window with the application open will display an alert with the message. 
+
+It uses the `ws` package, so if you want to use it, install `ws`.
+
+```
+npm install ws
+```
+
+#### Endpoint: `POST /message`
+
+**Request Format:**
+```json
+{
+  "message": "Your message here"
+}
+```
+
+**Example using curl:**
+```bash
+curl -X POST http://localhost:3000/message \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Hello from the server!"}'
+```
+
 ## File Structure
 
 ```

app.js

@@ -1,11 +1,59 @@
 // app.js
 (function() {
   const status = document.getElementById('status');
+  let websocket = null;
 
   function setStatus(msg) {
     status.textContent = msg;
   }
 
+  // Initialize WebSocket connection
+  function initializeWebSocket() {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const host = window.location.host;
+    const wsUrl = `${protocol}//${host}`;
+    
+    try {
+      websocket = new WebSocket(wsUrl);
+      
+      websocket.onopen = function(event) {
+        console.log('WebSocket connected');
+        setStatus('Ready (WebSocket connected)');
+      };
+      
+      websocket.onmessage = function(event) {
+        try {
+          const data = JSON.parse(event.data);
+          if (data.type === 'message' && data.message) {
+            alert(data.message);
+          }
+        } catch (error) {
+          console.error('Error parsing WebSocket message:', error);
+        }
+      };
+      
+      websocket.onclose = function(event) {
+        console.log('WebSocket disconnected');
+        setStatus('Ready (WebSocket disconnected)');
+        
+        // Attempt to reconnect after 3 seconds
+        setTimeout(() => {
+          console.log('Attempting to reconnect WebSocket...');
+          initializeWebSocket();
+        }, 3000);
+      };
+      
+      websocket.onerror = function(error) {
+        console.error('WebSocket error:', error);
+        setStatus('Ready (WebSocket error)');
+      };
+      
+    } catch (error) {
+      console.error('Failed to create WebSocket connection:', error);
+      setStatus('Ready (WebSocket unavailable)');
+    }
+  }
+
   // Load help content and initialize modal
   async function initializeHelpModal() {
     try {
@@ -32,10 +80,15 @@
     }
   }
 
-  // Initialize when DOM is ready
+  // Initialize both help modal and WebSocket when DOM is ready
+  function initialize() {
+    initializeHelpModal();
+    initializeWebSocket();
+  }
+
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initializeHelpModal);
+    document.addEventListener('DOMContentLoaded', initialize);
   } else {
-    initializeHelpModal();
+    initialize();
   }
 })();

package.json

@@ -3,8 +3,23 @@ const fs = require('fs');
 const path = require('path');
 const url = require('url');
 
+// Try to load WebSocket module, fallback if not available
+let WebSocket = null;
+let isWebSocketAvailable = false;
+try {
+  WebSocket = require('ws');
+  isWebSocketAvailable = true;
+  console.log('WebSocket support enabled');
+} catch (error) {
+  console.log('WebSocket support disabled (ws package not installed)');
+  console.log('Install with: npm install ws');
+}
+
 const PORT = 3000;
 
+// Track connected WebSocket clients
+const wsClients = new Set();
+
 // MIME types for different file extensions
 const mimeTypes = {
   '.html': 'text/html',
@@ -39,10 +54,69 @@ function serveFile(filePath, res) {
   });
 }
 
+// Handle POST requests
+function handlePostRequest(req, res) {
+  const parsedUrl = url.parse(req.url, true);
+  
+  if (parsedUrl.pathname === '/message') {
+    let body = '';
+    
+    req.on('data', chunk => {
+      body += chunk.toString();
+    });
+    
+    req.on('end', () => {
+      try {
+        const data = JSON.parse(body);
+        const message = data.message;
+        
+        if (!message) {
+          res.writeHead(400, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ error: 'Message is required' }));
+          return;
+        }
+        
+        // Check if WebSocket is available
+        if (!isWebSocketAvailable) {
+          res.writeHead(503, { 'Content-Type': 'application/json' });
+          res.end(JSON.stringify({ 
+            error: 'WebSocket functionality not available', 
+            details: 'Install the ws package with: npm install ws' 
+          }));
+          return;
+        }
+        
+        // Broadcast message to all connected WebSocket clients
+        wsClients.forEach(client => {
+          if (client.readyState === WebSocket.OPEN) {
+            client.send(JSON.stringify({ type: 'message', message: message }));
+          }
+        });
+        
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ success: true, clientCount: wsClients.size }));
+        
+      } catch (error) {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Invalid JSON' }));
+      }
+    });
+  } else {
+    res.writeHead(404, { 'Content-Type': 'text/plain' });
+    res.end('Not found');
+  }
+}
+
 // Create HTTP server
 const server = http.createServer((req, res) => {
   const parsedUrl = url.parse(req.url, true);
   let pathname = parsedUrl.pathname;
+  
+  // Handle POST requests
+  if (req.method === 'POST') {
+    handlePostRequest(req, res);
+    return;
+  }
 
   // Default to index.html for root path
   if (pathname === '/') {
@@ -72,9 +146,34 @@ const server = http.createServer((req, res) => {
   });
 });
 
+// Create WebSocket server only if WebSocket is available
+if (isWebSocketAvailable) {
+  const wss = new WebSocket.Server({ server });
+
+  wss.on('connection', (ws) => {
+    console.log('New WebSocket client connected');
+    wsClients.add(ws);
+    
+    ws.on('close', () => {
+      console.log('WebSocket client disconnected');
+      wsClients.delete(ws);
+    });
+    
+    ws.on('error', (error) => {
+      console.error('WebSocket error:', error);
+      wsClients.delete(ws);
+    });
+  });
+}
+
 // Start server
 server.listen(PORT, () => {
   console.log(`Server running at http://localhost:${PORT}`);
+  if (isWebSocketAvailable) {
+    console.log(`WebSocket server running on the same port`);
+  } else {
+    console.log(`WebSocket functionality disabled - install 'ws' package to enable`);
+  }
   console.log(`Serving files from: ${__dirname}`);
   console.log('Press Ctrl+C to stop the server');
 });