当前位置： 首页 > news >正文

前端实时显示当前在线人数的实现

news 文章来源：https://blog.csdn.net/boyzhaotian/article/details/145060080 2025/2/7 12:17:07

实时显示当前在线人数的实现

本文档提供了在网页上实时显示当前在线人数的多种实现方法，包括使用 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 功能。

选择适合的方案以满足实际需求。

相关文章：

前端实时显示当前在线人数的实现

实时显示当前在线人数的实现 本文档提供了在网页上实时显示当前在线人数的多种实现方法&#xff0c;包括使用 WebSocket 实现实时更新和轮询方式实现非实时更新。 方法一&#xff1a;使用 WebSocket 实现实时更新 服务器端设置 通过 Node.js 和 WebSocket 库&#xff08;如 …...

编程日记 2025/1/13 4:02:21

Linux第一个系统程序---进度条

进度条---命令行版本 回车换行 其实本质上回车和换行是不同概念&#xff0c;我们用一张图来简单的理解一下&#xff1a; 在计算机语言当中&#xff1a; 换行符&#xff1a;\n 回车符&#xff1a;\r \r\n&#xff1a;回车换行 这时候有人可能会有疑问&#xff1a;我在学习C…...

编程日记 2025/1/13 3:55:14

vscode 无法使用npm, cmd命令行窗口可以正常执行

解决方法&#xff1a; 执行命令获得命令的位置 get-command npm 得到如下 然后删除或者修改 npm.ps1文件 让其不能使用就行。然后重启vscode即可。 pnpm 同理即可 另外加速源 国内镜像源&#xff08;淘宝&#xff09;&#xff1a; npm config set registry https://regist…...

编程日记 2025/1/13 3:53:12

Leetcode 967 Numbers With Same Consecutive Differences

题意 给定n&#xff0c;代表整数的长度&#xff0c;给定k代表两个相邻数字之间的间隔。求所有的值构成的组合 题目链接 https://leetcode.com/problems/numbers-with-same-consecutive-differences/description/ 题解 dfs&#xff0c;有k位置要选&#xff0c;第一个位置我…...

编程日记 2025/1/13 3:50:09

node.js中实现token的生成与验证

Token&#xff08;令牌&#xff09;是一种用于在客户端和服务器之间安全传输信息的加密字符串。在Web开发中&#xff0c;Token常用于身份验证和授权&#xff0c;确保用户能够安全地访问受保护的资源。 作用与意义 身份验证&#xff1a;Token可以用来验证用户的身份&#xff0…...

编程日记 2025/1/13 3:49:08

[C++11]_[初级]_[工作线程如何监听主线程条件变量wait_for方法的使用]

场景 在开发多线程程序时&#xff0c;有时候需要启动一个线程来监听外部进程的执行情况&#xff0c;并且在指定时间如果还没运行结束就强制结束外部线程。那么C标准库有这种监听线程并能在超时时提示的方法吗&#xff1f; 说明 在C11的<condition_variable>里就可以用…...

编程日记 2025/1/13 3:45:02

Openstack持久存储-Swift,Cinder,Manila三者之间的区别

总结不易&#xff0c;给个三连吧&#xff01;&#xff01;&#xff01; 补充&#xff1a; 文件共享存储服务Manila 在OpenStack生态系统中&#xff0c;Cinder和Manila分别提供了两种不同类型的存储服务&#xff0c;类似于传统的SAN&#xff08;存储区域网络&#xff09;和NAS&…...

编程日记 2025/1/13 3:44:01

深度学习第三弹：python入门与线性表示代码

一、python入门 1.熟悉基础数据结构——整型数据&#xff0c;浮点型数据&#xff0c;列表&#xff0c;字典&#xff0c;字符串&#xff1b;了解列表及字典的切片&#xff0c;插入&#xff0c;删除操作。 list1 [1, 2, 3, 4, 5] for each in list1:print(each) print(list1[1…...

编程日记 2025/1/13 3:40:57

解决报错记录：TypeError: vars() argument must have __dict__ attribute

