统一消息系统

小明：嘿，小李，最近我在做一个实时聊天的应用，想实现用户在线状态的显示和消息推送功能。你有什么建议吗？

小李：嗯，这个问题挺常见的。你可以考虑使用 WebSocket 来实现实时通信，这样能更好地支持在线状态和消息推送。

小明：WebSocket 是什么？我之前用过 HTTP 的长轮询，但感觉不太高效。

小李：对，HTTP 长轮询虽然能实现基本的消息推送，但会增加服务器负担，而且延迟较高。WebSocket 是一种全双工协议，可以建立持久连接，非常适合实时通信场景。

小明：那怎么实现用户在线状态呢？比如，用户登录后，其他用户能看到他在线。

小李：这需要一个后台服务来维护用户的在线状态。当用户登录时，发送一个“上线”事件到服务器，服务器更新该用户的状态为在线；当用户关闭页面或断开连接时，发送“下线”事件。

小明：那前端怎么知道用户是否在线呢？是不是要定期向服务器请求状态？

小李：其实，你可以利用 WebSocket 的连接状态来判断。当 WebSocket 连接断开时，说明用户可能已经下线了。另外，也可以在前端设置心跳机制，定时发送心跳包，保持连接活跃。

小明：明白了。那消息推送是怎么做的？比如，用户 A 发送消息给用户 B，B 能立刻收到。

小李：消息推送的核心是 WebSocket。当用户 A 发送消息时，前端将消息发送到服务器，服务器再通过 WebSocket 将消息推送到用户 B 的客户端。

小明：听起来不错。那有没有现成的库或者框架可以用？

小李：当然有。比如，你可以使用 Socket.IO，它是一个基于 WebSocket 的库，支持自动重连、广播等高级功能。此外，如果你只需要简单的 WebSocket 实现，可以直接使用浏览器原生的 WebSocket API。

小明：那我应该从哪里开始写代码呢？

小李：我们可以先从一个简单的例子开始。首先，在前端创建 WebSocket 连接，然后监听服务器发来的消息，同时在用户登录时发送上线事件。

小明：好的，那我先写一个 WebSocket 的连接代码。

小李：没错，下面是前端的 WebSocket 初始化代码：

      <script>
        const socket = new WebSocket('ws://yourserver.com/socket');
        
        // 当连接成功时
        socket.onopen = function() {
          console.log('WebSocket 已连接');
          // 发送上线事件
          socket.send(JSON.stringify({ type: 'online', user: '小明' }));
        };
        
        // 接收消息
        socket.onmessage = function(event) {
          const data = JSON.parse(event.data);
          if (data.type === 'message') {
            console.log('收到消息:', data.message);
            // 在前端展示消息
            showMessage(data.message);
          }
        };
        
        // 处理错误
        socket.onerror = function(error) {
          console.error('WebSocket 错误:', error);
        };
        
        // 处理连接关闭
        socket.onclose = function() {
          console.log('WebSocket 已断开');
        };
        
        function showMessage(message) {
          const msgDiv = document.getElementById('message');
          msgDiv.innerHTML += '<br>' + message;
        }
      </script>
    

小明：这段代码看起来很清晰。那服务器端应该怎么处理这些消息呢？

小李：服务器端可以用 Node.js 和 Socket.IO 来处理。下面是一个简单的 Node.js 示例：

      const express = require('express');
      const http = require('http');
      const { Server } = require('socket.io');
      
      const app = express();
      const server = http.createServer(app);
      const io = new Server(server);
      
      io.on('connection', (socket) => {
        console.log('用户已连接');
        
        // 监听上线事件
        socket.on('online', (user) => {
          console.log(`${user} 上线了`);
          io.emit('userOnline', user); // 广播给所有用户
        });
        
        // 监听消息事件
        socket.on('message', (message) => {
          console.log('收到消息:', message);
          io.emit('message', message); // 广播给所有用户
        });
        
        // 监听断开事件
        socket.on('disconnect', () => {
          console.log('用户已断开');
        });
      });
      
      server.listen(3000, () => {
        console.log('服务器运行在 http://localhost:3000');
      });
    

小明：明白了。那如何实现用户在线状态的显示呢？比如，在界面上显示“在线”或“离线”。

小李：可以在前端维护一个用户状态的列表。当用户上线时，将他的状态设为在线；当用户下线时，将其状态设为离线。可以通过 WebSocket 接收服务器广播的用户状态变化。

小明：那我需要在前端维护一个用户状态表吗？

小李：是的，你可以使用一个对象来存储用户状态，例如：

      const userStatus = {
        '小明': 'online',
        '小红': 'offline'
      };
    

然后，当收到用户上线或下线的事件时，更新这个对象，并在界面上显示。

小明：那如果用户多次登录怎么办？比如，同一个用户在多个设备上登录。

小李：这时候你需要在服务器端为每个用户维护一个唯一的标识符（如 token 或 session ID），并在 WebSocket 连接中携带这个标识符。这样，即使同一用户在多个设备上登录，服务器也能正确识别并更新其状态。

小明：明白了。那在前端，我应该怎么处理多设备登录的情况呢？

小李：前端可以通过 Cookie 或 LocalStorage 存储用户的登录信息，比如 token。每次建立 WebSocket 连接时，将 token 附加在 URL 中，让服务器识别用户身份。

小明：那我可以把 token 添加到 WebSocket 的 URL 中吗？

小李：是的，例如：

      const socket = new WebSocket(`ws://yourserver.com/socket?token=${token}`);
    

这样，服务器就可以根据 token 确定用户身份，从而正确地维护其在线状态。

小明：太好了！那我现在可以开始尝试实现这个功能了。

小李：没错，记住要测试不同情况，比如网络断开、重新连接、多设备登录等，确保系统稳定。

小明：谢谢你的帮助，小李！

小李：不客气，有问题随时问我！