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,或者放到表中进行一些其它逻辑的处理

附上后端示例:

前端列表:

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

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

相关文章

「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历

本篇将带你实现一个简易日历应用&#xff0c;显示当前月份的日期&#xff0c;并支持选择特定日期的功能。用户可以通过点击日期高亮选中&#xff0c;还可以切换上下月份&#xff0c;体验动态界面的交互效果。 关键词 UI互动应用简易日历动态界面状态管理用户交互 一、功能说明…

【AI系统】推理系统介绍

推理系统介绍 推理系统是一个专门用于部署神经网络模型&#xff0c;执行推理预测任务的 AI 系统。它类似于传统的 Web 服务或移动端应用系统&#xff0c;但专注于 AI 模型的部署与运行。通过推理系统&#xff0c;可以将神经网络模型部署到云端或者边缘端&#xff0c;并服务和处…

Docker 之 bootfs 和 rootfs概述

概述 在 Docker 技术中&#xff0c;理解 bootfs&#xff08;boot file system&#xff09;和 rootfs&#xff08;root file system&#xff09;的概念对于深入掌握容器技术至关重要。这两个文件系统是 Docker 镜像和容器运行的基础。 bootfs&#xff08;Boot File System&am…

困扰解决:mfc140u.dll丢失的解决方法,多种有效解决方法全解析

当电脑提示“mfc140u.dll丢失”时&#xff0c;这可能会导致某些程序无法正常运行&#xff0c;给用户带来不便。不过&#xff0c;有多种方法可以尝试解决这个问题。这篇文章将以“mfc140u.dll丢失的解决方法”为主题&#xff0c;教大家有效解决mfc140u.dll丢失。 判断是否是“mf…

M4V 视频是一种什么格式?如何把 M4V 转为 MP4 格式?

M4V 是一种视频文件格式&#xff0c;主要由苹果公司用于其产品和服务中&#xff0c;如 iTunes Store 上的电影和电视节目。这种格式可以包含受版权保护的内容&#xff0c;并且通常与苹果的 DRM&#xff08;数字版权管理&#xff09;技术结合使用&#xff0c;以限制内容的复制和…

VS打开UI文件失败

选择一个UI文件&#xff0c;右键打开方式&#xff0c;要自己添加路径 然后选择自己的QT Creator路径 可以参考我的去找一下&#xff1a;"C:\Qt\Qt5.14.2\Tools\QtCreator\bin\qtcreator.exe"

网络编程(UDP\TCP回显服务器)

目录 套接字socket TCP和UDP特点比较 特点 比较 UDP回显服务器/客户端的编写 UDP的socket api 回显服务器 客户端 TCP回显服务器/客户端的编写 TCP的socket api 回显服务器 客户端 优化服务器 1.关闭服务器创建的socket对象 2.引入线程池&#xff0c;为多个客户…

(长期更新)《零基础入门 ArcGIS(ArcMap) 》实验三----学校选址与路径规划(超超超详细!!!)

目录 实验三 学校选址与道路规划 3.1 实验内容及目的 3.1.1 实验内容 3.1.2 实验目的 3.2 实验方案 3.3 操作流程 3.3.1 环境设置 3.3.2 地势分析 &#xff08;1&#xff09;提取坡度: (2)重分类: 3.3.3 学校点分析 (1)欧氏距离: (2)重分类: 3.3.4 娱乐场所点分析 (1)欧氏距离…

【Delphi】modbus-TCP 协议库

在日常开发中&#xff0c;也会遇到使用modbus的部件&#xff0c;比如温度控制器、读卡器等等&#xff0c;那么使用Delphi开发&#xff0c;也就必须遵守modbus-TCP协议&#xff0c;如果自己使用TCP控件写也没有问题&#xff0c;不过如果有开源的三方库&#xff0c;别人已经调试过…

计算机网络-网络安全

网络安全介绍 端口扫描 安全包括那些方面&#xff1a; 数据存储安全、应用程序安全、操作系统安全、网络安全、物理安全、用户安全教育 一、网络安全问题概述 1. 计算机网络面临的安全性威胁 计算机网络上的通信面临以下的四种威胁&#xff1a; 截获——从网络上窃听他人…

