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

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

本文档提供了在网页上实时显示当前在线人数的多种实现方法,包括使用 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):设置并显示实时用户统计。
  • PusherFirebase:提供实时数据库和 WebSocket 功能。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/67766.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

线性表的接口定义及使用

定义接口 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace _001_线性表 {interface IListDS<T>//定义接口{int GetLength();void Clear();bool IsEmpty();void Add(T item);void Inser…

直流无刷电机控制(FOC):电流模式

目录 概述 1 系统框架结构 1.1 硬件模块介绍 1.2 硬件实物图 1.3 引脚接口定义 2 代码实现 2.1 软件架构 2.2 电流检测函数 3 电流环功能实现 3.1 代码实现 3.2 测试代码实现 4 测试 概述 本文主要介绍基于DengFOC的库函数&#xff0c;实现直流无刷电机控制&#x…

Vue3 + vue-virtual-scroller虚拟列表实现加载长列表

一、安装 github地址&#xff1a;https://vue-virtual-scroller-demo.netlify.app/chat demo运行地址&#xff1a;https://vue-virtual-scroller-demo.netlify.app/chat npm安装&#xff1a; npm install --save vue-virtual-scrollernextyarn安装&#xff1a; yarn add vu…

Google发布图像生成新工具Whisk:无需复杂提示词,使用图像和人工智能将想法可视化并重新混合

Whisk 是 Google Labs 的一项新实验&#xff0c;可使用图像进行快速而有趣的创作过程。Whisk不会生成带有长篇详细文本提示的图像&#xff0c;而是使用图像进行提示。只需拖入图像&#xff0c;即可开始创建。 whisk总结如下&#xff1a; Whisk 是 Google 实验室最新的生成图像实…

【面试题】技术场景 4、负责项目时遇到的棘手问题及解决方法

工作经验一年以上程序员必问问题 面试题概述 问题为在负责项目时遇到的棘手问题及解决方法&#xff0c;主要考察开发经验与技术水平&#xff0c;回答不佳会影响面试印象。提供四个回答方向&#xff0c;准备其中一个方向即可。 1、设计模式应用方向 以登录为例&#xff0c;未…

MySQL 子查询(重在练习)

第九章: 子查询 1.子查询的需求分析和问题解决 1.1基本使用 子查询(内查询)在主查询之前一次执行完成 子查询的结果被主查询(外查询)调用 注意事项 子查询要包含在括号内 将子查询放在比较条件的右侧 单行操作符对应单行子查询,多行操作符对应多行子查询 1.2子查询的分类…

物联网开发 的开发语言建议

对于物联网开发&#xff0c;选择合适的编程语言取决于具体的项目需求、硬件平台以及开发团队的技能。以下是几种常用的物联网开发语言及其适用场景&#xff0c;特别考虑到您当前的工作空间中包含 JavaScript 和 Vue 等技术栈&#xff1a; JavaScript (Node.js) 优点&#xff1a…

LeetCode:3298. 统计重新排列后包含另一个字符串的子字符串数目 II(滑动窗口 Java)

目录 3298. 统计重新排列后包含另一个字符串的子字符串数目 II 题目描述&#xff1a; 实现代码与解析&#xff1a; 滑动窗口 原理思路&#xff1a; 3298. 统计重新排列后包含另一个字符串的子字符串数目 II 题目描述&#xff1a; 给你两个字符串 word1 和 word2 。 如果…

海外招聘丨卡尔斯塔德大学—互联网隐私和安全副高级讲师

雇主简介 卡尔斯塔德大学以研究、教育和合作为基础。通过让社区参与知识发展&#xff0c;卡尔斯塔德大学为地区、国家和国际研究和教育发展做出了贡献&#xff0c;旨在提高可持续性、民主和健康。我们富有创造力的学术环境以好奇心、勇气和毅力为特征。通过采取批判性方法&…

CTFshow—文件包含

Web78-81 Web78 这题是最基础的文件包含&#xff0c;直接?fileflag.php是不行的&#xff0c;不知道为啥&#xff0c;直接用下面我们之前在命令执行讲过的payload即可。 ?filephp://filter/readconvert.base64-encode/resourceflag.php Web79 这题是过滤了php&#xff0c;…

iOS实际开发中使用Alamofire实现多文件上传(以个人相册为例)

引言 在移动应用中&#xff0c;图片上传是一个常见的功能&#xff0c;尤其是在个人中心或社交平台场景中&#xff0c;用户经常需要上传图片到服务器&#xff0c;用以展示个人风采或记录美好瞬间。然而&#xff0c;实现多图片上传的过程中&#xff0c;如何设计高效的上传逻辑并…

Cannot run program “docker“: CreateProcess error=2,系统找不到指定的文件

今天被这个问题坑了, 网上教程全是直接装插件就行 ,结果我连接可以成功 但是执行docker compose 就会出错, 检测配置 报错com.intellil,execution,process.ProcessNotCreatedException: Cannot run program “docker”: CreateProcess error2,系统找不到指定的文件 gpt 要我去…

Blender 2D动画与MATLAB数学建模:跨界融合的创新实践探索

文章目录 一、数据交换&#xff1a;从科学计算到创意表达的桥梁二、脚本自动化&#xff1a;从手动操作到无缝连接的升级三、跨界融合的创新实践意义《Blender 2D动画制作从入门到精通》亮点内容简介作者简介 《MATLAB数学建模从入门到精通》亮点内容简介作者简介 在数字创意与科…

vue项目上传ofd文件,导致文件类型丢失问题

1、问题 上传ofd文件&#xff0c;传到java后端&#xff0c;变成了无类型的文件&#xff0c;最后通过排查&#xff0c;发现前端通过vue组件上传的文件&#xff0c;没有文件类型了 2、解决办法 将文件内容重新放到一个新的文件中&#xff0c;并且给这个新的文件设置ofd类型 3…

HarmonyOS Next 日志工具介绍

HarmonyOS Next 日志工具介绍 在HarmonyOS Next开发中&#xff0c;日志是我们调试定位问题的主要手段&#xff0c;不管是hilog还是console&#xff0c;最终都可以输出到DevEco Studio的日志模块中&#xff1a; 在这里可以过滤应用进程、日志级别、日志内容呢&#xff0c;也可…

NUTTX移植到STM32

STM32移植NUTTX 1. Ubuntu下搭建开发环境1.1 先决条件1.2 下载 NuttX1.3 使用Make 进行编译1.4 烧录运行 2.通过NUTTX点亮LED2.1 部署操作系统2.2 修改配置文件2.3 编译运行程序 开发板&#xff1a;DshanMCUF407 官方开发文档&#xff1a;安装 — NuttX latest 文档 参考文档&…

什么是Transformer模型中的KV缓存:上下文新增那之前计算的KV还可用,在原有基础上对新增的进行计算就行

什么是Transformer模型中的KV缓存? 在Transformer模型中,KV缓存(Key-Value Cache)具有重要作用,以下是关于它的详细介绍: 概念含义 KV缓存主要是用于存储在模型推理过程中已经计算过的键(Key)和值(Value)信息。在Transformer架构里,比如在自注意力机制等计算环节…

【微服务】4、服务保护

微服务架构与组件介绍 单体架构拆分&#xff1a;黑马商城早期为单体架构&#xff0c;后拆分为微服务架构。跨服务调用与组件使用 服务拆分后存在跨服务远程调用&#xff0c;如下单需查询商品信息&#xff0c;使用openfeign组件解决。服务间调用关系复杂&#xff0c;需维护服务…

【网络安全 | 漏洞挖掘】通过模拟功能实现提权(Bugcrowd)

未经许可,不得转载。 我将与大家分享我在 Bugcrowd 的某个项目中发现的一个漏洞,该项目中有一个“用户模拟”功能。 什么是用户模拟? 用户模拟允许管理员在不知晓用户凭据的情况下“以用户身份登录”。这种功能常见于管理员需要调试问题、审查用户权限或解决投诉的平台中。…

蓝桥杯训练

1对于一个字母矩阵&#xff0c;我们称矩阵中的一个递增序列是指在矩阵中找到两个字母&#xff0c;它们在同一行&#xff0c;同一列&#xff0c;或者在同一 45 度的斜线上&#xff0c;这两个字母从左向右看、或者从上向下看是递增的。 例如&#xff0c;如下矩阵中 LANN QIAO有…