Scribd Logo
Upload

Welcome to Scribd!

  • Introduction of Server-Sent Events

    Uploaded by

    Oscar
    109 views18 pages
    Server-sent Events

    Original Title

    Introduction of Server-sent Events

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Server-sent Events

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    109 views18 pages

    Introduction of Server-Sent Events

    Uploaded by

    Oscar
    Server-sent Events

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 18

    Introduction of Server-

    Sent Events (SSE)


    Yuji KONDO
    What’s Server-Sent Events?
    • Server-sent events (SSE) is a technology where a
    browser receives automatic updates from a server
    via HTTP connection. The Server-Sent Events
    EventSource API is standardized as part of
    HTML5[1] by the W3C.
    Communication Sequence of
    HTTP Request and Response
    Client Server
    Request
    Response

    Request

    Response

    Request

    Response
    Communication Sequence
    of HTTP Request and SSE
    Client Server
    Request
    Event

    Event

    Event

    Event

    Event
    Practice #1
    • Sample under Laravel 5.1

    • Let the server to notify time in every 5 seconds and


    the client displays it
    routes.php
    Route::get('test/monitor', ['as' => 'test.monitor', 'uses'
    => ‘TestController@monitor’]);

    Route::get('test/update', ['as' => 'test.update', 'uses'


    => ‘TestController@update']);
    TestController.php #1
    public function monitor()
    {
    return view('test.monitor');
    }
    test.monitor.blade.php #1
    <html lang="en">
    <head>
    <title>HTML5 Server-Sent Events</title>
    <script type="text/javascript">
    if (!!window.EventSource) {
    var source = new EventSource('/test/update');
    }
    else {
    // Result to xhr polling :(
    }

    source.addEventListener('message', function(event) {
    var date = event.data;
    document.getElementById("result").innerHTML += event.data + "<br>";
    }, false);
    test.monitor.blade.php #2
    source.addEventListener('open', function(event) {
    // Connection was opened.
    }, false);

    source.addEventListener('error', function(event) {
    if (event.readyState == EventSource.CLOSED) {
    // Connection was closed.
    }
    }, false);
    </script>
    </head>
    <body>
    <div id="result">
    <!--Server response will be inserted here-->
    </div>
    </body>
    </html>
    TestController.php #2
    public function update()
    {
    date_default_timezone_set("Asia/Manila");
    header("Content-Type: text/event-stream");
    header('X-Accel-Buffering: no');
    ob_start();

    while(true) {
    echo 'data: ' . date('Y-m-d H:i:s') . "\n\n";
    ob_flush();
    flush();
    sleep(5);
    }
    }
    Practice #2
    • Sample under Laravel 5.1

    • Let the server notify the progress and the client


    displays it on a progress bar
    routes.php
    Route::get('test/register', ['as' => 'test.register', 'uses'
    => ‘TestController@register']);

    Route::get('test/notify', ['as' => 'test.notify', 'uses' =>


    ‘TestController@notify']);
    TestController.php #1
    public function register()
    {
    return view(‘test.progress');
    }
    test.progress.blade.php #1
    <html lang="en">
    <head>
    <title>HTML5 Server-Sent Events</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="/jquery/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    if (!!window.EventSource) {
    var source = new EventSource('/test/notify');
    }
    else {
    // Result to xhr polling :(
    }

    source.addEventListener('message', function(event) {
    var data = event.data.split("/");
    var progress = parseInt(data[0], 10) / parseInt(data[1], 10) * 100;
    $("#progress-bar").css("width", progress + "%");

    if(data[0] == data[1]) {
    $("#progress-bar").removeClass('active');
    $("#progress-bar").removeClass('progress-bar-striped');
    source.close();
    }
    }, false);
    test.monitor.blade.php #2
    source.addEventListener('open', function(event) {
    // Connection was opened.
    }, false);

    source.addEventListener('error', function(event) {
    if (event.readyState == EventSource.CLOSED) {
    // Connection was closed.
    }
    }, false);
    </script>
    </head>
    <body class="col-lg-offset-2 col-lg-8">
    <div id="text">
    Test of SSE
    </div>
    <div class="progress">
    <div id=“progress-bar" class="progress-bar progress-bar-striped active” role=“progressbar”
    aria-valuenow=“0" aria-valuemin=“0" aria-valuemax=“100" style="min-width: 0%;"
    >
    <span id="progress-text" class="sr-only">45% Complete</span>
    </div>
    </div>
    </body>
    </html>
    TestController.php #2
    public function notify()
    {
    date_default_timezone_set("Asia/Manila");
    header("Content-Type: text/event-stream");
    header('X-Accel-Buffering: no');
    ob_start();

    $n = 10;
    for($i = 1; $i < $n+1; $i ++) {
    echo 'data: ' . $i . '/' . $n . "\n\n";
    ob_flush();
    flush();
    sleep(1);
    }
    }
    What’s the benefit of SSE?
    • Less Communication, Packets, and Network Load

    • Comparatively Simple to Use

    • Implemented Client API on Modern Browser’s


    JavaScript engine
    Let’s Enjoy SSE!

    You might also like