testing online user display

master
louisa 1 year ago
parent d5c6c76eb8
commit 7ed88546b4

@ -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));
});
});

@ -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>

Loading…
Cancel
Save