前端消息管理中心与在线状态实现

小明: 嘿，小华，我最近在做一个聊天应用，想加入一个消息管理中心的功能，你有什么好的建议吗？

小华: 当然有！我们可以使用WebSocket来实现实时通信，这样可以确保消息的即时传递。

小明: 那么怎么处理用户的在线状态呢？

小华: 我们可以在用户登录时将他们的在线状态设置为“在线”。当用户关闭页面或断开连接时，我们可以通过监听WebSocket的关闭事件来更新用户的在线状态。

小明: 明白了。那么具体的代码怎么实现呢？

小华: 我们可以先创建一个WebSocket实例，并监听其open、message和close事件。

小明: 具体怎么做？

            
                // 创建WebSocket实例
                const socket = new WebSocket('ws://example.com/socket');

                // 监听连接打开事件
                socket.addEventListener('open', function (event) {
                    console.log("已连接到服务器");
                    // 发送消息给服务器，表明用户上线
                    socket.send(JSON.stringify({action: 'online', userId: 'user123'}));
                });

                // 监听消息接收事件
                socket.addEventListener('message', function (event) {
                    console.log("接收到消息: " + event.data);
                });

                // 监听连接关闭事件
                socket.addEventListener('close', function (event) {
                    console.log("连接已关闭");
                    // 更新用户的在线状态为“离线”
                    socket.send(JSON.stringify({action: 'offline', userId: 'user123'}));
                });
            
        

小明: 这样就能实时地更新用户的在线状态了。如果要实现更复杂的消息管理中心，比如消息队列，应该怎么处理呢？

小华: 我们可以使用一个队列来存储未发送的消息，当网络恢复后，再逐条发送这些消息。

小明: 看起来挺不错的！谢谢你的建议。

]]>