解决报错记录&#xff1a;manager_pyplot_show vars(manager_class).get(“pyplot_show“) TypeError: vars() argument must 1.问题引申 在pycharm中调用matplotlib函数批量绘制维度图时&#xff0c;抛出异常&#xff1a; manager_pyplot_show vars(manager_class).get(&…...

编程日记 2025/1/13 3:30:47

SpringBoot 原理篇（day14）

配置优先级 SpringBoot 中支持三种格式的配置文件&#xff1a; 配置文件优先级排名&#xff08;从高到低&#xff09;&#xff1a; properties 配置文件yml 配置文件yaml 配置文件 注意事项 虽然 springboot 支持多种格式配置文件&#xff0c;但是在项目开发时&#xff0c;推荐…...

编程日记 2025/1/13 3:27:42

Vscode辅助编码AI神器continue插件

案例效果 1、安装或者更新vscode 有些版本的vscode不支持continue，最好更新到最新版，也可以直接官网下载 https://code.visualstudio.com/Download 2、安装continue插件 搜索continue，还未安装的，右下脚有个Install，点击安装即可 <...

编程日记 2025/1/13 3:25:40

Type-C单口便携显示器-LDR6021

Type-C单口便携显示器是一种新兴的显示设备&#xff0c;它凭借其便携性、高性能和广泛的应用场景等优势&#xff0c;正在成为市场的新宠。以下是Type-C单口便携显示器的具体运用方式&#xff1a; 一、连接与传输 1. **设备连接**&#xff1a;Type-C单口便携显示器通过Type-C接…...

编程日记 2025/1/13 3:19:13

青少年编程与数学 02-006 前端开发框架VUE 19课题、内置组件

青少年编程与数学 02-006 前端开发框架VUE 19课题、内置组件 一、Transition<Transition> 组件基于 CSS 的过渡效果CSS 过渡 class为过渡效果命名CSS 的 transitionCSS 的 animation自定义过渡 class同时使用 transition 和 animation深层级过渡与显式过渡时长性能考量 J…...

编程日记 2025/1/13 3:15:54

腾讯云AI代码助手编程挑战赛 - 使用 JavaScript 构建一个简易日历

功能简介&#xff1a; 动态年份选择&#xff1a;用户可以通过下拉框选择从 2000 年到 2050 年的任意年份。全年日历生成&#xff1a;根据用户选择的年份&#xff0c;动态生成该年份的所有 12 个月份的日历。直观的 UI 设计&#xff1a;使用 CSS 美化日历外观&#xff0c;使日历…...

编程日记 2025/1/13 3:12:12

Xcode 正则表达式实现查找替换

在软件开发过程中&#xff0c;查找和替换文本是一项常见的任务。正则表达式&#xff08;Regular Expressions&#xff09;是一种强大的工具&#xff0c;可以帮助我们在复杂的文本中进行精确的匹配和替换。Xcode 作为一款流行的开发工具&#xff0c;提供了对正则表达式的支持。本…...

编程日记 2025/1/13 3:07:53

学习flv.js

前言 flv.js一款使用纯 JavaScript 编写的 HTML5 Flash 视频 (FLV) 播放器&#xff0c;无需 Flash&#xff01;&#xff01;&#xff01;flv.js 的工作原理是将 FLV 文件流转换为 ISO BMFF&#xff08;碎片 MP4&#xff09;片段&#xff0c;然后通过Media Source Extensions&l…...

编程日记 2025/1/13 3:06:52

FreePBX 17 on ubuntu24 with Asterisk 20

版本配置&#xff1a; FreePBX 17&#xff08;最新&#xff09; Asterisk 20&#xff08;最新Asterisk 22&#xff0c;但是FreePBX 17最新只支持Asterisk 21&#xff0c;但是21非LTS版本&#xff0c;所以选择Asterisk 20&#xff09; PHP 8.2 Maria DB (v10.11) Node J…...

编程日记 2025/1/13 3:05:47

【算法】算法大纲

