如何实时格式化WebSocket响应？实现键名自定义映射

当然有办法实现！核心就是提前定义好数字键和目标键名的映射规则，然后写一个转换函数，每次WebSocket收到新消息时自动调用这个函数处理数据。我给你一步步拆解实现方案：

1. 定义键名映射规则 #

首先我们先把数字键和想要替换的有意义键名对应起来，做成一个映射对象：

// 自定义你的映射规则，数字键要写成字符串（因为对象的键默认是字符串类型）
const keyMap = {
  '0': 'Year',
  '1': 'Food',
  '2': 'Brand',
  '3': 'Name'
};

如果后续需要调整键名对应关系，直接修改这个keyMap就行，非常灵活。

2. 编写数据转换函数 #

接下来写一个函数，专门用来把原始的数字键对象转换成我们想要的结构：

function transformWebSocketData(rawData) {
  const transformedData = {};
  
  // 遍历原始对象的每一个键值对
  for (const oldKey in rawData) {
    // 用映射规则替换键名，如果没有匹配的映射，就保留原键（可根据需求改成忽略）
    const newKey = keyMap[oldKey] || oldKey;
    transformedData[newKey] = rawData[oldKey];
  }
  
  return transformedData;
}

如果你习惯用ES6+的简洁写法，也可以用Object.entries和Object.fromEntries来简化：

function transformWebSocketData(rawData) {
  return Object.fromEntries(
    Object.entries(rawData).map(([oldKey, value]) => [keyMap[oldKey] || oldKey, value])
  );
}

3. 结合WebSocket消息监听实现实时转换 #

最后把转换函数绑定到WebSocket的消息监听事件上，每次收到新响应就自动处理：

// 初始化你的WebSocket连接
const socket = new WebSocket('ws://your-websocket-server-url');

// 监听消息接收事件
socket.onmessage = (event) => {
  try {
    // 解析WebSocket返回的JSON数据
    const rawResponse = JSON.parse(event.data);
    // 实时转换键名
    const formattedResponse = transformWebSocketData(rawResponse);
    
    // 这里就可以使用转换后的对象了，比如渲染页面、处理业务逻辑
    console.log('转换后的数据：', formattedResponse);
    // 示例输出：{ Year: "2019", Food: "rice", Brand: "samsung", Name: "james" }
  } catch (error) {
    // 处理数据解析或转换出错的情况
    console.error('数据处理失败：', error);
  }
};

额外提示 #

• 如果原始响应的键是数字类型（而非字符串），映射规则里的键写成数字也可以，但对象的键最终还是会被转成字符串，所以统一用字符串更稳妥。
• 如果遇到没有在映射规则里的键，上面的代码会保留原键；如果你想忽略这些无映射的键，只需要把keyMap[oldKey] || oldKey改成keyMap[oldKey]，并在循环里加个判断：只有存在映射时才添加到新对象里。

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