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(&#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(); 
?>

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(&#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);
  }
?>

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!