前端实时显示当前在线人数的实现
实时显示当前在线人数的实现
本文档提供了在网页上实时显示当前在线人数的多种实现方法，包括使用 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 lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Active Users</title>
</head>
<body><h1>当前在线人数：<span id="user-count">0</span></h1><script>const 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 lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Active Users</title>
</head>
<body><h1>当前在线人数：<span id="user-count">0</span></h1><script>const 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 Analytics（GA）：设置并显示实时用户统计。
- Pusher 或 Firebase：提供实时数据库和 WebSocket 功能。
选择适合的方案以满足实际需求。
相关文章：
前端实时显示当前在线人数的实现
实时显示当前在线人数的实现 本文档提供了在网页上实时显示当前在线人数的多种实现方法，包括使用 WebSocket 实现实时更新和轮询方式实现非实时更新。 方法一：使用 WebSocket 实现实时更新 服务器端设置 通过 Node.js 和 WebSocket 库（如 …...
Linux第一个系统程序---进度条
进度条---命令行版本 回车换行 其实本质上回车和换行是不同概念，我们用一张图来简单的理解一下： 在计算机语言当中： 换行符：\n 回车符：\r \r\n：回车换行 这时候有人可能会有疑问：我在学习C…...
vscode 无法使用npm, cmd命令行窗口可以正常执行
解决方法： 执行命令获得命令的位置 get-command npm 得到如下 然后删除或者修改 npm.ps1文件 让其不能使用就行。然后重启vscode即可。 pnpm 同理即可 另外加速源 国内镜像源（淘宝）： npm config set registry https://regist…...
Leetcode 967 Numbers With Same Consecutive Differences
题意 给定n，代表整数的长度，给定k代表两个相邻数字之间的间隔。求所有的值构成的组合 题目链接 https://leetcode.com/problems/numbers-with-same-consecutive-differences/description/ 题解 dfs，有k位置要选，第一个位置我…...
node.js中实现token的生成与验证
Token（令牌）是一种用于在客户端和服务器之间安全传输信息的加密字符串。在Web开发中，Token常用于身份验证和授权，确保用户能够安全地访问受保护的资源。 作用与意义 身份验证：Token可以用来验证用户的身份࿰…...
[C++11]_[初级]_[工作线程如何监听主线程条件变量wait_for方法的使用]
场景 在开发多线程程序时，有时候需要启动一个线程来监听外部进程的执行情况，并且在指定时间如果还没运行结束就强制结束外部线程。那么C标准库有这种监听线程并能在超时时提示的方法吗？ 说明 在C11的<condition_variable>里就可以用…...
Openstack持久存储-Swift,Cinder,Manila三者之间的区别
总结不易，给个三连吧！！！ 补充： 文件共享存储服务Manila 在OpenStack生态系统中，Cinder和Manila分别提供了两种不同类型的存储服务，类似于传统的SAN（存储区域网络）和NAS&…...
深度学习第三弹：python入门与线性表示代码
一、python入门 1.熟悉基础数据结构——整型数据，浮点型数据，列表，字典，字符串；了解列表及字典的切片，插入，删除操作。 list1 [1, 2, 3, 4, 5] for each in list1:print(each) print(list1[1…...
解决报错记录：TypeError: vars() argument must have __dict__ attribute
解决报错记录：manager_pyplot_show vars(manager_class).get(“pyplot_show“) TypeError: vars() argument must 1.问题引申 在pycharm中调用matplotlib函数批量绘制维度图时，抛出异常： manager_pyplot_show vars(manager_class).get(&…...
SpringBoot 原理篇（day14）
配置优先级 SpringBoot 中支持三种格式的配置文件： 配置文件优先级排名（从高到低）： properties 配置文件yml 配置文件yaml 配置文件 注意事项 虽然 springboot 支持多种格式配置文件，但是在项目开发时，推荐…...
Vscode辅助编码AI神器continue插件
案例效果 1、安装或者更新vscode 有些版本的vscode不支持continue，最好更新到最新版，也可以直接官网下载 https://code.visualstudio.com/Download 2、安装continue插件 搜索continue，还未安装的，右下脚有个Install，点击安装即可 <...
Type-C单口便携显示器-LDR6021
Type-C单口便携显示器是一种新兴的显示设备，它凭借其便携性、高性能和广泛的应用场景等优势，正在成为市场的新宠。以下是Type-C单口便携显示器的具体运用方式： 一、连接与传输 1. **设备连接**：Type-C单口便携显示器通过Type-C接…...
青少年编程与数学 02-006 前端开发框架VUE 19课题、内置组件
青少年编程与数学 02-006 前端开发框架VUE 19课题、内置组件 一、Transition<Transition> 组件基于 CSS 的过渡效果CSS 过渡 class为过渡效果命名CSS 的 transitionCSS 的 animation自定义过渡 class同时使用 transition 和 animation深层级过渡与显式过渡时长性能考量 J…...
腾讯云AI代码助手编程挑战赛 - 使用 JavaScript 构建一个简易日历
功能简介： 动态年份选择：用户可以通过下拉框选择从 2000 年到 2050 年的任意年份。全年日历生成：根据用户选择的年份，动态生成该年份的所有 12 个月份的日历。直观的 UI 设计：使用 CSS 美化日历外观，使日历…...
Xcode 正则表达式实现查找替换
在软件开发过程中，查找和替换文本是一项常见的任务。正则表达式（Regular Expressions）是一种强大的工具，可以帮助我们在复杂的文本中进行精确的匹配和替换。Xcode 作为一款流行的开发工具，提供了对正则表达式的支持。本…...
学习flv.js
前言 flv.js一款使用纯 JavaScript 编写的 HTML5 Flash 视频 (FLV) 播放器，无需 Flash！！！flv.js 的工作原理是将 FLV 文件流转换为 ISO BMFF（碎片 MP4）片段，然后通过Media Source Extensions&l…...
FreePBX 17 on ubuntu24 with Asterisk 20
版本配置： FreePBX 17（最新） Asterisk 20（最新Asterisk 22，但是FreePBX 17最新只支持Asterisk 21，但是21非LTS版本，所以选择Asterisk 20） PHP 8.2 Maria DB (v10.11) Node J…...
【算法】算法大纲
这篇文章介绍计算机算法的各个思维模式。 包括 计数原理、数组、树型结构、链表递归栈、查找排序、管窥算法、图论、贪心法和动态规划、以及概率论：概率分治和机器学习。没有办法逐个说明，算法本身错综复杂，不同的算法对应着不同的实用场景，也需要根据具体情况设计与调整。…...
【MySQL】SQL菜鸟教程（一）
1.常见命令 1.1 总览 命令作用SELECT从数据库中提取数据UPDATE更新数据库中的数据DELETE从数据库中删除数据INSERT INTO向数据库中插入新数据CREATE DATABASE创建新数据库ALTER DATABASE修改数据库CREATE TABLE创建新表ALTER TABLE变更数据表DROP TABLE删除表CREATE INDEX创建…...
安装本地测试安装apache-doris
一、安装前规划 我的服务器是三台麒麟服务器，2台跑不起来，这是我本地的，内存分配的也不多。 fe192.168.1.13 主数据库端口9030访问 8Gbe192.168.1.13内存4G 硬盘50be192.168.1.14内存4G 硬盘50be192.168.1.12内存4G 硬盘5013同时安装的fe和be 。 原理：192.168.1.13 服…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
.Net框架，除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档：Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后，会在本地和远程创建数据库： npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库： 现在，您的Cloudfla…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具
第2章 虚拟机性能监控，故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...
【JVM】Java虚拟机（二）——垃圾回收
目录 一、如何判断对象可以回收 （一）引用计数法 （二）可达性分析算法 二、垃圾回收算法 （一）标记清除 （二）标记整理 （三）复制 （四ÿ…...
群晖NAS如何在虚拟机创建飞牛NAS
套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...
Bean 作用域有哪些？如何答出技术深度？
导语： Spring 面试绕不开 Bean 的作用域问题，这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开，结合典型面试题及实战场景，帮你厘清重点，打破模板式回答，…...
TJCTF 2025
还以为是天津的。这个比较容易，虽然绕了点弯，可还是把CP AK了，不过我会的别人也会，还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...
边缘计算网关提升水产养殖尾水处理的远程运维效率
一、项目背景 随着水产养殖行业的快速发展，养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下，而且难以实现精准监控和管理。为了提升尾水处理的效果和效率，同时降低人力成本，某大型水产养殖企业决定…...