Socket.IO中传递Map对象至前端后无法遍历的解决方案

问题场景 #

开发在线用户显示功能时，后端使用JavaScript的Socket.IO，通过Map存储已连接用户，当新用户连接时将Map传递到前端，尝试遍历该对象时出现data无法迭代的错误。

原服务器端代码 #

var users = new Map();

io.on('connection', function(socket) {
    socket.on('user_connected', function(username) {
        console.log(`${username} has connected`);
        users.set(socket.id, username);
        io.emit('updateUsers', users);
    });
});

原客户端代码 #

var username = cookies.get('USERNAME');
var socket = io('http://localhost:4000');

socket.on('connect', function() {
    socket.emit('user_connected', username);
});

socket.on('updateUsers', function(data) {
    for (const [key, value] of data) {
        showOnlineTutors(value);
    }
});

问题原因 #

Socket.IO在传输数据时，会自动将复杂的Map对象序列化为普通JSON对象（结构类似{ "socketId": "username" }），前端接收到的不再是Map实例，因此无法直接使用遍历Map的for...of语法。

解决方法 #

方法1：后端将Map转为普通对象后发送 #

利用Object.fromEntries()把Map转换为普通键值对对象，前端通过Object.entries()遍历：

修改后的服务器端代码

var users = new Map();

io.on('connection', function(socket) {
    socket.on('user_connected', function(username) {
        console.log(`${username} has connected`);
        users.set(socket.id, username);
        // 将Map转换为普通对象
        io.emit('updateUsers', Object.fromEntries(users));
    });
});

修改后的客户端代码

var username = cookies.get('USERNAME');
var socket = io('http://localhost:4000');

socket.on('connect', function() {
    socket.emit('user_connected', username);
});

socket.on('updateUsers', function(data) {
    // 遍历普通对象的键值对
    for (const [key, value] of Object.entries(data)) {
        showOnlineTutors(value);
    }
});

方法2：后端将Map转为数组发送，前端重构为Map #

把Map的键值对转为数组，前端接收后重新创建Map实例：

修改后的服务器端代码

var users = new Map();

io.on('connection', function(socket) {
    socket.on('user_connected', function(username) {
        console.log(`${username} has connected`);
        users.set(socket.id, username);
        // 将Map转为键值对数组
        io.emit('updateUsers', Array.from(users.entries()));
    });
});

修改后的客户端代码

var username = cookies.get('USERNAME');
var socket = io('http://localhost:4000');

socket.on('connect', function() {
    socket.emit('user_connected', username);
});

socket.on('updateUsers', function(data) {
    // 从数组重构Map实例
    const usersMap = new Map(data);
    for (const [key, value] of usersMap) {
        showOnlineTutors(value);
    }
});

内容的提问来源于stack exchange，提问作者jakewags01