vue中利用socket.io统计在线用户

目录
  一、引入相关模块
  二、store/modules 中封装socketio
  三、后端代码(nodejs)
  
  

---

一、引入相关模块

main.js 中参考以下代码 ,另外socketio的利用在查阅其它相关文章时有收支,照旧只管以官方文档为准

1. import VueSocketIO from 'vue-socket.io'
2. import SocketIO from 'socket.io-client'
4. const SOCKETIO = new VueSocketIO({
5.   debug: true, // true开启
6.   connection: SocketIO('ws://127.0.0.1:8003',{
7.     autoConnect: false   //不自动连接
8.   }),
9.   options: {
10.     transports: ['websocket']
11.   },
12.   vuex: {
13.     store,
14.     actionPrefix: 'SOCKET_',
15.     mutationPrefix: 'SOCKET_'
16.   }
17. })
19. Vue.use(SOCKETIO)

复制代码

二、store/modules 中封装socketio

代码如下:

1. import io from 'socket.io-client';
2. import store from '../index';
3. import moment from 'moment';
4. let socket = {};
5. const state = {
6.     socket: {
7.         heartbeatActive: false,
8.         heartbeatInterval: null,
9.         heartbeatTimeout: null,
10.         reconnectAttempts: 0,
11.         maxReconnectAttempts: 5,
12.     },
13. }
15. const mutations = {
16.     START_HEARTBEAT(state) {
17.         state.heartbeatActive = true;
18.     },
19.     STOP_HEARTBEAT(state) {
20.         state.heartbeatActive = false;
21.     },
22.     SET_HEARTBEAT_INTERVAL(state, interval) {
23.         state.heartbeatInterval = interval;
24.     },
25.     SET_HEARTBEAT_TIMEOUT(state, timeout) {
26.         state.heartbeatTimeout = timeout;
27.     },
28.     INCREMENT_RECONNECT_ATTEMPTS(state) {
29.         state.reconnectAttempts += 1;
30.     },
31.     RESET_RECONNECT_ATTEMPTS(state) {
32.         state.reconnectAttempts = 0;
33.     }
34. }
36. const actions = {
37.     connectSocket({ commit, dispatch }) {
38.         socket=io('http://127.0.0.1:8003'); //socket 服务地址
39.         socket.connect();
40.         socket.on('connect', () => {
41.             console.log('Socket connected');
42.             dispatch('login');
43.             commit('START_HEARTBEAT');
44.             commit('RESET_RECONNECT_ATTEMPTS');
45.             dispatch('startHeartbeat');
46.         });
47.         socket.on('disconnect', () => {
48.             console.log('Socket disconnected');
49.             commit('STOP_HEARTBEAT');
50.             // dispatch('handleReconnect');
51.         });
53.         socket.on('pong', () => {
54.             console.log('Pong received');
55.             clearTimeout(this.state.heartbeatTimeout);
56.             dispatch('resetHeartbeatTimeout');
57.         });
58.     },
59.     login() {
60.         socket.emit('login',{ usercode: store.getters['name'],loginTime: moment().format('YYYY-MM-DD HH:mm:ss') });
61.     },
62.     disconnectSocket({ commit }) {
63.         socket.disconnect();
64.         clearInterval(state.heartbeatInterval);
65.         clearTimeout(state.heartbeatTimeout);
66.         commit('STOP_HEARTBEAT');
67.     },
68.     startHeartbeat({ commit, dispatch }) {
69.         const heartbeatInterval = setInterval(() => {
70.             console.log('user/usercode', store.getters['name'])
71.             //发送心跳包
72.             socket.emit('ping', { usercode: store.getters['name'],lastLoginTime: moment().format('YYYY-MM-DD HH:mm:ss') });
73.             dispatch('resetHeartbeatTimeout');
74.         }, 25000);
75.         commit('SET_HEARTBEAT_INTERVAL', heartbeatInterval);
76.     },
77.     resetHeartbeatTimeout({ commit, state, dispatch }) {
78.         if (state.heartbeatTimeout) {
79.             clearTimeout(state.heartbeatTimeout);
80.         }
81.         const heartbeatTimeout = setTimeout(() => {
82.             console.log('Heartbeat timeout, attempting to reconnect');
83.             dispatch('stopHeartbeat');
84.             dispatch('connectSocket');
85.         }, 30000); // 设置超时时间
86.         commit('SET_HEARTBEAT_TIMEOUT', heartbeatTimeout);
87.     },
88.     stopHeartbeat({ commit, state }) {
89.         clearInterval(state.heartbeatInterval);
90.         clearTimeout(state.heartbeatTimeout);
91.         commit('STOP_HEARTBEAT');
92.     },
93.     handleReconnect({ commit, state, dispatch }) {
94.         if (state.reconnectAttempts < state.maxReconnectAttempts) {
95.             commit('INCREMENT_RECONNECT_ATTEMPTS');
96.             setTimeout(() => {
97.                 dispatch('connectSocket');
98.             }, 5000); // 重连间隔
99.         } else {
100.             console.log('Max reconnect attempts reached');
101.         }
102.     }
103. }
105. export default {
106.     namespaced: true,
107.     state,
108.     mutations,
109.     actions
110. }

复制代码

触发变乱写在了AppMain.vue中

1. export default {
2.   name: 'AppMain',
3.   computed: {
4.     cachedViews() {
5.       return this.$store.state.tagsView.cachedViews
6.     },
7.     key() {
8.       return this.$route.fullPath
9.     }
10.   },
11.   mounted() {
12.     this.$store.dispatch('socketio/connectSocket'); //登陆成功后手动连接
13.     }
14. }

复制代码

三、后端代码(nodejs)

单独封装了一个 socketio.js文件,这个根据个人喜好处置惩罚,简单样例代码

2. global.socketClients= new Map();
3. global.io.on('connection', (socket) => {
4.     console.log('a user connected');
5.    
6.     socket.on('login', (data) => {
7.         console.log('login',data);
8.         global.socketClients.set(data.usercode,data);
9.         console.log(global.socketClients);
10.     });
11.    
12.     socket.on('ping', (data) => {
13.         console.log('received heartbeat');
14.         console.log('ping',data);
15.         if(global.socketClients.has(data.usercode)){
16.             global.socketClients.set(data.usercode,_.assign(global.socketClients.get(data.usercode),data));
17.         }else{
18.             global.socketClients.set(data.usercode,data);
19.         }
20.         console.log(global.socketClients);
22.     });
24.     socket.on('disconnect', (reason) => {
25.         if (reason === 'ping timeout') {
26.             console.log('Client disconnected due to heartbeat timeout');
27.         } else {
28.             console.log('Client disconnected due to:', reason);
29.         }
30.     });
31. });

复制代码

相关数据可以用redis,或者放到表中进行一些其它逻辑的处置惩罚
附上后端示例:

前端列表:

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。