如何使用Socket.io向客户端发送undefined/null值？

我之前也碰到过这个情况——默认的Socket.IO parser确实会在序列化时丢掉值为undefined的键（因为底层用的是JSON.stringify，它本身就会忽略undefined值的键），不过null其实是会被保留的，可能你的场景里有其他因素导致null也被处理了？不管怎样，这里有几个不用自定义parser或修改默认parser的解决办法：

方法1：用键值对数组传递（最简洁） #

直接把对象转换成键值对数组发送，Socket.IO不会修改数组内容，接收后再转回对象，这样就能完整保留undefined和null的键：

// 发送端处理
const rawData = { username: undefined, avatarUrl: null };
const sendData = Object.entries(rawData);
socket.emit('clear-view', sendData);

// 接收端还原
socket.on('clear-view', (receivedData) => {
  const parsedData = Object.fromEntries(receivedData);
  // parsedData 现在是 { username: undefined, avatarUrl: null }
  // 接下来用这个数据清除视图即可
});

方法2：用占位符替换Undefined/Null #

如果偏好保持对象格式传递，可以把undefined和null替换成特定的占位符，接收时再转换回去：

// 发送端工具函数
function sanitizeSocketData(data) {
  return Object.fromEntries(
    Object.entries(data).map(([key, value]) => {
      if (value === undefined) {
        return [key, "__SOCKET_UNDEFINED__"];
      }
      // 如果你的场景里null也被移除，就加上这个分支，否则可以省略
      if (value === null) {
        return [key, "__SOCKET_NULL__"];
      }
      return [key, value];
    })
  );
}

// 发送时
socket.emit('clear-view', sanitizeSocketData({ username: undefined, avatarUrl: null }));

// 接收端工具函数
function restoreSocketData(data) {
  return Object.fromEntries(
    Object.entries(data).map(([key, value]) => {
      if (value === "__SOCKET_UNDEFINED__") {
        return [key, undefined];
      }
      if (value === "__SOCKET_NULL__") {
        return [key, null];
      }
      return [key, value];
    })
  );
}

// 接收时
socket.on('clear-view', (receivedData) => {
  const parsedData = restoreSocketData(receivedData);
  // 处理视图清除逻辑
});

方法3：包裹成JSON字符串发送 #

通过JSON.stringify的replacer函数保留undefined，发送字符串后再解析回来：

// 发送端
const rawData = { username: undefined, avatarUrl: null };
const jsonString = JSON.stringify(rawData, (key, value) => {
  // 用特殊标记替换undefined，null会正常序列化
  return value === undefined ? "__UNDEFINED__" : value;
});
socket.emit('clear-view', jsonString);

// 接收端
socket.on('clear-view', (jsonString) => {
  const parsedData = JSON.parse(jsonString, (key, value) => {
    return value === "__UNDEFINED__" ? undefined : value;
  });
  // 现在parsedData包含原始的undefined和null
});

这些办法都绕开了修改默认parser的需求，只需要在数据的收发两端做轻量转换，就能满足你用undefined/null清除视图的需求。

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