如何在服务器发送事件中使用数据响应

时间:2015-04-12 15:32:06

标签: php jquery html5 server-sent-events

你好我几天前问了一个类似的问题而没有任何回复。我试图自己解决这个问题而没有成功。 我成功地使用了服务器发送请求,该请求轮询数据库以获取新条目,并成功获取以json格式返回的数据(在webconsole中确认)。我似乎无法做的是在eSource.onmessage函数中的其他函数中使用数据。

这是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>

这是PHP处理页面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();

?>

我相信我错了,但不知道怎么回事

        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
        }

我要做的是从响应中获取json数据,以便我可以在脚本中的其他函数中使用它。 有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

您收到的消息是一个JSON字符串,在将其解析为Javascript对象之前无法进行迭代。

其次,您似乎没有任何数据,您使用的是data,但它从未在任何地方定义过,您想要的是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