Introduction of server sent events (sse)

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
Request
Response
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);

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">

</div>
</body>
</html>

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') . "nn";
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']);

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

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>

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 . "nn";
ob_flush();
flush();
sleep(1);
}
}

What’s the beneﬁt of SSE?
• Less Communication, Packets, and Network Load
• Comparatively Simple to Use
• Implemented Client API on Modern Browser’s
JavaScript engine

Introduction of server sent events (sse)

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to Introduction of server sent events (sse)

Similar to Introduction of server sent events (sse) (20)

Recently uploaded

Recently uploaded (20)

Introduction of server sent events (sse)