将数据从 socket.io 推送到数组中答案

【问题标题】：Pushing data from socket.io into array将数据从 socket.io 推送到数组中
【发布时间】：2020-05-30 20:55:34
【问题描述】：

我有以下似乎无法解决的问题。我正在尝试从我的 socket.io 发射器中获取一组数组，其结构如下：

[ [{...},{...},{...}] , [{...},{...}] , [{...}] ]

相反，我得到了这个：

我需要一个主阵列中的所有阵列，以便我可以为每个子阵列渲染引导卡。

客户端代码：

const socket = io("http://localhost:5000");

    socket.on('data', (dta) => {
        handleData(dta.data);  
    })

    function handleData(data) {
      const masterArray= [];
        masterArray.push(data);  
        console.log(masterArray);   
    }

服务器端代码：

for(let i = 0 ; i < alarmpanels.length ; i++) {
const ElkClient = elkClient.ElkClient;
    let client = new ElkClient({
        connection: {
          name: alarmpanels[i].name,
          host: alarmpanels[i].host,
          port: alarmpanels[i].port,
          secure: alarmpanels[i].secure,
          zones: alarmpanels[i].zones
     }
  });

  connectClient(client);
}

  async function connectClient(client) {
    await client.connect();
    const zonesArray = client.options.connection.zones;
    const arr = [];
      try {
        const clhost = client.options.connection.host;
        const clport = client.options.connection.port;
        const clsecure = client.options.connection.secure;
        let data = await client.getArmingStatus();
        for (i = 0 ; i < zonesArray.length ; i ++) {
        const armUpState = await data.areas[i].armUpState;
        const clName = client.options.connection.name;
        const zoneName = zonesArray[i].name;
        const siteName = zonesArray[i].site;
        const clzone = zonesArray[i].zone;
        const totalPanels = zonesArray[i].length;

        const info = new PanelStatus(clhost, clport ,clsecure, clzone, siteName, clName, zoneName, armUpState, totalPanels);
        arr.push(info);
        }


      io.on('connection', (socket, req) => {
          socket.emit('data', {data: arr});
        })

      }
      catch (err) {
        console.log("Connection Lost!");
      }

    }

【问题讨论】：

那么你想让[ [{...},{...},{...}] , [{...},{...}] , [{...}] ]变成[{...}, {...}, {...}, {...}, {...}, {...}]吗？
作为简单的解决方案，您可以使用 lodash 函数，例如 flatten
由于某种原因，数组通过套接字进入时会相互覆盖。 Arr.length 总是显示一个包含对象的数组。我有 6 个数据集，我的服务器端 for 循环迭代并将它们提供给我的连接客户端函数。我的 connectClient() 创建新的 PanelStatus 对象并将每个对象推送到服务器端数组中，并且该数组正在流式传输到我的客户端。但出于某种原因，我需要将每个接收到的数组推送到客户端数组中。另外，我需要数组在进来时保持分组，所以我不确定 flatten 是否有效。
数据来自不同位置的警报系统，我需要在评估每个对象的 armUpState 后以图形方式渲染每个数组中的对象。

标签： javascript express sockets asynchronous socket.io

【解决方案1】：

您的客户端代码需要稍作改动
1) 将 masterArray 声明保留在 handleData 之外
2) 推送到masterArray时，使用...扩展运算符。

const masterArray = [];

/*

const socket = io("http://localhost:5000");

socket.on("data", dta => {
  handleData(dta.data);
}); 

*/

function handleData(data) {
  masterArray.push(...data);
}

handleData([{ a: 4 }, { b: 5 }]);
handleData([{ z: 4 }]);
handleData([{ p: 4 }, { q: 5 }, { r: 5 }]);

console.log(masterArray);

【讨论】：

【解决方案2】：

如果可以使用es2020，可以使用Array.flat()

let startingArray = [
  [{
    entry1: 1,
    entry2: 2,
    entry3: 3
  }, {
    entry4: 4,
    entry5: 5,
    entry6: 6
  }, {
    entry7: 7,
    entry8: 8,
    entry9: 9
  }],
  [{
    entry10: 10,
    entry11: 11,
    entry12: 12
  }, {
    entry13: 13,
    entry14: 14,
    entry15: 15
  }],
  [{
    entry16: 16,
    entry17: 17,
    entry18: 18
  }]
]

const flattened = startingArray.flat()

console.log('startingArray', startingArray)
console.log('flattened', flattened)

【讨论】：