How to send data to multiple clients at once with ESP8266 on AP mode

Question

So i have an ESP8266 (ESP-01) on AP mode and is working fairly good enough. I can receive data from the client and have used AJAX to handle the data. When connected to a single client, if i send data from the serial it shows up on the client webpage and is working as expected. But when i connect multiple clients, only the last connected client gets the data and the older ones remain static. Is there a way to send the data to multiple clients at once?

Here's the code.

#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>

const byte DNS_PORT = 53;
IPAddress apIP(172, 217, 28, 1);
DNSServer dnsServer;
ESP8266WebServer webServer(80);

void handleRoot() {
  String html ="<!DOCTYPE html> <html style=\"text-align: center; background-color: #000000; border-style: solid; border-width: 5px; border-color: #FFFFFF;\"> <head> <title>EDNCS</title> <meta name=\"viewport\" content=\"width=device-width, minimumscale=1.0, maximum-scale=1.0, initial-scale=1\" /> </head> <body> <h1 style=\"color: #ff6600;\">Emergency Distributed Network Communication Service</h1> <p style=\"text-align: right; color: #ffff00;\">-Owned and maintained by Wolf Lusana.</p> <div style=\"color: #339966\"> <div> <strong><span style=\"color: #ff0000;\">Name: </span><input type=\"text\" id=\"name\"> <h2 span style=\"color: #ff6600;\">IMPORTANT BROADCASTS</h2> <div id=\"chatRoomDiv\" style=\"border:2px solid #ccc; width:300px; height: 300px; overflow-y: scroll; overscroll-behavior-x:unset; color:#FFFFFF; margin: 0 auto; display: flex; flex-direction: column-reverse;\"> <ul id=\"chatRoomList\" style=\"list-style-type: none; text-align: left;font-size: 14px; padding-left: 3px;\"></ul> </div> <br> <strong><span style=\"color: #ff0000;\">Message: </span> <input type=\"text\" id=\"message\"> <br><br> <button type=\"button\" onclick=\"sendData()\">CHAT</button> <button type=\"button\" >BROADCAST</button> <br> <script> function sendData() { var inputDataCH = document.getElementById(\"message\").value; var nameDataCH = document.getElementById(\"name\").value; var showDataCH = nameDataCH+\": \"+inputDataCH; if(nameDataCH==null||nameDataCH==\" \"||nameDataCH==\"\"||inputDataCH==null||inputDataCH==\" \"||inputDataCH==\"\"){ alert(\"Please enter your name and message. Thank you.\");} else{ var xhttpCH = new XMLHttpRequest(); xhttpCH.open(\"GET\", \"catchData?data=!\"+showDataCH, true); xhttpCH.send(); document.getElementById(\"message\").value = ''} } setInterval(function() { getData(); }, 500); function getData() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { updateChatRoom(this.responseText); } }; xhttp.open(\"GET\", \"throwData\", true); xhttp.send(); } function updateChatRoom(needData){ var ulCH = document.getElementById(\"chatRoomList\"); var liCH = document.createElement(\"li\"); var objDivCH = document.getElementById(\"chatRoomDiv\"); objDivCH.scrollTop = objDivCH.scrollHeight; liCH.appendChild(document.createTextNode(needData)); ulCH.appendChild(liCH); } </script> </html>";
  webServer.send(200, "text/html", html);
}

void handleData() {
 String dataChat = webServer.arg("data");  
 if(dataChat[0]=='!'){
  dataChat[0] = '%';
  Serial.println(dataChat);
  }
}

void handleThrow() {
  String throwData;
 if (Serial.available() > 0) {
  throwData = Serial.readString();
  }
 webServer.send(200, "text/plane", throwData); 
}

void setup() {
  Serial.begin(115200);
  WiFi.mode(WIFI_AP); 
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP("Emergency Network Service");
  dnsServer.start(DNS_PORT, "*", apIP);
  webServer.onNotFound([]() {
     handleRoot();
  });
  
  webServer.on("/",handleRoot);
  webServer.on("/catchData", handleData);
  webServer.on("/throwData", handleThrow);
  webServer.begin();
}

void loop() {
  dnsServer.processNextRequest();
  webServer.handleClient();
}

And here is the HTML code

<!DOCTYPE html>
<html style="text-align: center; background-color: #000000; border-style: solid; border-width: 5px; border-color: #FFFFFF;">
    <head>
        <title>EDNCS</title>
        <meta name="viewport" content="width=device-width, minimumscale=1.0, maximum-scale=1.0, initial-scale=1" />
    </head>
    <body>
        <h1 style="color: #ff6600;">Emergency Distributed Network Communication Service</h1>
<p style="text-align: right; color: #ffff00;">-Owned and maintained by Wolf Lusana.</p>
<div style="color: #339966">
<p>Please enter your name before sending your message on the network.</p>
<div>
    <strong><span style="color: #ff0000;">Name: </span><input type="text" id="name">
<h2 span style="color: #ff6600;">IMPORTANT BROADCASTS</h2>
<div id="chatRoomDiv" style="border:2px solid #ccc; width:300px; height: 300px; overflow-y: scroll; overscroll-behavior-x:unset; color:#FFFFFF; margin: 0 auto; display: flex;
flex-direction: column-reverse;">
    <ul id="chatRoomList" style="list-style-type: none; text-align: left;font-size: 14px; padding-left: 3px;"></ul>
</div>
<br>
<strong><span style="color: #ff0000;">Message: </span> <input type="text" id="message"> 
<br><br>
<button type="button" onclick="sendData()">CHAT</button> <button type="button" >BROADCAST</button>
<br>

<script>
    function sendData() {
  var inputDataCH = document.getElementById("message").value;
  var nameDataCH = document.getElementById("name").value;
  var showDataCH = nameDataCH+": "+inputDataCH;
  if(nameDataCH==null||nameDataCH==" "||nameDataCH==""||inputDataCH==null||inputDataCH==" "||inputDataCH==""){
    alert("Please enter your name and message. Thank you.");}
  else{
    var xhttpCH = new XMLHttpRequest();
  xhttpCH.open("GET", "catchData?data=!"+showDataCH, true);
  xhttpCH.send();
  document.getElementById("message").value = ''}
  }


  setInterval(function() {
  getData();
  }, 500);
 
  function getData() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        updateChatRoom(this.responseText);
      }
    };
    xhttp.open("GET", "throwData", true);
    xhttp.send();
  }

  function updateChatRoom(needData){
  var ulCH = document.getElementById("chatRoomList");
  var liCH = document.createElement("li");
  var objDivCH = document.getElementById("chatRoomDiv");
  objDivCH.scrollTop = objDivCH.scrollHeight;
  liCH.appendChild(document.createTextNode(needData));
  ulCH.appendChild(liCH);
  }

</script>

</html>

Thanks.

esp8266 can't reliably do what you need - it does not have enough RAM - just push serial data to the **real** server and make websocket chat server at the server which has enough resources. — Maxim Sagaydachny, Aug 17 '20 at 03:39
because if the data are read from Serial, then there are no more data to be read by the next client — Juraj, Aug 17 '20 at 05:29
I think the best way to do that is to use MQTT to communicate or post your data in a database — CoderUni, Aug 17 '20 at 05:46
So i went ahead and used a websocket on the ESP and now it works flawlessly. Also as i don't intend saving the chat data i plan not to use a real server. Maybe someday in an update. Thanks a lot. — Rupava Baruah, Aug 18 '20 at 06:03

How to send data to multiple clients at once with ESP8266 on AP mode

0 Answers0