title: How to send data to multiple clients at once with ESP8266 on AP mode
body: <p>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?</p>
  <p>Here's the code.</p>
  <pre><code>#include &lt;ESP8266WiFi.h&gt;
  #include &lt;DNSServer.h&gt;
  #include &lt;ESP8266WebServer.h&gt;
  
  const byte DNS_PORT = 53;
  IPAddress apIP(172, 217, 28, 1);
  DNSServer dnsServer;
  ESP8266WebServer webServer(80);
  
  void handleRoot() {
    String html =&quot;&lt;!DOCTYPE html&gt; &lt;html style=\&quot;text-align: center; background-color: #000000; border-style: solid; border-width: 5px; border-color: #FFFFFF;\&quot;&gt; &lt;head&gt; &lt;title&gt;EDNCS&lt;/title&gt; &lt;meta name=\&quot;viewport\&quot; content=\&quot;width=device-width, minimumscale=1.0, maximum-scale=1.0, initial-scale=1\&quot; /&gt; &lt;/head&gt; &lt;body&gt; &lt;h1 style=\&quot;color: #ff6600;\&quot;&gt;Emergency Distributed Network Communication Service&lt;/h1&gt; &lt;p style=\&quot;text-align: right; color: #ffff00;\&quot;&gt;-Owned and maintained by Wolf Lusana.&lt;/p&gt; &lt;div style=\&quot;color: #339966\&quot;&gt; &lt;div&gt; &lt;strong&gt;&lt;span style=\&quot;color: #ff0000;\&quot;&gt;Name: &lt;/span&gt;&lt;input type=\&quot;text\&quot; id=\&quot;name\&quot;&gt; &lt;h2 span style=\&quot;color: #ff6600;\&quot;&gt;IMPORTANT BROADCASTS&lt;/h2&gt; &lt;div id=\&quot;chatRoomDiv\&quot; style=\&quot;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;\&quot;&gt; &lt;ul id=\&quot;chatRoomList\&quot; style=\&quot;list-style-type: none; text-align: left;font-size: 14px; padding-left: 3px;\&quot;&gt;&lt;/ul&gt; &lt;/div&gt; &lt;br&gt; &lt;strong&gt;&lt;span style=\&quot;color: #ff0000;\&quot;&gt;Message: &lt;/span&gt; &lt;input type=\&quot;text\&quot; id=\&quot;message\&quot;&gt; &lt;br&gt;&lt;br&gt; &lt;button type=\&quot;button\&quot; onclick=\&quot;sendData()\&quot;&gt;CHAT&lt;/button&gt; &lt;button type=\&quot;button\&quot; &gt;BROADCAST&lt;/button&gt; &lt;br&gt; &lt;script&gt; function sendData() { var inputDataCH = document.getElementById(\&quot;message\&quot;).value; var nameDataCH = document.getElementById(\&quot;name\&quot;).value; var showDataCH = nameDataCH+\&quot;: \&quot;+inputDataCH; if(nameDataCH==null||nameDataCH==\&quot; \&quot;||nameDataCH==\&quot;\&quot;||inputDataCH==null||inputDataCH==\&quot; \&quot;||inputDataCH==\&quot;\&quot;){ alert(\&quot;Please enter your name and message. Thank you.\&quot;);} else{ var xhttpCH = new XMLHttpRequest(); xhttpCH.open(\&quot;GET\&quot;, \&quot;catchData?data=!\&quot;+showDataCH, true); xhttpCH.send(); document.getElementById(\&quot;message\&quot;).value = ''} } setInterval(function() { getData(); }, 500); function getData() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 &amp;&amp; this.status == 200) { updateChatRoom(this.responseText); } }; xhttp.open(\&quot;GET\&quot;, \&quot;throwData\&quot;, true); xhttp.send(); } function updateChatRoom(needData){ var ulCH = document.getElementById(\&quot;chatRoomList\&quot;); var liCH = document.createElement(\&quot;li\&quot;); var objDivCH = document.getElementById(\&quot;chatRoomDiv\&quot;); objDivCH.scrollTop = objDivCH.scrollHeight; liCH.appendChild(document.createTextNode(needData)); ulCH.appendChild(liCH); } &lt;/script&gt; &lt;/html&gt;&quot;;
    webServer.send(200, &quot;text/html&quot;, html);
  }
  
  void handleData() {
   String dataChat = webServer.arg(&quot;data&quot;);  
   if(dataChat[0]=='!'){
    dataChat[0] = '%';
    Serial.println(dataChat);
    }
  }
  
  void handleThrow() {
    String throwData;
   if (Serial.available() &gt; 0) {
    throwData = Serial.readString();
    }
   webServer.send(200, &quot;text/plane&quot;, throwData); 
  }
  
  void setup() {
    Serial.begin(115200);
    WiFi.mode(WIFI_AP); 
    WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
    WiFi.softAP(&quot;Emergency Network Service&quot;);
    dnsServer.start(DNS_PORT, &quot;*&quot;, apIP);
    webServer.onNotFound([]() {
       handleRoot();
    });
    
    webServer.on(&quot;/&quot;,handleRoot);
    webServer.on(&quot;/catchData&quot;, handleData);
    webServer.on(&quot;/throwData&quot;, handleThrow);
    webServer.begin();
  }
  
  void loop() {
    dnsServer.processNextRequest();
    webServer.handleClient();
  }
  
  </code></pre>
  <p>And here is the HTML code</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html style=&quot;text-align: center; background-color: #000000; border-style: solid; border-width: 5px; border-color: #FFFFFF;&quot;&gt;
      &lt;head&gt;
          &lt;title&gt;EDNCS&lt;/title&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, minimumscale=1.0, maximum-scale=1.0, initial-scale=1&quot; /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1 style=&quot;color: #ff6600;&quot;&gt;Emergency Distributed Network Communication Service&lt;/h1&gt;
  &lt;p style=&quot;text-align: right; color: #ffff00;&quot;&gt;-Owned and maintained by Wolf Lusana.&lt;/p&gt;
  &lt;div style=&quot;color: #339966&quot;&gt;
  &lt;p&gt;Please enter your name before sending your message on the network.&lt;/p&gt;
  &lt;div&gt;
      &lt;strong&gt;&lt;span style=&quot;color: #ff0000;&quot;&gt;Name: &lt;/span&gt;&lt;input type=&quot;text&quot; id=&quot;name&quot;&gt;
  &lt;h2 span style=&quot;color: #ff6600;&quot;&gt;IMPORTANT BROADCASTS&lt;/h2&gt;
  &lt;div id=&quot;chatRoomDiv&quot; style=&quot;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;&quot;&gt;
      &lt;ul id=&quot;chatRoomList&quot; style=&quot;list-style-type: none; text-align: left;font-size: 14px; padding-left: 3px;&quot;&gt;&lt;/ul&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;strong&gt;&lt;span style=&quot;color: #ff0000;&quot;&gt;Message: &lt;/span&gt; &lt;input type=&quot;text&quot; id=&quot;message&quot;&gt; 
  &lt;br&gt;&lt;br&gt;
  &lt;button type=&quot;button&quot; onclick=&quot;sendData()&quot;&gt;CHAT&lt;/button&gt; &lt;button type=&quot;button&quot; &gt;BROADCAST&lt;/button&gt;
  &lt;br&gt;
  
  &lt;script&gt;
      function sendData() {
    var inputDataCH = document.getElementById(&quot;message&quot;).value;
    var nameDataCH = document.getElementById(&quot;name&quot;).value;
    var showDataCH = nameDataCH+&quot;: &quot;+inputDataCH;
    if(nameDataCH==null||nameDataCH==&quot; &quot;||nameDataCH==&quot;&quot;||inputDataCH==null||inputDataCH==&quot; &quot;||inputDataCH==&quot;&quot;){
      alert(&quot;Please enter your name and message. Thank you.&quot;);}
    else{
      var xhttpCH = new XMLHttpRequest();
    xhttpCH.open(&quot;GET&quot;, &quot;catchData?data=!&quot;+showDataCH, true);
    xhttpCH.send();
    document.getElementById(&quot;message&quot;).value = ''}
    }
  
  
    setInterval(function() {
    getData();
    }, 500);
   
    function getData() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 &amp;&amp; this.status == 200) {
          updateChatRoom(this.responseText);
        }
      };
      xhttp.open(&quot;GET&quot;, &quot;throwData&quot;, true);
      xhttp.send();
    }
  
    function updateChatRoom(needData){
    var ulCH = document.getElementById(&quot;chatRoomList&quot;);
    var liCH = document.createElement(&quot;li&quot;);
    var objDivCH = document.getElementById(&quot;chatRoomDiv&quot;);
    objDivCH.scrollTop = objDivCH.scrollHeight;
    liCH.appendChild(document.createTextNode(needData));
    ulCH.appendChild(liCH);
    }
  
  &lt;/script&gt;
  
  &lt;/html&gt;
  
  </code></pre>
  <p>Thanks.</p>