这篇文章介绍计算机算法的各个思维模式。 包括 计数原理、数组、树型结构、链表递归栈、查找排序、管窥算法、图论、贪心法和动态规划、以及概率论：概率分治和机器学习。没有办法逐个说明，算法本身错综复杂，不同的算法对应着不同的实用场景，也需要根据具体情况设计与调整。…...

编程日记 2025/1/13 3:00:42

【MySQL】SQL菜鸟教程（一）

1.常见命令 1.1 总览 命令作用SELECT从数据库中提取数据UPDATE更新数据库中的数据DELETE从数据库中删除数据INSERT INTO向数据库中插入新数据CREATE DATABASE创建新数据库ALTER DATABASE修改数据库CREATE TABLE创建新表ALTER TABLE变更数据表DROP TABLE删除表CREATE INDEX创建…...

编程日记 2025/1/13 2:58:41

安装本地测试安装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 服…...

编程日记 2025/1/13 2:57:40

【Apache Paimon】-- 13 -- 利用 paimon-flink-action 同步 mysql 表数据

利用 Paimon Schema Evolution 核心特性同步变更的 mysql 表结构和数据 1、背景信息 在Paimon 诞生以前，若 mysql/pg 等数据源的表结构发生变化时，我们有几种处理方式 （1）人工通知（比如常规的使用邮件），然后运维人员手动同步到数据仓库中 （2）使用 flink 消费 DDL bi…...

编程日记 2025/1/13 2:55:37

IOS HTTPS代理抓包工具使用教程

打开抓包软件 在设备列表中选择要抓包的 设备&#xff0c;然后选择功能区域中的 HTTPS代理抓包。根据弹出的提示按照配置文件和设置手机代理。如果是本机则会自动配置&#xff0c;只需要按照提醒操作即可。 iOS 抓包准备 通过 USB 将 iOS 设备连接到电脑&#xff0c;设备需解…...

编程日记 2025/1/13 2:52:33

在 Ubuntu 22.04 上从 Wayland 切换到 X11的详细步骤

在 Ubuntu 22.04 上从 Wayland 切换到 X11&#xff0c;步骤其实很简单&#xff0c;主要是在登录界面进行选择。以下是详细的步骤&#xff1a; 步骤 1&#xff1a;退出当前会话 首先&#xff0c;点击屏幕右上角的用户菜单&#xff0c;选择 注销 或 退出&#xff0c;以退出当前…...

编程日记 2025/1/13 2:45:27

【Linux】4.Linux常见指令以及权限理解（2）

文章目录 3. Linux指令3.1 ls指令和rm指令补充3.2 man指令&#xff08;重要&#xff09;3.3cp指令&#xff08;重要&#xff09;输出重定向3.3.1ubuntu20.04如何安装tree 3.4 mv指令&#xff08;重要&#xff09;mv指令更改文件名mv指令更改目录名 如何看待指令指令的重命名3.5…...

编程日记 2025/1/13 2:44:26

ffmpeg aac s16 encode_audio.c

用ffmpeg库时&#xff0c;用代码对pcm内容采用aac编码进行压缩&#xff0c;出现如下错误。 [aac 000002bc5edc6e40] Format aac detected only with low score of 1, misdetection possible! [aac 000002bc5edc8140] Error decoding AAC frame header. [aac 000002bc5edc81…...

编程日记 2025/1/13 2:35:16

vue3监听器

1.侦听数据源类型 watch 的第一个参数可以是不同形式的“数据源”&#xff1a;它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组 const x ref(0) const y ref(0)// 单个 ref watch(x, (newX) > {console.log(x is ${newX}) …...

编程日记 2025/1/13 2:33:14

03-51单片机定时器和串口通信

一、51单片机定时器 1.定时器介绍 1.1为什么要使用定时器 在前面的学习中&#xff0c;用到了 Delay 函数延时&#xff0c;这里学习定时器以后&#xff0c;就可以通过定时器来完成&#xff0c;当然定时器的功能远不止这些&#xff1a; 51 单片机的定时器既可以定时&#xff…...

编程日记 2025/1/13 2:32:13

