ESP8266 WebSocket向WebServer发送多色彩数据异常问题

ESP8266设备通过WebSocket向WebServer上传色彩数据时，仅发送RGB与CMYK数据功能正常，但添加XYZ、HSV、HSL数据后，WebServer端出现数据无效（如显示UNDEFINED或全0值）。串口输出的JSON数据显示转换正常，已尝试将StaticJsonDocument内存扩大至400，问题仍未解决。

正常工作代码 #

void conversion_to_webpage()
{
  unsigned long now = millis();
  if ((unsigned long)(now - previousMillis) > interval) 
  { 
    String jsonString = "";
    StaticJsonDocument<200> doc;
    JsonObject object = doc.to<JsonObject>();
    //RGB
    object["RGB_Rvalue"] = color_RGB[0];
    object["RGB_Gvalue"] = color_RGB[1];
    object["RGB_Bvalue"] = color_RGB[2];
    //CMYK
    object["CMYK_Cvalue"] = color_CMYK[0];
    object["CMYK_Mvalue"] = color_CMYK[1];
    object["CMYK_Yvalue"] = color_CMYK[2];
    object["CMYK_Kvalue"] = color_CMYK[3];

    serializeJson(doc, jsonString);
    Serial.println(jsonString);
    webSocket.broadcastTXT(jsonString);
      
    previousMillis = now;
  }
}

异常代码（添加更多数据后） #

void conversion_to_webpage()
{
  unsigned long now = millis();
  if ((unsigned long)(now - previousMillis) > interval) 
  { 
    String jsonString = "";
    StaticJsonDocument<256> doc;
    JsonObject object = doc.to<JsonObject>();
    //RGB
    object["RGB_Rvalue"] = color_RGB[0];
    object["RGB_Gvalue"] = color_RGB[1];
    object["RGB_Bvalue"] = color_RGB[2];
    //XYZ
    object["XYZ_Xvalue"] = round(color_XYZ[0]);
    object["XYZ_Yvalue"] = round(color_XYZ[1]);
    object["XYZ_Zvalue"] = round(color_XYZ[2]);
    //CMYK
    object["CMYK_Cvalue"] = color_CMYK[0];
    object["CMYK_Mvalue"] = color_CMYK[1];
    object["CMYK_Yvalue"] = color_CMYK[2];
    object["CMYK_Kvalue"] = color_CMYK[3];
    //HSV
    object["HSV_Hvalue"] = round(color_HSV[0]);
    object["HSV_Svalue"] = round(color_HSV[1]);
    object["HSV_Vvalue"] = round(color_HSV[2]);
    //HSL
    object["HSL_Hvalue"] = round(color_HSL[0]);
    object["HSL_Svalue"] = round(color_HSL[1]);
    object["HSL_Lvalue"] = round(color_HSL[2]);
    

    serializeJson(doc, jsonString);
    Serial.println(jsonString);
    webSocket.broadcastTXT(jsonString);
      
    previousMillis = now;
  }
}

排查与解决建议 #

1. 精准计算JSON所需内存
   在serializeJson前添加代码计算序列化后的JSON长度，确保StaticJsonDocument的容量足够：

   size_t requiredSize = measureJson(doc);
   Serial.print("JSON所需内存: ");
   Serial.println(requiredSize);
   

   根据输出结果调整StaticJsonDocument的大小，比如直接设置为512或1024。

2. 检查WebSocket数据包限制
   ESP8266的WebSocket库可能存在单包长度上限，超出后会截断数据。可以查看库的配置参数（如WEBSOCKET_MAX_MESSAGE_SIZE），调整其值适配更大的数据包；或者尝试将数据拆分为多个小数据包发送。

3. 验证WebServer端解析逻辑
   串口输出JSON正常说明ESP8266端序列化无问题，重点检查WebServer端的字段读取逻辑：

   • 确认字段名拼写、大小写完全匹配（比如XYZ_Xvalue不能写成Xyz_Xvalue）
   • 检查数据类型处理是否正确（比如是否将数值型字段当成字符串解析）

4. 改用动态JSON文档测试
   暂时替换StaticJsonDocument为DynamicJsonDocument，规避静态内存分配的估算误差：

   DynamicJsonDocument doc(1024);
   

   如果问题解决，再根据measureJson的结果调整回合适大小的StaticJsonDocument。

5. 确认原始色彩数据有效性
   在赋值前打印color_XYZ、color_HSV等变量的原始值，确保没有出现NaN、无穷大或未初始化的无效数据：

   Serial.print("HSV原始值: ");
   Serial.print(color_HSV[0]);
   Serial.print(", ");
   Serial.print(color_HSV[1]);
   Serial.print(", ");
   Serial.println(color_HSV[2]);
   

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