Why is the collection not passed to the client side

user_17397268 0
Viewed 51

I create a map object and write down the id at the key, the username as the value, everything works fine on the server side, the collection is output to the console, but when I pass it to the client side, it is either not transferred correctly or does not work at all. Everything worked fine with the array. Server:

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

Client:

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

Writes an error: users is not iterable.

socket.io node.js javascript
2 Answers

The problem is because of the library you're using, socket.io converts the payload object to JSON during the communication between your client-side and server-side.

However, you're not able to convert a Map or Set object to JSON directly. You can have a try:

enter image description here

A screenshot of the document:

enter image description here

user_52992360

You're trying pass JavaScript objects through TCP socket (http, web-socket). TCP sockets are not language specific and cannot deal with native js objects. But they can work with strings and binary data.

But socket.io library is pretty smart and can figure out you're passing an object. It will run JSON.stringify on your value (will convert to string) then send it through the network and on the client side will convert it back to the object with JSON.parse.

Everything would work if simple objects would be used. But in this case ES6 Map is used. When JSON.stringify is used on map it will always be converted to empty object. Like this:

Server

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

Client

JSON.parse(map); // {}

Then on client side you try to for of loop on empty object. This kind of loop will work on ES6 Map but not on object.

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

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

The solution to this problem is pretty simple: Don't try send ES6 Map. Use plain object instead.

Instead of this:

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

Use this:

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

Client side:

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