CODEWITHSUNDEEP
javascriptphpmysqlajaxserver-sent-events
Youssef Moawad
Youssef Moawad

Reputation: 2866

Server-Sent Events with PHP

I have a web app which sends some data from a js script to a php server which inserts it into a mysql database. I also need to notify all other clients that the data has been sent and send it to them.

I'm trying to use Server-Sent Events to do this but I'm having some trouble grasping the concept. Here's my code:

$(document).ready(function() {
    var source = new EventSource("../Server/insertMessage.php");
    if(typeof(EventSource) == "undefined") {
        alert("event source doesnt work");
    } else { alert("event source works"); }

    source.onmessage = function(event) {
        alert(event.data);
        // do stuff with event.data
    };
});

Elsewhere in my js script, I send an AJAX request to insertMessage.php with POST parameters as the data details. Does this trigger the server-side event? Here's my server side code:

insertMessage.php

if(isset(// check POST to see if the right request was sent)) {
    // insert data into database
    // ...
    // ...

    // Send the new data to listeners
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');
    // Create data array
    $dataArray = array("data" => $data, "moreData" => $moreData);
    // Encode JSON
    $callback = json_encode($dataArray);
    // Send it
    echo "data: $callback";
    flush();
}

While the "event source works" alert is sent, I never get the event.data alert, even though I am making the AJAX call to insertMessage.php. I may not completely understand Server-Sent Events yet. What am I doing wrong?

Upvotes: 3

Views: 3043

Answers (4)

NVRM
NVRM

Reputation: 13077

Example code we might find everywhere are not working trough the PHP built-in server, does hang.

However, the following will run nicely.

It does stream the server date to the page, with a tempo of one second, in an infinite loop.

php -S localhost:8000

<?php

if (isset($_GET['sse'])) {
  header('Cache-Control: no-cache');
  header('Content-Type: text/event-stream'); // Oh wow

  while (true) {
    $data = "data:" . date(DATE_RFC2822);
    echo $data . "\n\n";
    if (ob_get_level() > 0) {
      ob_flush();
    }
    sleep(1);
  }
  exit;
}
?>

<h3>Server time:</h3>
<div id="stream"></div>

<script>
const sse = new EventSource("?sse");
sse.onmessage = e => stream.innerHTML = e.data
</script>

Upvotes: 0

CodeLoop
CodeLoop

Reputation: 37

Just add this line echo "\n\n";

Your code will look like this:

if(isset(// check POST to see if the right request was sent)) {
    // insert data into database
    // ...
    // ...

    // Send the new data to listeners
    header('Content-Type: text/event-stream');
    header('Cache-Control: no-cache');
    // Create data array
    $dataArray = array("data" => $data, "moreData" => $moreData);
    // Encode JSON
    $callback = json_encode($dataArray);
    // Send it
    echo "data: $callback";
    echo "\n\n";
    flush();
}

Upvotes: 0

regdvsgrevdafsy
regdvsgrevdafsy

Reputation: 41

You cannot use server sent events on this way:

Use this:

session_write_close(); // Close the session before your response! It helps your client create new requests to you server during the execution.

$echo= "id: $time" . PHP_EOL; // Important!
$echo.= "retry: ".$retry_time."" . PHP_EOL;  // Handle reconnect time (ms)
$echo.= "event: message" . PHP_EOL; // Event message type
$echo.= "data: {\n"; // JSON
$echo.= "data: \"data\": \"$data\" \n";  // JSON
$echo.= "data: }\n"; // JSON
$echo.= PHP_EOL; // Important!

Line breaks are really important in Eventsource!

You are able to use PHP for SSE but always keep in mind you should close the SESSION a soon as possible during the execution!

My stress test results: (Server config: [email protected],8Gb Ram,100/100Mbit) Ubuntu 14.04+Apache, Max connection: 1024

With 100 Connection Load = 0.14, with 1 SQL query/tick and 1sec refresh rate.

Below 500-600 active user you are able to use PHP for SSE without any problem, even with Apache.

Upvotes: 3

baynezy
baynezy

Reputation: 7046

The reason this isn't working is because when your JavaScript is creating the EventSource or is doing an HTTP GET. So your PHP code is not returning anything. You can't do POST requests with an EventSource.

Upvotes: 0

Related Questions