系统架构设计师考点—项目管理

一、备考指南 项目管理主要考查的是进度管理、软件配置管理、质量管理、风险管理等相关知识&#xff0c;近几年都没有考查过&#xff0c;但是有可能在案例分析中考查关键路径的技术问题&#xff0c;考生了解为主。 二、重点考点 1、项目的十大管理&#xff08;速记&#xff1…...

编程日记 2025/1/13 2:30:11

代码随想录算法训练营第三十二天|509.斐波那契数、70.爬楼梯、746.使用最小花费爬楼梯

目录 509.斐波那契数 动态规划五部曲&#xff1a; 1.确定dp数组&#xff08;dp table&#xff09;以及下标的含义 2.确定递推公式 3.dp数组如何初始化 4.确定遍历顺序 5.举例推导dp数组 70.爬楼梯 动态规划五部曲&#xff1a; 1.确定dp数组&#xff08;dp table&#xff09;…...

编程日记 2025/1/13 2:29:09

【2024年华为OD机试】 (A卷,100分)- 总最快检测效率（Java JS PythonC/C++）

一、问题描述 题目描述 在系统、网络均正常的情况下组织核酸采样员和志愿者对人群进行核酸检测筛查。 每名采样员的效率不同&#xff0c;采样效率为 N 人/小时。由于外界变化&#xff0c;采样员的效率会以 M 人/小时为粒度发生变化&#xff0c;M 为采样效率浮动粒度&#xf…...

编程日记 2025/1/13 2:25:03

网站制作排名/网站收录查询站长工具

安装tensorflow&#xff1a; pip install tensorflow-gpu2.3.0 -i https://pypi.tuna.tsinghua.edu.cn/simple pip install tensorflow 安装最新版tensorflow pip install tensorflow2.9.0 安装指定版本的tensorflow 查看Anaconda环境是否安装成功&#xff1a; conda --ve…...

编程日记 2025/2/7 11:50:39

vuejs 可做网站吗/seo流量工具

在Java中&#xff0c;如果方法重写只是一种名字空间的编写&#xff0c;那么它最多是让人感到有趣&#xff0c;但没有实际价值&#xff0c;但情况并非如此。方法重写构造成了Java最大的一个概念基础&#xff1a;动态方法调度&#xff08;dynamic method dispatch&#xff09;。动…...

编程日记 2025/2/7 11:32:06

做网站如何购买服务器/站内营销推广方案

一.小产权房签订合同注意事项 1.小产权房签订合同注意事项&#xff1a;应写明双方和小产权房的基本信息&#xff1b;价款的确定方式及总价款、付款方式、付款时间&#xff1b;交付使用条件和日期&#xff1b;质量标准承诺&#xff1b;配套基础设施和公共设施的交付承诺和责任&…...

编程日记 2025/2/7 9:56:04

河南外贸网站制作/推广app平台有哪些

开发 Qt for Python 应用程序会遇到很多不同的文件类型&#xff1a;ui, qrc, qml, pyproject 等。下面分别简单介绍一下它们。 Python文件 .py 在开发 Qt for Python 项目时&#xff0c;Python 文件是你最常遇见的文件格式。 值得注意的是&#xff0c;你可以抛开 .ui, .qrc,…...

编程日记 2025/2/7 7:18:11

响应式网站的概念/微信营销软件哪个好用

做silvelight也有一段时间了&#xff0c;相册、游戏&#xff0c;刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy。 数据篇-Loading的制作 silverlight自带了一个loading。但是由于界面的需求可能需要定制化一下。这里我的思路是做两个…...

编程日记 2025/2/7 1:58:26

建立个人博客wordpress/seo计费系统登录

实现思路 输入设备(用来获取外界信息) 摄像头, 麦克风, 键盘输出设备 (将收集到的信息, 做解析, 来获取收到的内容)会话session (用来连接输入和输出设备)特殊的layer (展示输入设备所采集的信息) 1. 导包 #import <AVFoundation/AVFoundation.h>2. 代码 #import "…...

编程日记 2025/2/6 22:53:03