Help understanding why websockets does not work in arduino sketch

[Cliff Karlsson]

have taken som existing code which reads a sensor and outputs to a webserver using websockets (running on an ESP8266) that connects to a wifi-network. I tried to modify the code so that instead of connecting to an existing wifi it creates a AP that I can connect to login to the webserver to show the data.

I can connect to the AP and also connect to the webserver after logging in to the AP. But ít only shows a empty table. If I look at the serial monitor the sensor outputs all data correctly.

Have I done anything wrong modifying the code?

// ESP8266 Pins
//  4(SDA) --- AMG8833 SDA
//  5(SCL) --- AMG8833 SCL
//  13     --- LED (Anode) via 100ohm

#include <pgmspace.h>
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <WebSocketsServer.h>
#include <ESP8266mDNS.h>
#include <ArduinoOTA.h>
#include <Wire.h>
#include <Adafruit_AMG88xx.h>

Adafruit_AMG88xx amg;

const char* ssid = "Jacksson";
const char* password = "mandelvatten";

const int pin_led = 13;

ESP8266WebServer server(80);
WebSocketsServer webSocket(81);

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
  switch (type) {
    case WStype_DISCONNECTED:
      Serial.printf("[%u] Disconnected!\n", num);
      break;
    case WStype_CONNECTED:
      IPAddress ip = webSocket.remoteIP(num);
      Serial.printf("[%u] Connected from %d.%d.%d.%d url: %s\n", num, ip[0], ip[1], ip[2], ip[3], payload);
      break;
  }
}

void toggle() {
  static bool last_led = false;
  last_led = !last_led;
  digitalWrite(pin_led, last_led);
}

void handleRoot() {
 auto ip = WiFi.localIP();
 String ip_str = String(ip[0]) + "." + ip[1] + "." + ip[2] + "." + ip[3];
 server.send(200, "text/html", String(ws_html_1()) +  ip_str + ws_html_2());
 // server.send(200, "text/html", "<h1>You are connected</h1>");
}

void handleNotFound() {
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i<server.args(); i++){
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
}

void WiFiEvent(WiFiEvent_t event) {
    switch(event) {
      
      case WIFI_EVENT_STAMODE_DISCONNECTED:
        digitalWrite(pin_led, LOW);
        Serial.println("WiFi lost connection: reconnecting...");
        WiFi.begin();
        break;
      case WIFI_EVENT_STAMODE_CONNECTED:
        Serial.print("Connected to ");
        Serial.println(ssid);
        break;
      case WIFI_EVENT_STAMODE_GOT_IP:
        digitalWrite(pin_led, HIGH);
        Serial.print("IP address: ");
        Serial.println(WiFi.localIP());
        if (MDNS.begin("esp8266-amg8833")) {
          Serial.println("MDNS responder started");
        }
        enableOTA();
        break;
    }
}

void enableOTA() {
  // Port defaults to 8266
  // ArduinoOTA.setPort(8266);

  // Hostname defaults to esp8266-[ChipID]
  // ArduinoOTA.setHostname("myesp8266");

  // No authentication by default
  // ArduinoOTA.setPassword((const char *)"123");

  ArduinoOTA.onStart([]() {
    Serial.println("Start");
  });
  ArduinoOTA.onEnd([]() {
    Serial.println("\nEnd");
  });
  ArduinoOTA.onProgress([](unsigned int progress, unsigned int total) {
    Serial.printf("Progress: %u%%\r", (progress / (total / 100)));
  });
  ArduinoOTA.onError([](ota_error_t error) {
    Serial.printf("Error[%u]: ", error);
    if (error == OTA_AUTH_ERROR) Serial.println("Auth Failed");
    else if (error == OTA_BEGIN_ERROR) Serial.println("Begin Failed");
    else if (error == OTA_CONNECT_ERROR) Serial.println("Connect Failed");
    else if (error == OTA_RECEIVE_ERROR) Serial.println("Receive Failed");
    else if (error == OTA_END_ERROR) Serial.println("End Failed");
  });
  ArduinoOTA.begin();
}

void setup(void) {
 delay(1000);
  Serial.begin(115200);
  Serial.println();
  Serial.print("Configuring access point...");
  /* You can remove the password parameter if you want the AP to be open. */
  WiFi.softAP(ssid, password);

  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  server.on("/", handleRoot);
  server.begin();
  Serial.println("HTTP server started");

  server.on("/current", [](){
    String str;
    server.send(200, "text/plain", get_current_values_str(str));
  });

  server.onNotFound(handleNotFound);

  server.begin();

  webSocket.begin();
  webSocket.onEvent(webSocketEvent);

  Serial.println("HTTP server started");

  amg.begin(0x69);
  delay(100); // let sensor boot up
}

void loop(void) {
  ArduinoOTA.handle();
  server.handleClient();
  webSocket.loop();

 

  static unsigned long last_read_ms = millis();
  unsigned long now = millis();
  if (now - last_read_ms > 100) {
    last_read_ms += 100;
    String str;
    get_current_values_str(str);
    Serial.println(str);
    webSocket.broadcastTXT(str);
  }
}

String& get_current_values_str(String& ret)
{
  float pixels[AMG88xx_PIXEL_ARRAY_SIZE];
  amg.readPixels(pixels);
  ret = "[";
  for(int i = 0; i < AMG88xx_PIXEL_ARRAY_SIZE; i++) {
    if( i % 8 == 0 ) ret += "\r\n";
    ret += pixels[i];
    if (i != AMG88xx_PIXEL_ARRAY_SIZE - 1) ret += ", ";
  }
  ret += "\r\n]\r\n";
  return ret;
}

const __FlashStringHelper* ws_html_1() {
  return F("<!DOCTYPE html>\n"
    "<html>\n"
    "<head>\n"
    "<title>thermo</title>\n"
    "<style>\n"
    "body {\n"
    "    background-color: #667;\n"
    "}\n"
    "table#tbl td {\n"
    "    width: 64px;\n"
    "    height: 64px;\n"
    "    border: solid 1px grey;\n"
    "    text-align: center;\n"
    "}\n"
    "</style>\n"
    "</head>\n"
    "<body>\n"
    "<h1>Exjobbsgrejs</h1>"
    "<table border id=\"tbl\"></table>\n"
    "<script>\n"
    "function bgcolor(t) {\n"
    "    if (t < 0) t = 0;\n"
    "    if (t > 30) t = 30;\n"
    "    return \"hsl(\" + (360 - t * 12) + \", 100%, 80%)\";\n"
    "}\n"
    "\n"
    "var t = document.getElementById('tbl');\n"
    "var tds = [];\n"
    "for (var i = 0; i < 8; i++) {\n"
    "    var tr = document.createElement('tr');\n"
    "    for (var j = 0; j < 8; j++) {\n"
    "        var td = tds[i*8 + 7 - j] = document.createElement('td');\n"
    "        tr.appendChild(td);\n"
    "    }\n"
    "    t.appendChild(tr);\n"
    "}\n"
    "var connection = new WebSocket('ws://");
}

const __FlashStringHelper* ws_html_2() {
  return F(":81/');\n"
    "connection.onmessage = function(e) {\n"
    "    const data = JSON.parse(e.data);\n"
    "    for (var i = 0; i < 64; i++) {\n"
    "        tds[i].innerHTML = data[i].toFixed(2);\n"
    "        tds[i].style.backgroundColor = bgcolor(data[i]);\n"
    "    }\n"
    "};\n"
    "</script>\n"
    "</body>\n"
    "</html>\n");
}