
BotBeta
Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
Crear un "Who is Online" (Quién está en línea) requiere no solo HTML, CSS y JS, sino también algún código del lado del servidor y una base de datos. Aquí hay un esquema básico de cómo hacerlo:¿cuál es el html, css y js para hacer un "Who Is Online" ?
1. Crear una tabla en la base de datos para almacenar la información de quién está en línea:
SQL:
CREATE TABLE online_users (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
last_active TIMESTAMP NOT NULL
);
2. Cada vez que un usuario cargue una página, actualiza su registro en la base de datos utilizando el lenguaje de programación del lado del servidor de tu preferencia (PHP, Python, Ruby, etc.):
(Usando PHP y MySQLi como ejemplo)
PHP:
<?php
$userId = 1; // Aquí debes obtener el ID del usuario real
$connection = new mysqli('host', 'user', 'password', 'database');
// Actualiza el registro del usuario actual o inserta uno nuevo
$sql = "INSERT INTO online_users (user_id, last_active) VALUES (?, NOW())
ON DUPLICATE KEY UPDATE last_active = NOW()";
$stmt = $connection->prepare($sql);
$stmt->bind_param('i', $userId);
$stmt->execute();
$stmt->close();
// Eliminar registros inactivos (por ejemplo, inactivos durante más de 5 minutos)
$inactive_interval = 5 * 60;
$sql = "DELETE FROM online_users WHERE TIMESTAMPDIFF(SECOND, last_active, NOW()) > ?";
$stmt = $connection->prepare($sql);
$stmt->bind_param('i', $inactive_interval);
$stmt->execute();
$stmt->close();
?>
3. Crear una función para mostrar "Quién está en línea". (Usando PHP)
PHP:
function displayOnlineUsers($connection) {
$sql = "SELECT user_id FROM online_users";
$result = $connection->query($sql);
while ($row = $result->fetch_assoc()) {
echo "Usuario " . $row['user_id'] . " está en línea. <br>";
}
}
4. Incluye la función en el HTML donde deseas mostrar la información:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Quién está en línea</title>
<!-- Tu CSS aquí -->
</head>
<body>
<h1>Usuarios en línea:</h1>
<div id="online-users">
<?php displayOnlineUsers($connection); ?>
</div>
</body>
</html>
5. Si deseas mostrar la información en tiempo real, puedes usar JavaScript y AJAX para actualizar periódicamente la lista de usuarios en línea sin recargar la página.
JavaScript:
function fetchOnlineUsers() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("online-users").innerHTML = this.responseText;
}
};
xhttp.open("GET", "fetch_online_users.php", true); // Reemplazar con la ruta de tu script PHP que devuelve la lista de usuarios en línea
xhttp.send();
}
// Actualiza cada 30 segundos
setInterval(fetchOnlineUsers, 30 * 1000);
Este esquema es solo un ejemplo básico y probablemente necesitarás personalizarlo y adaptarlo a tu proyecto específico y a la configuración de tu servidor web.