vue中使用socket.io统计在线用户
目录
一、引入相关模块
二、store/modules 中封装socketio
三、后端代码(nodejs)
一、引入相关模块
main.js 中参考以下代码 ,另外socketio的使用在查阅其它相关文章时有出入,还是尽量以官方文档为准
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'const SOCKETIO = new VueSocketIO({debug: true, // true开启connection: SocketIO('ws://127.0.0.1:8003',{autoConnect: false //不自动连接}),options: {transports: ['websocket']},vuex: {store,actionPrefix: 'SOCKET_',mutationPrefix: 'SOCKET_'}
})Vue.use(SOCKETIO)
二、store/modules 中封装socketio
代码如下:
import io from 'socket.io-client';
import store from '../index';
import moment from 'moment';
let socket = {};
const state = {socket: {heartbeatActive: false,heartbeatInterval: null,heartbeatTimeout: null,reconnectAttempts: 0,maxReconnectAttempts: 5,},
}const mutations = {START_HEARTBEAT(state) {state.heartbeatActive = true;},STOP_HEARTBEAT(state) {state.heartbeatActive = false;},SET_HEARTBEAT_INTERVAL(state, interval) {state.heartbeatInterval = interval;},SET_HEARTBEAT_TIMEOUT(state, timeout) {state.heartbeatTimeout = timeout;},INCREMENT_RECONNECT_ATTEMPTS(state) {state.reconnectAttempts += 1;},RESET_RECONNECT_ATTEMPTS(state) {state.reconnectAttempts = 0;}
}const actions = {connectSocket({ commit, dispatch }) {socket=io('http://127.0.0.1:8003'); //socket 服务地址socket.connect();socket.on('connect', () => {console.log('Socket connected');dispatch('login');commit('START_HEARTBEAT');commit('RESET_RECONNECT_ATTEMPTS');dispatch('startHeartbeat');});socket.on('disconnect', () => {console.log('Socket disconnected');commit('STOP_HEARTBEAT');// dispatch('handleReconnect');});socket.on('pong', () => {console.log('Pong received');clearTimeout(this.state.heartbeatTimeout);dispatch('resetHeartbeatTimeout');});},login() {socket.emit('login',{ usercode: store.getters['name'],loginTime: moment().format('YYYY-MM-DD HH:mm:ss') });},disconnectSocket({ commit }) {socket.disconnect();clearInterval(state.heartbeatInterval);clearTimeout(state.heartbeatTimeout);commit('STOP_HEARTBEAT');},startHeartbeat({ commit, dispatch }) {const heartbeatInterval = setInterval(() => {console.log('user/usercode', store.getters['name'])//发送心跳包socket.emit('ping', { usercode: store.getters['name'],lastLoginTime: moment().format('YYYY-MM-DD HH:mm:ss') });dispatch('resetHeartbeatTimeout');}, 25000);commit('SET_HEARTBEAT_INTERVAL', heartbeatInterval);},resetHeartbeatTimeout({ commit, state, dispatch }) {if (state.heartbeatTimeout) {clearTimeout(state.heartbeatTimeout);}const heartbeatTimeout = setTimeout(() => {console.log('Heartbeat timeout, attempting to reconnect');dispatch('stopHeartbeat');dispatch('connectSocket');}, 30000); // 设置超时时间commit('SET_HEARTBEAT_TIMEOUT', heartbeatTimeout);},stopHeartbeat({ commit, state }) {clearInterval(state.heartbeatInterval);clearTimeout(state.heartbeatTimeout);commit('STOP_HEARTBEAT');},handleReconnect({ commit, state, dispatch }) {if (state.reconnectAttempts < state.maxReconnectAttempts) {commit('INCREMENT_RECONNECT_ATTEMPTS');setTimeout(() => {dispatch('connectSocket');}, 5000); // 重连间隔} else {console.log('Max reconnect attempts reached');}}
}export default {namespaced: true,state,mutations,actions
}
触发事件写在了AppMain.vue中
export default {name: 'AppMain',computed: {cachedViews() {return this.$store.state.tagsView.cachedViews},key() {return this.$route.fullPath}},mounted() {this.$store.dispatch('socketio/connectSocket'); //登陆成功后手动连接}
}
三、后端代码(nodejs)
单独封装了一个 socketio.js文件,这个根据个人喜好处理,简单样例代码
global.socketClients= new Map();
global.io.on('connection', (socket) => {console.log('a user connected');socket.on('login', (data) => {console.log('login',data);global.socketClients.set(data.usercode,data);console.log(global.socketClients);});socket.on('ping', (data) => {console.log('received heartbeat');console.log('ping',data);if(global.socketClients.has(data.usercode)){global.socketClients.set(data.usercode,_.assign(global.socketClients.get(data.usercode),data));}else{global.socketClients.set(data.usercode,data);}console.log(global.socketClients);});socket.on('disconnect', (reason) => {if (reason === 'ping timeout') {console.log('Client disconnected due to heartbeat timeout');} else {console.log('Client disconnected due to:', reason);}});
});
相关数据可以用redis,或者放到表中进行一些其它逻辑的处理
附上后端示例:

前端列表:

点个赞再走~~
相关文章:
vue中使用socket.io统计在线用户
目录 一、引入相关模块 二、store/modules 中封装socketio 三、后端代码(nodejs) 一、引入相关模块 main.js 中参考以下代码 ,另外socketio的使用在查阅其它相关文章时有出入,还是尽量以官方文档为准 import VueSocketIO from vue-socket.io import SocketIO from socket.io-…...
zotero中pdf-translate插件和其他插件的安装
1.工具–》插件 2.找插件 3.点击之后看到一堆插件 4.找到需要的,例如pdf-translate 5.点击进入,需要看一下md文档了解下,其实最重要的就是找到特有的(.xpi file) 6.点击刚刚的蓝色链接 7.下载并保存xpi文件 8.回到zotero,安装并使…...
【Linux操作系统】多线程控制(创建,等待,终止、分离)
目录 一、线程与轻量级进程的关系二、进程创建1.线程创建线程创建函数(pthread)查看和理解线程id主线程与其他线程之间的关系 三、线程等待(回收)四、线程退出线程退出情况线程退出方法 五、线程分离线程的优点线程的缺点 一、线程…...
二百七十八、ClickHouse——将本月第一天所在的那一周视为第一周,无论它是从周几开始的,查询某个日期是本月第几周
一、目的 ClickHouse指标表中有个字段week_of_month,含义是这条数据属于本月第几周。 而且将本月第一天所在的那一周视为第一周,无论它是从周几开始的。比如2024-12-01是周日,即12月第一周。而2024-12-02是周一,即12月第二周 二…...
JVM八股文精简
目录 简述JVM类加载过程简述JVM中的类加载器简述双亲委派机制双亲委派机制的优点简述JVM内存模型简述程序计数器简述虚拟机栈简述本地方法栈简述JVM中的堆简述方法区简述运行时常量池简述Java创建对象的过程简述JVM给对象分配内存的策略Java对象内存分配是如何保证线程安全的如…...
深入解析CMake中的find_package()命令:工作原理及实际应用示例
深入解析CMake中的find_package()命令:工作原理及实际应用示例 在CMake中,find_package() 是一个复杂而强大的命令,用于在构建系统中定位外部依赖(通常是库),并配置必要的编译和链接设置。这个命令允许开发…...
使用数据层进行数据生命周期管理
作者:来自 Elastic Stef Nestor Elasticsearch 7.10 使配置数据生命周期变得不再那么复杂。在这篇博文中,我将介绍一些变化、如何使用它们以及一些最佳实践。 数据生命周期可以包含很多阶段,因此我们将涉及: 将集群划分为层&…...
Kubernetes架构原则和对象设计
云原生学习路线导航页(持续更新中) 快捷链接 Kubernetes常见问题解答 本文从 Google Borg系统的架构设计开始,深入讲解Kubernetes架构及组件的基本原理 1.什么是云计算 1.1.传统行业应用 假设有10台服务器,两个应用。小规模管…...
响应式编程一、Reactor核心
目录 一、前置知识1、Lambda表达式2、函数式接口 Function3、StreamAPI4、Reactive-Stream1)几个实际的问题2)Reactive-Stream是什么?3)核心接口4)处理器 Processor5)总结 二、Reactor核心1、Reactor1&…...
uniapp+vue3+ts请求接口封装
1.安装luch-request yarn add luch-requestnpm install luch-request2.新建文件src/utils/request.ts 需要自己修改config.baseURL和token(获取存储的token) // import HttpRequest from luch-request; import type { HttpRequestConfig, HttpRespons…...
【计算机网络】实验4:生成树协议STP的功能以及虚拟局域网VLAN
实验 4:生成树协议STP的功能以及虚拟局域网VLAN 一、 实验目的 加深对生成树协议STP的功能的理解。 了解虚拟局域网VLAN。 二、 实验环境 • Cisco Packet Tracer 模拟器 三、 实验内容 1、验证交换机生成树协议STP的功能 (1) 第一步:构建网络拓…...
基于Matlab BP神经网络的电力负荷预测模型研究与实现
随着电力系统的复杂性和规模的不断增长,准确的电力负荷预测对于电网的稳定性和运行效率至关重要。传统的负荷预测方法依赖于历史数据和简单的统计模型,但这些方法在处理非线性和动态变化的负荷数据时,表现出较大的局限性。近年来,…...
java 21 多线程
1.相关概念 进程: 进程是指运行中的程序,比如我们使用QQ,就启动了一个进程,操作系统就会为该进程分配内存空间。当我们使用迅雷,又启动了一个进程,操作系统将为迅雷配新的内存空间。 进程是程序的一次执行过程&#…...
Rust学习笔记_07——枚举和范围
Rust学习笔记_04——引用 Rust学习笔记_05——控制流(1) Rust学习笔记_06——控制流(2) 文章目录 1. 枚举1.1基础1.2 给枚举变体起个“别名”1.3 枚举与匹配(match) 2. 范围2.1 介绍2.2 半开区间范围2.3 包含范围的语法糖2.4 步长范围(Range …...
40分钟学 Go 语言高并发:服务性能调优实战
服务性能调优实战 一、性能优化实战概述 优化阶段主要内容关键指标重要程度瓶颈定位收集性能指标,确定瓶颈位置CPU、内存、延迟、吞吐量⭐⭐⭐⭐⭐代码优化优化算法、并发、内存使用代码执行时间、内存分配⭐⭐⭐⭐⭐系统调优调整系统参数、资源配置系统资源利用率…...
Windows通过指令查看已安装的驱动
Windows通过指令查看已安装的驱动 在 Windows 操作系统中,有几种命令可以用来查看已安装的驱动程序。以下是常见的几种方法: 1. 使用 pnputil 查看已安装驱动程序 pnputil 是一个 Windows 内置工具,可以列出所有已安装的驱动程序包。 命令…...
Windows 11 如何配置node.js
一,官网下载 官网首页 下载最新LTS版本,比较稳定,如果想探索更新的版本去探索新的nodejs功能。 1. 下载完成后,双击运行程序,点击next 2. 勾选接受协议,点击next 3. 选择自己的安装路径(默认是…...
AWTK fscript 中的 串口 扩展函数
fscript 是 AWTK 内置的脚本引擎,开发者可以在 UI XML 文件中直接嵌入 fscript 脚本,提高开发效率。本文介绍一下 fscript 中的 ** 串口 扩展函数 ** 1.iostream_serial_create 创建串口输入输出流对象。 原型 iostream_serial_create(device) > ob…...
yolov11剪枝
思路:yolov11中的C3k2与yolov8的c2f的不同,所以与之前yolov8剪枝有稍许不同; 后续:会将剪枝流程写全,以及增加蒸馏、注意力、改loss; 注意: 1.在代码105行修改pruning.get_threshold(yolo.mo…...
智慧地图聚合(LockMap)标注系统开发说明文档
智慧地图聚合(LockMap)标注系统开发说明文档 1. 系统概述 智慧地图聚合(LockMap)标注系统是一个专为处理大规模地理信息数据而设计的综合解决方案。通过后端高效的数据管理和前端直观的地图展示,该系统能够实现对海量地理位置点的有效可视化。本项目旨在提供一个用…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候,遇到了一些问题,记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列?2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
基于鸿蒙(HarmonyOS5)的打车小程序
1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...
消防一体化安全管控平台:构建消防“一张图”和APP统一管理
在城市的某个角落,一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延,滚滚浓烟弥漫开来,周围群众的生命财产安全受到严重威胁。就在这千钧一发之际,消防救援队伍迅速行动,而豪越科技消防一体化安全管控平台构建的消防“…...
