ZegoCloud Chat&Call APP聊天集成求助：提取msg_content并写入DIV的实现问题

我来帮你理清楚这个问题的核心——从你提供的控制台输出能看出来，消息的层级比你最初理解的要深，而且content字段里还嵌套了一层转义后的JSON字符串，这就是之前解析出错的关键原因。

问题拆解 #

你直接用JSON.parse(messageInfo)后想获取msg_content，但实际上msg_content藏在content字段里的push内容中，而且content的格式是"push {xxx}"，需要先处理掉前缀再解析内部的JSON。之前出现的substring错误，大概率是因为没有判断content的格式就直接截取，导致找不到对应属性触发报错。

正确的提取与展示步骤 #

咱们一步步来处理这个流程：

1. 先解析外层的messageInfo对象；
2. 提取content字段，去掉开头的"push "前缀，得到内部的JSON字符串；
3. 解析这个内部JSON字符串，逐层访问body -> msg_data数组 -> 第一个元素里的msg_content；
4. 把提取到的内容安全地插入到页面的DIV中（别用document.write，它会覆盖页面内容，用textContent更安全）。

代码实现示例 #

ZegoExpressManager.shared.onIMRecvBroadcastMessage(async (roomID, messageInfo) => {
  try {
    // 1. 解析外层消息对象
    const outerMsg = JSON.parse(messageInfo);
    // 2. 校验content格式并处理前缀
    if (!outerMsg.content || !outerMsg.content.startsWith('push ')) {
      console.warn('消息格式不符合预期', outerMsg);
      return;
    }
    const innerJsonStr = outerMsg.content.substring('push '.length);
    // 3. 解析内部嵌套的JSON
    const innerMsg = JSON.parse(innerJsonStr);
    // 4. 安全提取msg_content（用可选链避免字段不存在报错）
    const msgContent = innerMsg?.body?.msg_data?.[0]?.msg_content;
    if (!msgContent) {
      console.warn('未找到有效msg_content字段', innerMsg);
      return;
    }
    // 5. 写入到目标DIV（假设你的DIV id为chat-display）
    const chatContainer = document.getElementById('chat-display');
    if (chatContainer) {
      // 用textContent避免XSS风险，如需富文本可替换为innerHTML
      const msgElement = document.createElement('div');
      msgElement.textContent = msgContent;
      chatContainer.appendChild(msgElement);
    }
  } catch (error) {
    console.error('消息解析或展示出错:', error);
  }
});

关键注意点 #

• 错误防护：加入try-catch和可选链?.判断，避免因为消息格式异常导致页面崩溃；
• 安全展示：优先使用textContent而非innerHTML，防止恶意内容注入页面；
• 格式校验：先判断content是否以push 开头，这能直接避免之前遇到的Cannot read properties of undefined (reading 'substring')错误——如果outerMsg.content是undefined，直接调用substring就会触发该报错。

这样应该就能顺利提取到msg_content并展示到页面上啦～

内容的提问来源于stack exchange，提问作者Newbie Net Doc