Detailed explanation of H5's sse server sending events EventSource-H5 Tutorial-php.cn

Detailed explanation of H5's sse server sending events EventSource

php中世界最好的语言

Release： 2018-03-27 10:47:54

Original

3275 people have browsed it

This time I will bring you a detailed explanation of the EventSource sent by the sse server in H5. What are the precautions for the EventSource sent by the sse server? The following is a practical case, let's take a look.

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..
}

Copy after login

Receive Server-Sent event notification

var source=new EventSource("haorooms_sse.php");
source.onmessage=function(event)
{
    document.getElementById("result").innerHTML+=event.data + "<br>";
};

Copy after login

Server-side code example

<?php 
header(&#39;Content-Type: text/event-stream&#39;); 
header(&#39;Cache-Control: no-cache&#39;); 
$time = date(&#39;r&#39;); 
echo "data: The server time is: {$time}\n\n"; 
flush(); 
?>

Copy after login

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 事件...";
}

Copy after login

to both link events and error events. We will find that, The console prints as follows:

keeps entering links and errors. For details, please click

That’s because

php code

is just Simple echo does not output continuously. If we improve the above php code as follows

<?php 
header(&#39;Content-Type: text/event-stream&#39;); 
header(&#39;Cache-Control: no-cache&#39;); 
$time = date(&#39;r&#39;); 
  $i = 0;
  $c = $i + 100;
  while (++$i < $c) {
    echo "id: " . $i . "\n";
    echo "data: " . $time. ";\n\n";
    ob_flush();
    flush();
    sleep(1);
  }
?>

Copy after login

, there will be no continuous errors!

IE browser compatibleSolutionWe know that IE browser does not support EventSource, there are the following solutions:

Introducing

eventsource.min.js

Copy after login

can be a perfect solution. You can check its github address:

https://

github.com/Yaffle/EventSource. It is also very convenient to use it in combination with nodejs. Just

npm install event-source-polyfill

Copy after login

I believe you have mastered the method after reading the case in this article. More How exciting, please pay attention to other related articles on php Chinese website!