0
151
Visualizações¿Por qué la colección no se pasa al lado del cliente?
Creo un objeto de mapa y escribo la identificación en la clave, el nombre de usuario como valor, todo funciona bien en el lado del servidor, la colección se envía a la consola, pero cuando lo paso al lado del cliente, no es transferido correctamente o no funciona en absoluto. Todo funcionó bien con la matriz. Servidor:
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 collectionCliente:
const addUserToModalWindow = () => { const contentWindow = document.querySelector(".usersList"); socket.on('users', (users) => { for (let user of users) { console.log(user); } }); };Escribe un error: los usuarios no son iterables.
2 Respostas
Responde à pergunta0
El problema se debe a la biblioteca que está utilizando, socket.io convierte el objeto de carga útil a JSON durante la comunicación entre el lado del cliente y el lado del servidor.
Sin embargo, no puede convertir un objeto Map o Set a JSON directamente. Puedes intentarlo:
Una captura de pantalla del documento :
0
Está intentando pasar objetos JavaScript a través del socket TCP (http, web-socket). Los sockets TCP no son específicos del idioma y no pueden manejar objetos js nativos. Pero pueden trabajar con cadenas y datos binarios.
Pero la biblioteca socket.io es bastante inteligente y puede darse cuenta de que está pasando un objeto. Ejecutará JSON.stringify en su valor (se convertirá en una cadena), luego lo enviará a través de la red y en el lado del cliente lo convertirá de nuevo al objeto con JSON.parse .
Todo funcionaría si se usaran objetos simples. Pero en este caso se usa ES6 Map . Cuando se usa JSON.stringify en el mapa, siempre se convertirá en un objeto vacío. Me gusta esto:
Servidor
const map = new Map(); map.set(1, { name: "Joh Doe" }); JSON.stringify(map); // '{}'Cliente
JSON.parse(map); // {} Luego, en el lado del cliente, intenta hacer for of bucle en un objeto vacío. Este tipo de bucle funcionará en el Map ES6 pero no en el objeto.
for (const v of {}) console.log(v) // is not iterable Error for (const v of new Map()) console.log(v) // works fineLa solución a este problema es bastante simple: no intente enviar ES6 Map. Use un objeto simple en su lugar.
En lugar de esto:
const users = new Map(); users.set(1, { name: "Joh Doe" });Utilizar esta:
const users = {}; users[1] = { name: "Joh Doe" };Lado del cliente:
socket.on('users', (users) => { for (let user of Object.values(users)) { console.log(user); } });