Socket.io聊天室页面重载时如何保留messages与roomUsers数据？

我在学习Socket.io开发聊天室练习项目时遇到了数据持久化问题。参考教程实现后，页面重载时无法保留messages和roomUsers数据。尝试用localStorage解决，但效果不理想：消息重载后看似正常，但房间用户数据读不出来，还会丢失当前用户。

后端核心代码 #

const express = require('express');
const app = express();
const http = require('http');
const cors = require('cors');
const { Server } = require('socket.io');
const harperSaveMessage = require('./services/harper-save-message');
const harperGetMessages = require('./services/harper-get-messages');
const leaveRoom = require('./utils/leave-room');

app.use(cors());

const server = http.createServer(app);

const io = new Server(server, { 
    cors: {
        origin: 'http://localhost:3000',
        methods: ['GET', 'POST'],
    }
});

const CHAT_BOT = 'ChatBot';
let chatRoom = '';
let allUsers = [];

io.on('connection', (socket) => {
    console.log(`User connected ${socket.id}`);

    // 其他业务代码...    

    socket.on('disconnect', () => {
        console.log('User disconnected from the chat');
        const user = allUsers.find((user) => user.id == socket.id);
        const __createdtime__ = Date.now();

        if (user?.username) {
            allUsers = leaveRoom(socket.id, allUsers);
            socket.to(chatRoom).emit('chatroom_users', allUsers);
            socket.to(chatRoom).emit('receive_message', {
                username: CHAT_BOT,
                message: `${user.username} has disconnect from the chat.`,
                __createdtime__,
            });
            console.log(`${user.username} disconnected from the chat`);
        }
    });
});

server.listen(4000, () => 'Server is running on port 4000');

前端情况 #

前端基于React开发，核心组件为Messages和RoomAndUsers，除socket通过io.connect("http://localhost:4000")获取外，其余状态均用useState存储。

已尝试的方案 #

在客户端添加两个useEffect同步localStorage中的变量，但效果不佳。

解决思路 #

1. 后端层面：用数据库替代内存存储用户数据

• 当前后端用内存数组allUsers存储房间用户，页面重载触发socket重连后，内存数据直接丢失。需将用户加入/离开房间的操作同步到数据库（如教程中的HarperDB），用户重连时从数据库拉取当前房间的用户列表。
• 消息已有HarperDB存储逻辑，重载时优先从数据库拉取历史消息，localStorage仅作为前端缓存，数据库作为权威数据源。

2. 前端层面：优化localStorage同步与状态初始化

• 保留用户身份：页面加载时先从localStorage读取当前用户的username和所在chatRoom，主动触发socket的join_room事件，让后端重新将用户加入房间并更新用户列表。
• 状态初始化优先读取缓存：

  const [messages, setMessages] = useState(() => {
    const saved = localStorage.getItem('chatMessages');
    return saved ? JSON.parse(saved) : [];
  });
  const [roomUsers, setRoomUsers] = useState(() => {
    const saved = localStorage.getItem('roomUsers');
    return saved ? JSON.parse(saved) : [];
  });
  

• 仅在后端推送数据时同步缓存：避免前端主动修改localStorage导致与后端数据不一致，只在收到chatroom_users和receive_message事件时更新缓存：

  useEffect(() => {
    localStorage.setItem('chatMessages', JSON.stringify(messages));
  }, [messages]);
  
  useEffect(() => {
    localStorage.setItem('roomUsers', JSON.stringify(roomUsers));
  }, [roomUsers]);
  

3. Socket重连逻辑补充

• 在socket的connect事件（重连时触发）中，检查localStorage是否存在用户和房间信息，若存在则立即发送join_room请求，让后端重新将用户加入房间并推送最新数据。
• 后端需处理重复加入场景：若用户已在房间列表中，避免重复添加导致用户信息重复。

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