Created
May 27, 2023 01:28
-
-
Save jordymeow/4854992e7b4c510083c08ef8f5ca82c3 to your computer and use it in GitHub Desktop.
SSE (Server-Sent Events) with PHP and JS / Streaming with PHP
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// Various links | |
// https://serverfault.com/questions/488767/how-do-i-enable-php-s-flush-with-nginxphp-fpm | |
// https://stackoverflow.com/questions/72394213/nginx-configuration-for-server-sent-event | |
// https://serverfault.com/questions/801628/for-server-sent-events-sse-what-nginx-proxy-configuration-is-appropriate | |
// https://qiita.com/okumurakengo/items/cbe6b3717b95944083a1 (in Japanese) | |
// If '?SSE' is set, send Server-Sent events, otherwise we'll display the page. | |
if ( isset( $_GET['SSE'] ) ) { | |
// Set the headers for SSE. | |
header( 'Cache-Control: no-cache' ); | |
header( 'Content-Type: text/event-stream' ); | |
header( 'X-Accel-Buffering: no' ); // This is useful to disable buffering in nginx through headers. | |
// Push data to the browser every second. | |
ob_implicit_flush( true ); | |
ob_end_flush(); | |
for ( $i = 0; $i < 3; $i++ ) { | |
$data = "data: $i"; | |
echo $data . "\n\n"; | |
if ( ob_get_level() > 0 ) { | |
ob_flush(); | |
} | |
flush(); | |
error_log( $data ); | |
sleep( 1 ); | |
} | |
echo "data: Done!\n\n"; | |
} | |
else { | |
?> | |
<h1>Stream / SSE</h1> | |
<p> | |
I build this code in order to experiment with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">SSE</a> with PHP as it seems to be tricky to make it work. This idea is that the events below appear every one second, and not all at once. | |
</p> | |
<h2>Output:</h2> | |
<ul id="results"></ul> | |
<button onclick="window.location.reload();">Retry</button> | |
<script> | |
var url = window.location.href; | |
var source = new EventSource(url + "?SSE=true"); | |
source.onmessage = function(event) { | |
if (event.data == 'Done!') { | |
source.close(); | |
} | |
else { | |
document.getElementById("results").innerHTML += "<li>" + event.data + "</li>"; | |
console.log(event); | |
} | |
}; | |
source.onerror = function(event) { | |
console.error(event); | |
}; | |
</script> | |
<?php | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The team behind Local (Flywheel) also shared with me how to make it work with Nginx and Local:
proxy_set_header Connection '';
proxy_http_version 1.1;
Works perfectly! You can find the whole thread here: https://community.localwp.com/t/enable-server-side-events-sse-streaming-with-php-by-default/37172/6