Server-Sent Events - 造成Server持續push的簡單流程

What is SSEs?

Server-sent events (SSE) is a technology for where a browser gets automatic updates from a server via HTTP connection. The Server-Sent Events EventSource API is standardized as part of HTML5[1] by the W3C.

SSEs vs WebSockets

• SSEs can only push data to the browser.
• Websockets can both send data to the browsr and receive data from the browser.
• SSEs is easier to implement.
• SSEs are send over traditional HTTP.That means they don't require a special protocol to get working.
• Websockets require full-duplex connections and new Web Socket serves to handle the protocol.

Who does not support it ?

IE & Andriod browser 4.3- doesn't support Server-sen DOM events
➽See more here

How to get working ?

JAVASCRIPT

$(function() {
    if (!window.EventSource) {
        //XHR
        return;
    }
   source.addEventListener('message', function(e) {
       console.log(e.data);
       $rs = $.parseJSON(e.data);
    }, false);

    source.addEventListener('open', function(e) {
      // Connection was opened.
    }, false);

    source.addEventListener('error', function(e) {
       if (e.readyState == EventSource.CLOSED) {
       // Connection was closed.
       }
    }, false);

});

PHP

header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); // recommended to prevent caching of event data. $arr = array( "el" => $sensorHTML, "num" => $total_num ); $arr = json_encode($arr); $id = time(); echo "id: $id" . PHP_EOL; echo "data: $arr" . PHP_EOL; echo "retry: 300000\n\n"; ob_flush(); flush(); } ➽see more