testing online user display

app.js

@@ -6,6 +6,7 @@ var path = require('path');
 var server = http.createServer(app);
 var port = 8000;
 var osc = require('osc');
+var activeUsers = new Set(); // Active users Set
 
 var udpPort = new osc.UDPPort({
   // This is the port we're listening on.
@@ -21,13 +22,10 @@ var udpPort = new osc.UDPPort({
 // Open the socket.
 udpPort.open();
 
-
-
 const { SerialPort } = require('serialport')
 const { ReadlineParser } = require('@serialport/parser-readline')
 const sport = new SerialPort({ path: '/dev/ttyACM0', baudRate: 115200 })
 
-
 const parser = sport.pipe(new ReadlineParser({ delimiter: '\r\n' }))
 
 server.listen(port, () => {
@@ -39,7 +37,13 @@ app.use(express.static(path.join(__dirname, "public")));
 var io = require('socket.io')(server);
 
 io.on('connection', function(socket) {
-  console.log("A client connected!");
+  console.log("new user online!");
+
+  // Add the new socket ID to the activeUsers Set
+  activeUsers.add(socket.id);
+
+  // Emit the updated activeUsers Set to all connected clients
+  io.emit('activeUsers', Array.from(activeUsers));
 
   parser.on('data', function(data) {
     const msg = data.split(' ');
@@ -78,4 +82,14 @@ io.on('connection', function(socket) {
     socket.to('expo').emit(socket.id, msg);
   });
 
-});
+  // Handle disconnection event
+  socket.on('disconnect', () => {
+    console.log("new user online:", socket.id);
+
+    // Remove the disconnected socket ID from the activeUsers Set
+    activeUsers.delete(socket.id);
+
+    // Emit the updated activeUsers Set to all connected clients
+    io.emit('activeUsers', Array.from(activeUsers));
+  });
+});

public/index.html

@@ -19,6 +19,9 @@
         <div class="wrapper">
         <div class="flex-container">
                     <div class="flex-left">
+                      <div class="section" >
+                        <p>stream</p>  
+                        </div>
                         <div class="section" id="chat-window">
                           <ul id="messages"></ul>
                           <span><form id="form" action="">
@@ -34,8 +37,12 @@
                    
 
                      <div class="section" id="objective"><br><br><br><br>
-                        <p>OBJECTIVE:<br>RUN</p>  
+                        <p>OBJECTIVE:<br>You have lost your memory and wake up in a strange garage.</p>  
                         </div>
+                        <div class="section" >
+                          <p>users online: </p> 
+                          <ul id="user-log"></ul>    
+                          </div>
                      <!-- <div>
                         <embed class ="embed" src="https://hack.chat/?mtmw">
                      </div>
@@ -48,7 +55,7 @@
 
                     <p id="log-text"></p>   
                   </div>
-                        <div class="section" id="nav-console">
+                        <!-- <div class="section" id="nav-console">
                             
                             <p>DISTANCE: <span id="distance">0</span> km</p>
                       
@@ -72,7 +79,7 @@
                                     <span id="message">detecting....</span>
                                     </p>                               
                                 </div> 
-                        </div>
+                        </div> -->
                         <div class="section" id="dreamlog">
                             <p></p>  
                             </div>
@@ -178,37 +185,38 @@
     </body>
     <script>
       const socket = io();
-
+      const activeUsers = [];
+  
+      updateActiveUsers(); // Call it here to show active users on page load
+  
       socket.on('node-data', function(data) {
         console.log(data);
-
+  
         // Split the data into separate parts
         const [node, value] = data.split(' ');
-
+  
         document.getElementById('log-text').textContent = `user ${value} entered zone ${node}`;
-        
+  
         if (node === '3' && value === '15') {
           // Change the background color to red
           document.body.style.backgroundColor = 'red';
           document.getElementById('location-log').style.display = 'block';
-
-          } else if (node === 'node4' && value === '21') {
-            // Change the background color to blue
-            document.body.style.backgroundColor = 'blue';
-          } else {
-            // Restore the default background color
-            document.body.style.backgroundColor = rgb(26, 26, 26);
+        } else if (node === 'node4' && value === '21') {
+          // Change the background color to blue
+          document.body.style.backgroundColor = 'blue';
+        } else {
+          // Restore the default background color
+          document.body.style.backgroundColor = rgb(26, 26, 26);
         }
       });
-
+  
       //testing socket message from textinput field to arduino
       var messages = document.getElementById('messages');
       var chatHistory = localStorage.getItem('chatHistory');
-        if (chatHistory) {
-          messages.innerHTML = chatHistory;
-        }
-
-
+      if (chatHistory) {
+        messages.innerHTML = chatHistory;
+      }
+  
       function sendMessage() {
         const inputField = document.getElementById('input');
         const message = inputField.value;
@@ -220,18 +228,36 @@
         socket.emit('chat message', message);
         messages.scrollTop = messages.scrollHeight;
         localStorage.setItem('chatHistory', messages.innerHTML);
-        
-    }
-
-    socket.on('chat message', function(msg){
-      var item = document.createElement('li');
-      item.textContent = msg;
-      item.className = 'others';
-      messages.appendChild(item);
-      messages.scrollTop = messages.scrollHeight - messages.clientHeight;
-
-    });
-
-  </script>
+      }
+  
+      socket.on('chat message', function(msg) {
+        var item = document.createElement('li');
+        item.textContent = msg;
+        item.className = 'others';
+        messages.appendChild(item);
+        messages.scrollTop = messages.scrollHeight - messages.clientHeight;
+      });
+  
+      socket.on('connect', function() {
+        // Add the current socket ID to the activeUsers array
+        activeUsers.push(socket.id);
+        updateActiveUsers();
+      });
+  
+      socket.on('disconnect', function() {
+        // Remove the disconnected socket ID from the activeUsers array
+        const index = activeUsers.indexOf(socket.id);
+        if (index !== -1) {
+          activeUsers.splice(index, 1);
+          updateActiveUsers();
+        }
+      });
+  
+      function updateActiveUsers() {
+        const userLog = document.getElementById('user-log');
+        userLog.textContent = activeUsers.join(', ');
+      }
+    </script>
+    
    <script type="text/javascript" src="js/input.js"></script>
 </html>