How to send json_encode data using HTML5 SSE

Question

I have a script that fires an SSE event to retrieve json-encoded data from online.php. In googling, I found ways to send JSON data using sse by introducing line breaks.

I am looking for how to send JSON via SSE when a JSON array is created using the PHP function json_encode ().

I wrote the following lines of code, but can someone help me on where to add the "data: \ n \ n" needed for SSE?

<script> if(typeof(EventSource)!=="undefined") { var source=new EventSource("online.php"); source.onmessage=function(event) { var data=JSON.parse(event.data); $("#new_message").html("Inbox"+data['total']); }; } else { $("#new_message").html("HTML5 not supported"); } </script> 

online.php

 <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $data["total"]="hello"; echo json_encode($data); ob_flush(); flush(); ?> 

Answer 1

You need to send it in EventStream format, which in this case simply adds it using data:

 echo 'data: ' . json_encode($data) . "\n\n"; 

Answer 2

You can encode the $data array as Ryan said:

 echo 'data: ' . json_encode($data) . "\n\n"; 

Then, the client side of event.data will be considered as a string that you can easily jQuery.parseJSON() with json with the jQuery.parseJSON() query. so your client-side code will look something like this:

 // Check if the browser supports SSE if (typeof (EventSource) !== "undefined") { var source = new EventSource("script.php"); // Handle evetns source.onmessage = function(event) { // parse the data that has an object as a string var msg = $.parseJSON(event.data); // Do awesome code with the values inside msg }; } else { alert("Sorry, your browser doesn't support this awesome feature!"); } 

Source: http://api.jquery.com/jquery.parsejson/

Answer 3

Your script will only display one output, because it needs to have some kind of loop in order to continue working (conditionally, or you will have millions of instances!).

I split the implementation I wrote earlier today that demonstrates this, and also added some extra javascript / jquery to better manage the streams. A single-threaded installation of PHP, such as Xampp (for local development) will also be discussed below. Notes on Xampp: since the PHP script is in a loop and does not end immediately, it will stop the launch of a new php or agax script. If you also use ajax to call the php call stream_close () in beforesend and stream_open () in success callbacks.

The following is untested, but it is mostly captured from working code, so it should be fine.

 <? //stream.php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); stream(); function stream(){ $data = array(); //collect data from database or wherever to stream to browser //example data $data[0]["name"] = 'Bob'; $data[0]["total"] = rand(0,100); $data[0]["name"] = 'Jane'; $data[0]["total"] = rand(0,100); //maybe there is no new data so just send one new line //this is required to check if the connection is still alive if(!empty($data)){ echo "\n"; }else{ //Otherwise json encode the data for output echo 'data: '.json_encode($data)."\n\n"; } flush(); //Flush the result to the browser sleep(1); //Wait a second (or what ever you like) //If the browser is still connected if(!connection_aborted() && connection_status()==0){ stream(); //recurse the function } } ?> <script> var webstream = false; function stream_open(){ stream_close(); //Close the stream it (in case we got here weirdly) if(!!window.EventSource){ //Test compatibility webstream = new EventSource('./stream.php'); console.log("Stream Opened"); //Log event for testing webstream.addEventListener('message', function(e){ var data = JSON.parse(e.data); //Parse the json into an object process_stream(data); },false); //Cleanup after navigating away (optional) $(window).bind('beforeunload', function(){ webstream.onclose = function(){}; //delete onclose (optional) webstream.close(); //Close the stream }); } } function stream_close(){ if(typeof(webstream)=="object"){ webstream.close(); webstream = false; console.log("Stream Closed"); //Log event for testing } } function process_stream(data){ //do something with the new data from the stream, eg log in console console.log(data); } //Optional: //Toggle stream on blur/focus //Good if the user opens multiple windows or Xampp? $(window).on("blur focus", function(e) { //get the last blur/focus event type var prevType = $(this).data("prevType") || null; if (prevType != e.type){ console.log(e.type); //Log event for testing (focus/blur) switch (e.type){ case "blur": stream_close(); //Close stream on blur break; case "focus": stream_open(); //Open stream on focus break; } } //Store the last event type to data $(this).data("prevType", e.type); }); // Optional: // Using idletimer plugin to close the stream in times of inactivity // https://github.com/thorst/jquery-idletimer/blob/master/src/idle-timer.js $(document).on("idle.idleTimer", function (){ stream_close(); }); $(document).on("active.idleTimer", function (){ stream_open(); }); $(document).idleTimer({timeout:5000}); //5 second idle timer </script>