怎么往网站添加视频,网站建设模板51,天河建设网站方案,实现网站计划书实时显示当前在线人数的实现
本文档提供了在网页上实时显示当前在线人数的多种实现方法#xff0c;包括使用 WebSocket 实现实时更新和轮询方式实现非实时更新。 方法一#xff1a;使用 WebSocket 实现实时更新
服务器端设置
通过 Node.js 和 WebSocket 库#xff08;如 …实时显示当前在线人数的实现
本文档提供了在网页上实时显示当前在线人数的多种实现方法包括使用 WebSocket 实现实时更新和轮询方式实现非实时更新。 方法一使用 WebSocket 实现实时更新
服务器端设置
通过 Node.js 和 WebSocket 库如 ws实现服务器端逻辑
// server.js
const WebSocket require(ws);
const server new WebSocket.Server({ port: 8080 });let activeUsers 0;server.on(connection, (socket) {activeUsers;broadcastActiveUsers();socket.on(close, () {activeUsers--;broadcastActiveUsers();});
});function broadcastActiveUsers() {server.clients.forEach((client) {if (client.readyState WebSocket.OPEN) {client.send(activeUsers);}});
}console.log(WebSocket server is running on ws://localhost:8080);客户端设置
在前端页面通过 JavaScript 使用 WebSocket 获取实时用户数量
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleActive Users/title
/head
bodyh1当前在线人数span iduser-count0/span/h1scriptconst userCountElement document.getElementById(user-count);const socket new WebSocket(ws://localhost:8080);socket.onmessage (event) {userCountElement.textContent event.data;};/script
/body
/html方法二使用后端轮询非实时
服务器端逻辑
可以使用 Express.js 来提供一个 RESTful 接口
// Example: Express.js server
const express require(express);
const app express();let activeUsers 0;app.get(/active-users, (req, res) {res.json({ activeUsers });
});// Simulate user activity (for demonstration)
setInterval(() {activeUsers Math.floor(Math.random() * 100);
}, 1000);app.listen(3000, () console.log(Server running on http://localhost:3000));客户端逻辑
通过 fetch 定期获取用户数量
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleActive Users/title
/head
bodyh1当前在线人数span iduser-count0/span/h1scriptconst userCountElement document.getElementById(user-count);async function fetchUserCount() {try {const response await fetch(http://localhost:3000/active-users);const data await response.json();userCountElement.textContent data.activeUsers;} catch (error) {console.error(Failed to fetch user count:, error);}}// Poll every 5 secondssetInterval(fetchUserCount, 5000);fetchUserCount();/script
/body
/html方法三使用第三方服务
如果不想自己实现可以使用以下工具
Google AnalyticsGA设置并显示实时用户统计。Pusher 或 Firebase提供实时数据库和 WebSocket 功能。 选择适合的方案以满足实际需求。
