title: How to update client's schedule using HTML5 Server Sent Events
body: <p>i'm building in php a reservation website with a schedule. I'm looking to have real time updates for my users in a efficient way. I found Ajax but I dont want the client to ask the server about updates but the server to send to the client the updated schedule when somebody edited the schedule.</p>
  
  <p>I found that maybe the HTML5 Server Sent Events is what I need. So I tried a simple test page that retreive update via SSE.</p>
  
  <p><strong>demo.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;h1&gt;SSE Output&lt;/h1&gt;
  &lt;div id="result"&gt;&lt;/div&gt; 
  &lt;h1&gt;Debug Console&lt;/h1&gt;
  &lt;div id="status"&gt;&lt;/div&gt;   
  &lt;script&gt;
  //SSE si compatible
  if(typeof(EventSource)!=="undefined")
  {
      var i = 1;
      var source=new EventSource("demo_sse.php?ver=2");
  
      //Lorsque le serveur envoie un message
      source.onmessage=function(event)
      {
          document.getElementById("result").innerHTML+=event.data + " #" + i + "&lt;br /&gt;";          
          i++;
      }   
  
      //EventListener
      source.addEventListener('message', function(e)
      {
          console.log(e.data);
          //document.getElementById("status").innerHTML+= "Message Recevied&lt;br /&gt;";
      }, false);
  
      source.addEventListener('open', function(e) 
      {
          // Connection was opened.
          document.getElementById("status").innerHTML+= "Connection #" + i + " opened&lt;br /&gt;";
      }, false);
  
      source.addEventListener('error', function(e)
      {
          if (e.readyState == EventSource.CLOSED)
          {
              // Connection was closed.
              document.getElementById("status").innerHTML+= "Connection closed&lt;br /&gt;";
          }
      }, false);
  
      //Validation de l'origine du serveur
      if (event.origin != 'https://mydomain.com') 
      {
          alert('Looks like the Origin of the EventSource (the schedule\'s live update service) wasn\'t coming from our secure server!');
          //return;
      }
  }
  else
  {
      document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
  }     
  
  &lt;/script&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>demo_see.php</strong></p>
  
  <pre><code> &lt;?php
  header('Content-Type: text/event-stream');
  header('Cache-Control: no-cache');
  
  
  $ver = 2;
  $time = date("H:i:s");
  if ($ver != $_GET["ver"])
  {
      echo "data: Page updated at: {$time}\n\n";
      flush();
  }
  ?&gt;
  </code></pre>
  
  <p>The problem is that each like 3 seconds there's a connection opened whatever if the version is matching or not so I think it's the client that ask the server and not the server asking the client. What I would like is to keep a open connection between the client and the server so the server can send changes when there's any update made on the schedule.</p>
  
  <p>Any tips would be appreciated!</p>
  
  <p>Thanks</p>