How to use h5 sse server to send EventSource events

This time I will show you how to use h5's sse server to send EventSource events, and what are the precautions for using h5's sse server to send EventSource events. 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 all the 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 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 examples

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

Link events and error events are added

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

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

Related reading:

How to implement HTML table mouse drag sorting

How to solve various ie6-ie10 problems Compatibility issues

#htmlHow to format json data

The above is the detailed content of How to use h5 sse server to send EventSource events. For more information, please follow other related articles on the PHP Chinese website!