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

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

news 2026/2/9 21:17:37

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

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

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

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

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

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

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

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

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

Leetcode 967 Numbers With Same Consecutive Differences

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

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

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

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

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

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

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

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

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

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

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

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

一、python入门 1.熟悉基础数据结构——整型数据，浮点型数据，列表，字典，字符串；了解列表及字典的切片，插入，删除操作。 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

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

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

SpringBoot 原理篇（day14）

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

编程日记 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单口便携显示器是一种新兴的显示设备，它凭借其便携性、高性能和广泛的应用场景等优势，正在成为市场的新宠。以下是Type-C单口便携显示器的具体运用方式： 一、连接与传输 1. **设备连接**：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 构建一个简易日历

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

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

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

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

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

学习flv.js

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

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

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…...

编程日记 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

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园二、准备工作 1. 编译环境宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

SciencePlots——绘制论文中的图片

文章目录安装一、风格二、1 资源安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源论文绘图神器来了：一行…...

编程新知 2025/9/8 13:50:07

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...

编程新知 2026/1/29 20:58:41

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...

编程新知 2026/1/26 13:21:10

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别直接训练提示词嵌入向量的核心区别您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/8 2:27:29