How to use data response in server sent events

Question

Hi I asked a similar question a few days ago without any responses. I have tried to resolve this myself without success. I have succesfully used a server sent request that polls a database for a new entries and succesfully get the data returned in json format (confirmed in webconsole). What I cannot seem to do is then use the data in further functions in the eSource.onmessage function.

This is the jquery

<script type="text/javascript">

$(document).ready(function() {//READY FUNC   

    //check for browser support
    if(typeof(EventSource)!=="undefined") {
        //create an object, passing it the name and location of the server side script
        var eSource = new EventSource("http://newberylodge.co.uk/webapp/includes/messageRetrieve.php");
        //detect message receipt
        eSource.onmessage = function(event) {
            //write the received data to the page
            $.each(data, function(key, val) {
            //iterate each data
                var id = val.id;
                var messageId = val.messageId;
                var messageSubject = val.messageSubject;
                var messageContent = val.messageDetail;

                $('#serverData').append('<div id="' + id + '" class="messageAlert">' + messageSubject + '</div>');
                $('#serverData').append('<div id="' + messageId + '" class="messageContent">' + messageContent + '</div>');
                $('#' +messageId).append('<input id="' + messageId + '" type="button" class="deleteButton" value="Delete Message" />');

            });
            //EACH DATA
        }

        $(document).on('click', '#' +messageId, function(){
        //on click

            $.post("http://newberylodge.co.uk/webapp/includes/deleteMessage.php",{value1 : messageId}, function()   {
                location.reload(true);
                alert('Message Deleted');
            });
            //POST AJAX
        });
        //END ON CLICK
    };
    //TYPE OF EVENT SOURCE        

});
//DOCUMENT READY FUNC 
</script>

This is the PHP processing page messageReturn.php

<?php

include_once 'db_connect.php';
$return_arr = array();
$result = mysqli_query($mysqli, "SELECT * FROM message");

while($row = mysqli_fetch_array($result)) {         
    $row_array['id'] = $row['id'];
    $row_array['messageId'] = $row['messageId'];
    $row_array['messageSubject'] = $row['messageSubject'];
    $row_array['messageDetail'] = $row['messageDetail'];

    array_push($return_arr,$row_array);

}

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

echo json_encode($return_arr);
flush();

?>

This where I believe I'm going wrong but dont know how

        eSource.onmessage = function(event) {
            //write the received data to the page
            $.each(data, function(key, val) {
            //iterate each data
                var id = val.id;
                var messageId = val.messageId;
                var messageSubject = val.messageSubject;
                var messageContent = val.messageDetail;

                $('#serverData').append('<div id="' + id + '" class="messageAlert">' + messageSubject + '</div>');
                $('#serverData').append('<div id="' + messageId + '" class="messageContent">' + messageContent + '</div>');
                $('#' +messageId).append('<input id="' + messageId + '" type="button" class="deleteButton" value="Delete Message" />');

            });
            //EACH DATA
        }

What I am trying to do is get the json data from the response so I can use it in the other functions in the script. Can anyone assist please?

Answer 1

The message you're receiving is a JSON string, it can't be iterated over before it's parsed into a Javascript object.

Secondly, you don't seem to have any data, you're using data, but it's never defined anywhere, and what you want is event.data

if (typeof (EventSource) !== "undefined") {

    var eSource = new EventSource("http://newberylodge.co.uk/webapp/includes/messageRetrieve.php");

    eSource.onmessage = function (event) {

        var data = JSON.parse(event.data);

        $.each(data, function (key, val) {
            var id = val.id;
            var messageId = val.messageId;
            var messageSubject = val.messageSubject;
            var messageContent = val.messageDetail;

            $('#serverData').append('<div id="' + id + '" class="messageAlert">' + messageSubject + '</div>');
            $('#serverData').append('<div id="' + messageId + '" class="messageContent">' + messageContent + '</div>');
            $('#' + messageId).append('<input id="' + messageId + '" type="button" class="deleteButton" value="Delete Message" />');

        });
    }

    .... etc