How to stop Server-Sent Events

Question

Hello I have a javascript code that listens to a PHP code via Server-Sent Events, it is working well the response is sent from the server trough a loop and when the loop ends the Server-Sent Events stops however a few seconds after the script is again listening. how can I end the Server-Sent Events when the loop from the server side ends too? Thanks.

JS :

var sse=new EventSource("data.php");
            sse.onmessage=function(event){
                document.getElementById("map").innerHTML+=event.data;              
            };

PHP:

<?php
header('Content-Type: text/event-stream'); //indicates that server is aware of server sent events
header('Cache-Control: no-cache');//disable caching of response

$coordinates = [  
   [  
      "20:11",
      33.5731235,
      -7.6433045
   ],
   [  
      "20:11",
      33.5731054,
      -7.6432876
   ],
   [  
      "20:11",
      33.5731644,
      -7.6433304
   ]
];

foreach($coordinates as $c){  
  echo "data: ".json_encode($c)."\n\n";
  ob_get_flush();
  flush();
  sleep(1);
}

See this: http://stackoverflow.com/questions/7636165/how-do-server-sent-events-actually-work/11998868#11998868 — Qantas 94 Heavy, Jun 04 '15 at 13:58
There is nothing about the solution I'm looking for in the link ! — oussama kamal, Jun 04 '15 at 14:06
Key line: *"Should it want to, it may terminate the connection and respond with a `204 No Content` next time the client tries to connect. This will cause the client to stop trying to reconnect."* Please try and read it next time. — Qantas 94 Heavy, Jun 04 '15 at 14:10
I tried to add Connection: keep-alive but same issue still reconnection after the loop ends, also the link points to a node JS code not PHP — oussama kamal, Jun 04 '15 at 14:12
Keep-Alive has nothing to do with HTTP status codes, what do you mean? — Qantas 94 Heavy, Jun 04 '15 at 14:12
I added "http_response_code(404);" at the end of the loop but with no success. — oussama kamal, Jun 04 '15 at 14:19

score 4 · Answer 1 · edited Oct 26 '18 at 04:11

You could use a boolean variable isOpenOnce = false in your javascript and then in your sse.onopen set isOpen to true the first time. In the beginning check the flag and close connection if true. This way no need of server side changes.

var isOpenOnce = false;
sse.onopen = function() {
 if(isOpenOnce) {
  sse.close();
 }else {
  console.log("Connection to server opened.");
  isOpenOnce = true;
 }
}

score 2 · Answer 2 · answered Jun 16 '17 at 15:18

Hi I've added extra to (hopefully fix this) You have to pass from the server a message to close the connection. Otherwise when the execution finishes the browser will start with a new connection

air code

JS :

var sse=new EventSource("data.php");
sse.onmessage=function(event){
    if ('END-OF-STREAM' == event.data) {
        sse.close(); // stop retry
    }
    document.getElementById("map").innerHTML+=event.data;
};

PHP:

<?php
header('Content-Type: text/event-stream'); //indicates that server is aware of server sent events
header('Cache-Control: no-cache');//disable caching of response

$coordinates = [
   [
      "20:11",
      33.5731235,
      -7.6433045
   ],
   [
      "20:11",
      33.5731054,
      -7.6432876
   ],
   [
      "20:11",
      33.5731644,
      -7.6433304
   ]
];

foreach($coordinates as $c){
    echo "data: ".json_encode($c)."\n\n";
    ob_get_flush();
    flush();
    sleep( rand ( 1 , 3 ) );
}
echo "data: END-OF-STREAM\n\n"; // Give browser a signal to stop re-opening connection
ob_get_flush();
flush();
sleep(1); // give browser enough time to close connection

No need to send "data: END-IF-STREAM." Just send an event instead, like "event: close" and listen to that with sse.addEventListener('close', fucntion(){ sse.close(); }); — Simon, Jul 07 '21 at 09:06

How to stop Server-Sent Events

2 Answers2

Linked