const express = require('express');
const axios = require('axios');
const mysql = require('mysql');
const app = express();
// MySQL Connection
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root@123',
database: 'abc',
});
connection.connect((err) => {
if (err) {
console.error('Error connecting to MySQL:', err);
return;
}
console.log('Connected to MySQL database');
});
// Express Middleware
app.set('view engine', 'ejs');
app.use(express.urlencoded({ extended: false }));
// Routes
app.get('/users', (req, res) => {
connection.query('SELECT * FROM users', (err, results) => {
if (err) {
console.error('Error fetching users:', err);
res.status(500).send('Internal Server Error');
return;
}
res.render('users', { users: results });
});
});
app.get('/user/status', async (req, res) => {
const { userId } = req.query;
try {
await axios.get('http://192.168.0.198:7005/users', { timeout: 1000 });
connection.query(
'UPDATE users SET online_status = ? WHERE id = ?',
['online', userId],
(err, results) => {
console.log(results);
if (err) {
console.error('Error updating user status:', err);
res.status(500).send('Internal Server Error');
return;
}
res.json({ isOnline: true });
}
);
} catch (error) {
connection.query(
'UPDATE users SET online_status = ? WHERE id = ?',
['offline', userId],
(err, results) => {
if (err) {
console.error('Error updating user status:', err);
res.status(500).send('Internal Server Error');
return;
}
res.json({ isOnline: false });
}
);
}
});
// Start the server
const port = 7005;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
////////////////////// ejs page ////////////////
<!DOCTYPE html>
<html>
<head>
<title>User List</title>
</head>
<body>
<h1>User List</h1>
<table>
<tr>
<th>ID</th>
<th>Username</th>
<th>Status</th>
</tr>
<% users.forEach(user => { %>
<tr>
<td>
<%= user.id %>
</td>
<td>
<%= user.username %>
</td>
<td id="status-<%= user.id %>">Loading...</td>
</tr>
<% }); %>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
// Function to update user status
function updateUserStatus(userId, status) {
const statusElement = $('#status-' + userId);
if (status === 0) {
statusElement.text('Offline');
statusElement.removeClass('online');
statusElement.addClass('offline');
} else {
$.ajax({
url: '/user/status',
type: 'GET',
data: { userId: userId },
success: function (data) {
if (data.isOnline) {
statusElement.text('Online');
statusElement.removeClass('offline');
statusElement.addClass('online');
} else {
statusElement.text('Offline');
statusElement.removeClass('online');
statusElement.addClass('offline');
}
},
error: function (err) {
// Handle network error
statusElement.text('Offline');
statusElement.removeClass('online');
statusElement.addClass('offline');
console.error('Error updating user status:', err);
}
});
}
}
// Initial user status update
<% users.forEach(user => { %>
updateUserStatus(<%= user.id %>, <%= user.status %>);
<% }); %>
// Periodically update user statuses every 5 seconds
setInterval(function () {
<% users.forEach(user => { %>
updateUserStatus(<%= user.id %>, <%= user.status %>);
<% }); %>
}, 5000);
});
</script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.online {
color: green;
}
.offline {
color: rgb(233, 64, 12);
}
</style>
</body>
</html>
0 Comments