Socket.io实现Google Charts动态数据更新的性能问题咨询

核心问题 #

• 需根据可变数量的图表ID，循环创建Socket.io事件绑定独立SQL查询
• 页面State重载后，数据更新速度逐渐变慢（近乎翻倍），疑似资源重复累积

现有代码 #

socket.on("init", async (ids, cb) => {
    const data: any[] = []
    console.log(socket.eventNames())
    if (!con) {
        con = await mysql.createConnection({
            host: "somehost",
            user: "user",
            password: "pwd",
            database: "db",
            connectTimeout: 3000
        })
    }

    for (const id of ids) {
        console.log("Initializing", id);
        socket.on("get-data" + id, async (payload) => {
            const { query, interval, _id } = payload

                intervals.push(setInterval(async () => {
                    const loadedData = await loadData(query)
                    if (loadedData) {
                        socket.emit("data" + _id, loadedData);
                    }
                }, interval))
            }
        })
    }

})

问题诊断 #

1. 事件重复绑定：每次init事件触发（比如页面重载后），都会给同一个Socket实例重复绑定get-data{id}事件。同一事件被多次监听后，每次触发都会新增定时器，导致定时器数量指数级增长，更新频率自然翻倍。
2. 资源清理不彻底：虽然把定时器存入数组，但未解绑旧的事件监听，断开连接时这些监听依然存在，加上新绑定的，资源持续累积导致性能下降。

解决方案 #

1. 避免重复绑定事件 #

在绑定新的get-data{id}事件前，先移除该事件的旧监听；或者在init触发时，批量清理所有之前绑定的get-data前缀事件。

2. 完善资源全生命周期管理 #

客户端断开连接时，不仅要清理定时器，还要解绑所有自定义事件，必要时关闭数据库连接。

优化后的代码示例 #

socket.on("init", async (ids, cb) => {
    const data: any[] = []
    console.log(socket.eventNames())
    if (!con) {
        con = await mysql.createConnection({
            host: "somehost",
            user: "user",
            password: "pwd",
            database: "db",
            connectTimeout: 3000
        })
    }

    // 先清理旧的get-data事件监听，避免重复绑定
    socket.eventNames().forEach(eventName => {
        if (typeof eventName === 'string' && eventName.startsWith('get-data')) {
            socket.off(eventName);
        }
    });

    // 清空并销毁旧的定时器
    intervals.forEach(interval => clearInterval(interval));
    intervals = [];

    for (const id of ids) {
        console.log("Initializing", id);
        // 绑定新事件前先移除旧的，确保每个事件只有一个监听
        socket.off("get-data" + id).on("get-data" + id, async (payload) => {
            const { query, interval: updateInterval, _id } = payload

            // 创建新定时器并加入管理数组
            const timer = setInterval(async () => {
                const loadedData = await loadData(query)
                if (loadedData) {
                    socket.emit("data" + _id, loadedData);
                }
            }, updateInterval)
            intervals.push(timer);
        })
    }
})

// 断开连接时彻底清理所有资源
socket.on("disconnect", () => {
    // 销毁所有定时器
    intervals.forEach(interval => clearInterval(interval));
    intervals = [];
    
    // 解绑所有自定义事件
    socket.eventNames().forEach(eventName => {
        if (typeof eventName === 'string' && (eventName.startsWith('get-data') || eventName.startsWith('data'))) {
            socket.off(eventName);
        }
    });
    
    // 关闭数据库连接（单连接场景下）
    if (con) {
        con.end();
        con = null;
    }
})

Socket.io选型合理性确认 #

Socket.io完全适配你的场景：

• 支持实时双向通信，能快速将数据库更新推送到前端Google Charts
• 自带重连机制，页面重载后自动恢复连接，适配动态图表的灵活需求
• 支持自定义事件，能轻松为每个图表绑定独立的数据查询和推送逻辑

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