How to send HTTP response with JSON data from Arduino to web browser?

Projects Programming
1

Hi all.

First off. I have posted this question on StackOverflow but it seems that no one has an idea on how to do it. So maybe you guys can help me?

In my research for a near future Arduino project, I am experimenting with sending JSON from an Arduino webserver.

I am trying to get my Arduino to send back some dummy JSON data when I go to the Arduino's IP address in my browser. The browser hangs while waiting for a response from the webserver. After 10-15 seconds this is the response header I get:

HTTP/1.1 504 Fiddler - Receive Failure
Date: Thu, 24 Sep 2015 20:52:36 GMT
Content-Type: text/html; charset=UTF-8
Connection: close
Cache-Control: no-cache, must-revalidate
Timestamp: 22:52:36.877

[Fiddler] ReadResponse() failed: The server did not return a complete response for this request. Server returned 0 bytes

Now in my code I am trying to send a response header with Content-Type: application/json; charset=utf-8 so I don't understand why the response I get in the browser is of Content-Type: text/html; charset=utf-8.

Following is the part of Arduino code where I am responding to a client request on the webserver:

void loop() {
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        if (c == '\n' && currentLineIsBlank) {
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: application/json;charset=utf-8");
          client.println("Server: Arduino");
          client.println("Connection: close");
          client.println();
          client.println("[{\"tempIn\":23.2, \"tempOut\":16.8, \"unit\":\"Celcius\" }]");
          client.println();
          break;
        }
        if (c == '\n') {
          currentLineIsBlank = true;
        }
        else if (c != '\r') {
          currentLineIsBlank = false;
        }
      }
    }
    delay(1);
    client.stop();
    Serial.println("client disconnected");
  }
}

By the way I modified the example in this tutorial: Arduino Tutorial: Temperature Sensor | Kodeco

Well I can infer from the Fiddler message that my response from the Arduino is not complete. But I can't figure out what I am missing. I have been searching all over the internet for a clue but I can only find examples on how to send JSON TO the Arduino and not FROM it so I hope that some of you can help me find a solution. Or maybe point me in the right direction of other ways to send JSON data from the Arduino to a web browser.

Thanks in advance :slight_smile:

1 Like
2

json is just text. Why not let the server default to sending text, and see what happens?

3

PaulS:
json is just text. Why not let the server default to sending text, and see what happens?

This is SO strange. I tried to say "Content-Type: text/html". This worked.. Kind of.. Because now I just received the JSON data as a text string which weren't very usefull. Then i changed it back to say "Content-Type: application/json" and now it works like a charm (!?!?!). That's odd.

But thanks for your suggestion PaulS :slight_smile:

4

My server just toogle a led, im return response in this:

// Return the response
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: application/json");
client.println("Access-Control-Allow-Origin: *");
client.println("");

if(state == 1) {
client.print("{"status": {"led_is": "on"}}");
} else {
client.print("{"status": {"led_is": "off"}}");
}

this print a json in page: {status: {led_is: off}}

5

Hi i have the same problem,
can not get the response working corectly
i wat tha same the status of the relais in the response

my post commad looks like this:

server.on("/relay/toggle", HTTP_POST, [](AsyncWebServerRequest *request){
request->send(200, "text/plain","{"relay": "on"}");
digitalWrite(relayPin, !digitalRead(relayPin));

this give a nice relay: on as a response but i want the actual status as response

i tried with if and else and to select the on and off but that was not working.

6

but i want the actual status as response

The actual status of what?

If you want to send dynamic data, why are you hard-coding the data to send?