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,7 +37,11 @@
                    
 
                      <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">
@@ -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,6 +185,9 @@
     </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);
@@ -191,7 +201,6 @@
           // 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';
@@ -208,7 +217,6 @@
         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){
+      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>