嘿，这个需求在教育类应用里特别实用，毕竟老师和同学之间的互动很需要知道对方是否在线。结合你用的Node.js+Express，最靠谱的方案是用WebSocket来实现实时状态同步——HTTP的无状态特性没法做到主动推送更新，而WebSocket的长连接刚好能解决这个问题。下面我给你一步步拆解实现方法：

我推荐用socket.io这个库，它封装了WebSocket的各种复杂细节（比如自动重连、浏览器兼容性 fallback），能帮咱们快速落地功能。

1. 安装并配置Socket.io #

首先在项目里安装依赖：

npm install socket.io

然后修改你的Express启动文件（比如app.js），把Express服务器和Socket.io绑定：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
// 用http模块创建服务器，替代直接用app.listen
const server = http.createServer(app);
// 初始化Socket.io，配置跨域（如果前后端分离的话）
const io = new Server(server, {
  cors: {
    origin: "你的前端地址", // 比如http://localhost:3000
    methods: ["GET", "POST"]
  }
});

// 注意！这里要监听server而不是原来的app
server.listen(3000, () => {
  console.log('服务器运行在3000端口');
});

2. 后端管理用户在线状态 #

咱们需要一个容器来存储当前在线的用户，用Map就很合适。然后处理Socket的连接、断开事件，以及用户登录后的状态同步：

// 存储在线用户：key为用户ID，value为对应的socket实例ID
const onlineUsers = new Map();

// 监听客户端连接
io.on('connection', (socket) => {
  // 当用户登录成功后，前端会发送这个事件，携带用户ID
  socket.on('user-online', (userId) => {
    // 记录用户的socketID
    onlineUsers.set(userId, socket.id);
    // 广播给所有在线用户，告诉大家这个用户上线了
    io.emit('status-updated', { userId, status: 'online' });
  });

  // 监听客户端断开连接
  socket.on('disconnect', () => {
    // 找到断开连接的用户ID
    let disconnectedUserId;
    for (const [userId, socketId] of onlineUsers.entries()) {
      if (socketId === socket.id) {
        disconnectedUserId = userId;
        break;
      }
    }
    if (disconnectedUserId) {
      onlineUsers.delete(disconnectedUserId);
      // 广播用户离线状态
      io.emit('status-updated', { userId: disconnectedUserId, status: 'offline' });
    }
  });
});

3. 前端配合实现状态展示 #

前端需要连接Socket.io，登录后通知后端自己上线，同时监听状态更新来修改UI：

// 引入socket.io客户端（可以通过CDN或者npm安装后import）
const socket = io('http://localhost:3000');

// 用户登录成功后，发送用户ID给后端
socket.emit('user-online', '当前登录用户的ID');

// 监听后端发来的状态更新事件
socket.on('status-updated', (data) => {
  // 根据用户ID找到对应的头像元素
  const avatarElement = document.querySelector(`[data-user-id="${data.userId}"]`);
  if (avatarElement) {
    // 切换在线/离线样式（比如头像旁的小圆点）
    if (data.status === 'online') {
      avatarElement.classList.add('online-status');
      avatarElement.classList.remove('offline-status');
    } else {
      avatarElement.classList.add('offline-status');
      avatarElement.classList.remove('online-status');
    }
  }
});

几个优化建议 #

• 多设备登录处理：如果用户在多个设备登录，同一个用户ID会对应多个socketID，这时候可以把onlineUsers的value改成数组，存储该用户的所有socketID，只有当所有socketID都断开时才标记为离线。
• 心跳机制：防止网络波动导致误判离线，让前端每隔30秒发送一次心跳事件，后端如果超过1分钟没收到心跳，就标记用户为离线。
• 状态持久化：如果需要服务器重启后保留在线状态，可以把onlineUsers的数据存在Redis或者数据库里，重启后从存储中恢复。

内容的提问来源于stack exchange，提问作者Saman