GEE Download Data——气温数据的下载

GEE数据下载第二弹!今天我们来分享气温数据的下载。 一、数据介绍 气温数据我们要用到的是MODIS数据产品,MOD11A2 V6.1 产品提供 1200 x 1200 公里网格内 8 天平均陆地表面温度 (LST)。 MOD11A2 中的每个像素值都是该 8 天内收集的所有相应 MOD11A1 LST 像素的简单平均值。…

【第 1 章 初识 C 语言】1.8 使用 C 语言的 7 个步骤

目录 1.8 使用 C 语言的 7 个步骤 1.8.1 第 1 步&#xff1a;定义程序的目标 1.8.2 第 2 步&#xff1a;设计程序 1.8.3 第 3 步&#xff1a;编写代码 1.8.4 第 4 步&#xff1a;编译 1.8.5 第 5 步&#xff1a;运行程序 1.8.6 第 6 步&#xff1a;测试和调试程序 1.8.…

docker部署RustDesk自建服务器

客户端&#xff1a; Releases rustdesk/rustdesk GitHub 服务端&#xff1a; 项目官方地址&#xff1a;GitHub - rustdesk/rustdesk-server: RustDesk Server Program 1、拉取RustDesk库 docker pull rustdesk/rustdesk-server:latest 阿里云库&#xff1a; docker pu…

通义灵码走进北京大学创新课堂丨阿里云云原生 10 月产品月报

云原生月度动态 云原生是企业数字创新的最短路径。 《阿里云云原生每月动态》&#xff0c;从趋势热点、产品新功能、服务客户、开源与开发者动态等方面&#xff0c;为企业提供数字化的路径与指南。 趋势热点 &#x1f947; 通义灵码走进北京大学创新课堂&#xff0c;与 400…

Java基础面向对象(String类)

String 特点 是内存中常量, 值在内存中一旦创建, 不可改 更改String类型引用的值本质上是将引用指向了一个新的字符串地址 String s1 "abc";String s2 s1;//引用s1的地址赋值给了s2 ​s2 "edf";//让s2指向新字符串 ​System.out.println("s1: &q…

【C++】深入优化计算题目分析与实现

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;第一题&#xff1a;圆的计算我的代码实现代码分析改进建议改进代码 老师的代码实现代码分析可以改进的地方改进代码 &#x1f4af;第二题&#xff1a;对齐输出我的代码实现…

6.824/6.5840 Lab 3: Raft——Part 3B3C

芙蓉花又栖满了枝头 奈何蝶难留 漂泊如江水向东流 望断门前隔岸的杨柳 寂寞仍不休 我无言让眼泪长流 ——山外小楼夜听雨 完整代码见&#xff1a; https://github.com/SnowLegend-star/6.824 在完成Lab之前&#xff0c;务必把论文多读几遍&#xff0c;力求完全理解Leader选举、…

LeetCode - #150 逆波兰表达式求值

文章目录 前言1. 描述2. 示例3. 答案关于我们 前言 我们社区陆续会将顾毅&#xff08;Netflix 增长黑客&#xff0c;《iOS 面试之道》作者&#xff0c;ACE 职业健身教练。&#xff09;的 Swift 算法题题解整理为文字版以方便大家学习与阅读。 LeetCode 算法到目前我们已经更新…

【C++】continue语句、goto语句

1、continue 语句 作用&#xff1a;在循环语句中&#xff0c;跳过本次循环中余下尚未执行的语句。继续下一次循环。 注意&#xff1a;continue只能用于循环中。 示例&#xff1a; 代码&#xff1a; //continue的用法 #include<iostream> using namespace std; int ma…

最长最短单词

最长最短单词 C语言实现C实现Java实现Python实现 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 输入1行句子&#xff08;不多于200个单词&#xff0c;每个单词长度不超过100&#xff09;&#xff0c;只包含字母、空格和逗号。单词由至少一…