前端实时显示当前在线人数的实现
实时显示当前在线人数的实现
本文档提供了在网页上实时显示当前在线人数的多种实现方法，包括使用 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 服…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的，根据Excel列的需求预估的工时直接打骨折，不要问我为什么，主要…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！
5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。 项目投运后，每年可节约标煤3670…...
从零实现STL哈希容器：unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念，确保一个租户（在这个系统中可能是一个公司或一个独立的客户）的数据对其他租户是不可见的。在 RuoYi 框架（您当前项目所使用的基础框架）中，这通常是通过在数据表中增加一个…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机，因为在使用过程中发现 Airsim 对外部监控相机的描述模糊，而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置，最后在源码示例中找到了，所以感…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...