Most Efficient Way of Combining Large Strings for HTML Response

Projects Programming
25

Just don't concatenate anything to the HTML file on the server side.

This solution is completely static. Just host the HTML file and the log.csv file in the SPIFFS, and write your log entries to the log.csv file.

1526984400,Log entry 0
1526984460,Log entry 1
1526984520,Log entry 2
1526984580,Log entry 3

<html>

<div id="log">
  <h2>Log</h2>
</div>

<script type="text/javascript">
  fetch("log.csv")
    .then(response => response.text())
    .then(csvText => csvToTable(csvText))
    .then(htmlTable => addLogTableToPage(htmlTable))
    .catch(e => console.error(e));

  function csvToTable(csvText) {
    csvText = csvText.trim();
    console.log(csvText);
    let lines = csvText.split("\n");
    let table = document.createElement("table");
    lines.forEach(line => {
      let fields = line.split(",");
      let row = document.createElement("tr");
      fields.forEach((field, index) => {
        let cell = document.createElement("td");
        let text = index == 0 ? unixTS2String(field) : field;
        cell.appendChild(document.createTextNode(text));
        row.appendChild(cell);
      });
      table.appendChild(row);
    });
    return table;
  }

  function unixTS2String(str) {
    return new Date(parseInt(str) * 1000).toLocaleString();
  }

  function addLogTableToPage(table) {
    document.getElementById("log").appendChild(table);
  }

  if (!String.prototype.trim) {
    String.prototype.trim = function () {
      return this.replace(/^\s+|\s+$/g, '');
    };
  }
</script>

<style>
  td {
    border: 1px solid #ccc;
    padding: 8px;
  }

  tr:nth-child(even) {
    background-color: #f1f1f1;
  }
</style>

</html>

The result:
fetch_log.png

If you want to use single values/variables, you don't need a file. Just add a handler in the HTTP server, and print the value to the response.

server.on("/value", HTTP_GET, [](){ server.send(200, "text/plain", getValue()); });

int myValue = 42;

const char* getValue() {
  static char buffer[16];
  snprintf(buffer, sizeof(buffer), "%d", myValue);
  return buffer;
}

If you have to send a lot of individual values, group them together, or keep the connection open (e.g. using WebSockets) to minimize TCP and HTTP overhead.