为什么集合没有传递到客户端答案

【问题标题】：Why is the collection not passed to the client side为什么集合没有传递到客户端
【发布时间】：2022-01-15 11:38:14
【问题描述】：

我创建了一个地图对象并在键处记下 id，将用户名作为值，在服务器端一切正常，集合输出到控制台，但是当我将它传递到客户端时，它要么没有正确传输，要么根本不工作。阵列一切正常。服务器：

socket.on('connect user', (userName) => {
    //users.push(userName.userConnect);
    users.set(id++, userName.userConnect); // map users
    console.log(users);
    io.emit("users", users); // passing the collection

客户：

const addUserToModalWindow = () => {
    const contentWindow = document.querySelector(".usersList");
    socket.on('users', (users) => {
    for (let user of users) {
        console.log(user);
        }
    });
};

写入错误：用户不可迭代。

【问题讨论】：

标签： javascript node.js socket.io

【解决方案1】：

问题在于您使用的库，socket.io 在客户端和服务器端之间的通信期间将有效负载对象转换为 JSON。

但是，您无法将 Map 或 Set 对象直接转换为 JSON。你可以试试：

the document的截图：

【讨论】：

【解决方案2】：

您正在尝试通过 TCP 套接字（http、web-socket）传递 JavaScript 对象。 TCP 套接字不是特定于语言的，不能处理本机 js 对象。但它们可以处理字符串和二进制数据。

但是 socket.io 库非常聪明，可以判断您正在传递一个对象。它将在您的值上运行JSON.stringify（将转换为字符串），然后通过网络发送它，在客户端将其转换回带有JSON.parse 的对象。

如果使用简单的对象，一切都会起作用。但在这种情况下，使用 ES6 Map。在地图上使用JSON.stringify 时，它将始终转换为空对象。像这样：

服务器

const map = new Map();
map.set(1, { name: "Joh Doe" });
JSON.stringify(map); // '{}'

客户

JSON.parse(map); // {}

然后在客户端你尝试for of 在空对象上循环。这种循环适用于 ES6 Map，但不适用于对象。

for (const v of {}) console.log(v) //  is not iterable Error

for (const v of new Map()) console.log(v) // works fine

解决这个问题的方法很简单：不要尝试发送 ES6 Map。改用普通对象。

而不是这个：

const users = new Map();
users.set(1, { name: "Joh Doe" });

使用这个：

const users = {};
users[1] = { name: "Joh Doe" };

客户端：

socket.on('users', (users) => {
  for (let user of Object.values(users)) {
    console.log(user);
  }
});

【讨论】：