У меня есть сценарий, который запускает SSE-событие для извлечения json-кодированных данных из online.php. В googling я нашел способы отправить данные JSON с помощью sse, введя разрывы строк.
Я ищу, как отправить JSON через SSE, когда массив JSON создается с помощью функции json_encode () PHP.
Я написал следующие строки кода, но может ли кто-нибудь помочь мне, где добавить «данные: \ n \ n», необходимые для 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(); ?>
Вам нужно отправить его в формате EventStream, который в этом случае просто добавляет его с data:
echo 'data: ' . json_encode($data) . "\n\n";
Вы можете закодировать массив $data как сказал Райан:
echo 'data: ' . json_encode($data) . "\n\n";
Затем клиентская сторона, event.data будет рассматриваться как строка, которую вы можете легко проанализировать в json, используя jQuery.parseJSON() запроса jQuery.parseJSON() . поэтому ваш код на стороне клиента будет выглядеть примерно так:
// 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!"); }
Источник: http://api.jquery.com/jquery.parsejson/
Ваш скрипт будет показывать только один раз, поскольку для продолжения работы он должен иметь какой-то цикл (условно, или у вас будет миллионы экземпляров!).
Я прервал реализацию, которую я написал ранее сегодня, которая демонстрирует это, а также добавила некоторый дополнительный javascript / jquery, чтобы лучше управлять потоками. Ниже также будет рассмотрена однопоточная установка PHP, такая как Xampp (для локальной разработки). Примечания к Xampp: Поскольку PHP-скрипт находится в цикле и не прерывается немедленно, он остановит запуск нового скрипта php или agax. Если вы используете ajax, чтобы вызвать PHP-вызов stream_close () в beforesend и stream_open () в обратных вызовах успеха.
Нижеследующее непроверено, но оно в основном захвачено из рабочего кода, поэтому должно быть хорошо.
<? //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>