Home >Web Front-end >HTML Tutorial >Introduction to EventSource sent by sse server in html5
This article mainly introduces a brief introduction to the EventSource of sse server-sent events in HTML5. It has a certain reference value. Those who are interested can learn more
Preface
I talked about the big data screen in the previous article, and the data in it is updated from time to time. There are also stock data that are updated from time to time, Facebook/Twitter updates, valuation updates, new blog posts, event results, etc., all require data to be updated from time to time. Before, we usually requested the server to see if there was any data that could be updated. HTML5 provides the Server-Sent Events method, which sends events through the server and updates can arrive automatically.
Usage of Server-Sent Events
Server-Sent Events is very simple to use. It accepts server-side messages through the EventSource object. There are the following events:
onopen When the connection to the server is opened
onmessage When a message is received
onerror When an error occurs
Detect Server-Sent event support
if(typeof(EventSource)!=="undefined") { // 浏览器支持 Server-Sent // 一些代码..... } else { // 浏览器不支持 Server-Sent.. }
Receive Server-Sent event notification
var source=new EventSource("haorooms_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>"; };
Server-side code example
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?>
Add
if(typeof(EventSource)!=="undefined") { var source=new EventSource("server.php"); source.onopen=function() { console.log("Connection to server opened."); }; source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>"; }; source.onerror=function() { console.log("EventSource failed."); }; } else { document.getElementById("result").innerHTML="抱歉,你的浏览器不支持 server-sent 事件..."; }
to both link events and error events. We will find that the console prints as follows:
Keep entering links and errors, please click for details
That’s because the php code is just a simple echo and does not output continuously. We will improve the above php code as follows
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); $i = 0; $c = $i + 100; while (++$i < $c) { echo "id: " . $i . "\n"; echo "data: " . $time. ";\n\n"; ob_flush(); flush(); sleep(1); } ?>
Then there will be no more errors!
IE browser compatible solution
We know that IE browser does not support EventSource, there are the following solutions:
Introduction
eventsource.min.js
can be solved perfectly. You can check its github address: https://github.com/Yaffle/EventSource. It is also very convenient to use it with nodejs. Just
npm install event-source-polyfill
.
The above is the detailed content of Introduction to EventSource sent by sse server in html5. For more information, please follow other related articles on the PHP Chinese website!