Scribd
Upload
235 views

Introduction of Server-Sent Events

Server-sent events (SSE) allow a server to push automatic updates to a browser via HTTP connection. With SSE, the client makes a request and the server can push periodic responses like time updates or progress updates. The client uses JavaScript to listen for these server-sent messages and update the page dynamically without additional page reloads. SSE reduces network load compared to traditional polling and is standardized in HTML5.

Uploaded by

Oscar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
235 views

Introduction of Server-Sent Events

Server-sent events (SSE) allow a server to push automatic updates to a browser via HTTP connection. With SSE, the client makes a request and the server can push periodic responses like time updates or progress updates. The client uses JavaScript to listen for these server-sent messages and update the page dynamically without additional page reloads. SSE reduces network load compared to traditional polling and is standardized in HTML5.

Uploaded by

Oscar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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