added server.js with the ability to send a validation request to the client for view purposes

Brian Genisio · Brian Genisio · commit 7227388fd94d · 2025-05-22T07:37:32.000-04:00
diff --git a/README.md b/README.md
@@ -4,9 +4,11 @@
 
 1. Clone the repository
 2. Add questions to the `questions.json` file
-3. Run `python server.py` to start the server
+3. Run `node server.js` to start the server
 4. Open `localhost:3000` in your browser
 
+Note: the legacy way of doing it was `python server.py` but python does not support websockets out of the box where Node.js does.  So `server.py` is deprecated in favor of `server.js`.
+
 ## How to add questions
 
 Questions are stored in the `questions.json` file. The questions are stored in an array of objects. Each object represents a question and has the following properties:
@@ -27,3 +29,11 @@ As the user interacts with the quiz, the answers are stored in the `answers.json
 
 To run the solution, run `python format_answers.py`. This will read the `questions.json` and `answers.json` files and format the answers into a human readable format.
 
+## How to display the correct/incorrect state to the user
+First, you must use the `node` version of the server (`server.js`). It exposes a websocket and a `/validate` endpoint you can POST to. It will request the HTML to annotate the UX.
+
+If you want the Web UX to display the correct/incorrect state to the user, you can make a request to the quiz server:
+```
+curl -X POST localhost:3000/validate &> /dev/null
+```
+
diff --git a/index.html b/index.html
@@ -20,7 +20,6 @@
     </style>
 </head>
 <body>
-    <button onClick="validateAnswers()">Validate Answers</button>
     <div id="surveyContainer"></div>
 
     
@@ -31,6 +30,39 @@
         let saveTimeout;
         let answers = {};
         let validating = false;
+        let socket = null;
+
+        // Initialize WebSocket connection
+        function connectWebSocket() {
+            try {
+                socket = new WebSocket(`ws://${window.location.host}`);
+                
+                socket.onopen = () => {
+                    console.log('WebSocket connected');
+                };
+
+                socket.onmessage = (event) => {
+                    validateAnswers();
+                };
+
+                socket.onclose = () => {
+                    console.log('WebSocket disconnected');
+                    
+                    // Try to reconnect after a few seconds
+                    setTimeout(connectWebSocket, 5000);
+                    socket = null;
+                };
+
+                socket.onerror = (error) => {
+                    console.error('WebSocket error:', error);
+                };
+            } catch (e) {
+                console.error('Failed to connect WebSocket:', e);
+                
+                // Try to reconnect after a few seconds
+                setTimeout(connectWebSocket, 5000);
+            }
+        }
 
         Promise.all([
             fetch('/questions.json')
@@ -53,6 +85,9 @@
             survey.onValueChanged.add(onValueChanged);
             survey.onTextMarkdown.add(onTextMarkdown);
             survey.render(document.getElementById("surveyContainer"));
+            
+            // Connect to the WebSocket server after survey is initialized
+            connectWebSocket();
         })
         .catch(error => console.error('Error loading data:', error));
 
diff --git a/server.js b/server.js
@@ -1,6 +1,10 @@
 const http = require('http');
 const fs = require('fs');
 const path = require('path');
+const WebSocket = require('ws');
+
+// Store active WebSocket connections
+const clients = new Set();
 
 class RequestHandler {
   constructor(req, res) {
@@ -19,7 +23,8 @@ class RequestHandler {
 
   handleGet() {
     // Serve static files like SimpleHTTPRequestHandler
-    const filePath = path.join(process.cwd(), this.req.url === '/' ? 'index.html' : this.req.url);
+    const url = new URL(this.req.url, `http://${this.req.headers.host}`);
+    const filePath = path.join(process.cwd(), url.pathname === '/' ? 'index.html' : url.pathname);
     
     fs.readFile(filePath, (err, data) => {
       if (err) {
@@ -82,6 +87,19 @@ class RequestHandler {
           this.sendJsonResponse(400, { error: 'Invalid JSON' });
         }
       });
+    } else if (this.req.url === '/validate') {
+      // Send message to all connected WebSocket clients
+      clients.forEach(client => {
+        if (client.readyState === WebSocket.OPEN) {
+          client.send(JSON.stringify({ type: 'validate' }));
+        }
+      });
+      
+      this.sendJsonResponse(200, { 
+        status: 'success', 
+        message: 'Validation message sent to all connected clients',
+        clientCount: clients.size
+      });
     } else {
       this.sendJsonResponse(404, { error: 'Not Found' });
     }
@@ -110,8 +128,30 @@ function runServer(port = 3000) {
       }
     });
     
+    // Create WebSocket server using the ws module
+    const wss = new WebSocket.Server({ server });
+    
+    wss.on('connection', (ws, req) => {
+      // Add new client to the Set
+      clients.add(ws);
+      console.log('WebSocket connection established, total clients:', clients.size);
+      
+      // Handle WebSocket connection close
+      ws.on('close', () => {
+        clients.delete(ws);
+        console.log('WebSocket connection closed, remaining clients:', clients.size);
+      });
+      
+      // Handle errors
+      ws.on('error', (error) => {
+        console.error('WebSocket error:', error);
+        clients.delete(ws);
+      });
+    });
+    
     server.listen(port, () => {
       console.log(`Server running on port ${port}...`);
+      console.log(`WebSocket server available at ws://localhost:${port}`);
     });
     
     server.on('error', (e) => {
