socket.io发送数组/对象为空、console.log取值undefined问题排查求助

架构老林

2026-9-29

问题根因分析

你遇到的核心问题是引用类型的异步更新 + Chrome控制台的懒加载特性导致的逻辑偏差：

你代码里初始化metadata数组之后，仅定义了Helper.setMetadata方法用来给数组塞值，后续就立刻执行了console.log和socket.emit。这时候setMetadata还没有被p5js调用，所以此时metadata确实是空数组，你读索引、读长度、JSON.stringify、socket发送的都是空值，完全符合逻辑预期。
Chrome控制台打印引用类型（数组、对象）的时候，不会直接保存打印那一刻的完整快照，只会存储对象的引用。当你在控制台手动点击展开这个打印结果的时候，Chrome才会读取当前内存里这个对象的最新值展示给你。你看到截图里数组有内容，是因为你点展开的时候，p5js已经完成了计算、调用了setMetadata把值塞进去了，并不是你执行console.log的那一刻数组就有值。

为什么puppeteer无头浏览器表现不一样

puppeteer默认的页面执行调度逻辑和你手动打开Chrome访问的执行时机有差异：你手动打开Chrome的时候，页面脚本执行顺序是「初始化数组→打印+发socket→p5js执行完成调用setMetadata」，而你用puppeteer访问的时候，要么是puppeteer的默认等待逻辑让p5js先执行完成了才触发socket发送，要么是无头模式下p5js的初始化速度比带UI的Chrome更快，刚好在socket发送前就完成了setMetadata的调用，所以能正常拿到数据。

解决方案

你只需要调整socket发送的时机，确保metadata被填充完成之后再执行发送即可，推荐两种方案：

把发送逻辑写到setMetadata方法里，每次更新完数组就触发发送，如果需要等两个值都push完再发可以加判断：

const Helper = {
  seed: <%=d%>, 
  setMetadata: function (mn,bm) { 
    metadata.push(mn); 
    metadata.push(bm);
    // 填充完成后直接发送
    socket.emit("message", metadata);
  }
};