Serverside script
#!/usr/bin/perl -w
use strict;
use CGI;
my @tickets = ( [ "GOOG", 533.37 ], [ "MSFT", 47.59 ], [ "IBM",
+ 162.99 ], [ "AAPL", 114.12 ], [ "MSFT", 47.29 ], [ "GOOG"
+, 533.95 ], [ "IBM", 163.78 ], [ "GOOG", 533.55 ], [ "AAPL"
+, 113.67 ] );
my $ticketsLength = scalar ( @tickets );
my $lastId = 0;
my $q = new CGI ;
local $| = 1;
print "Content-Type: text/event-stream\n";
print "Cache-Control: no-cache\n";
print "Connection: keep-alive\n\n";
while (1) {
sendMessage($lastId, $tickets[$lastId][0], $tickets[$lastId][1]);
$lastId++;
die() if ($lastId >= $ticketsLength); # Check that lastId is not l
+arger than the size of array - if it is larger close connection.
sleep(1);
}
# Function to send data in format "ticket:price".
sub sendMessage {
my $id = shift();
my $ticket = shift();
my $price = shift();
print "id: $id\n";
print "data: $ticket:$price\n\n";
}
Browser request
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
+/>
<title>Server Sent Events Perl Example - Stock Tickets</title>
<script type="text/javascript">
window.onload = function setDataSource() {
if (!!window.EventSource) {
var source = new EventSource("stocks.htm");
source.addEventListener("message", function(e) {
updatePrice(e.data);
logMessage(e);
}, false);
source.addEventListener("open", function(e) {
logMessage("OPENED");
}, false);
source.addEventListener("error", function(e) {
logMessage("ERROR");
if (e.readyState == EventSource.CLOSED) {
logMessage("CLOSED");
}
}, false);
} else {
document.getElementById("notSupported").style.display = "b
+lock";
}
}
function updatePrice(data) {
var ar = data.split(":");
var ticket = ar[0];
var price = ar[1];
var el = document.getElementById("t_" + ticket);
var oldPrice = el.innerHTML;
el.innerHTML = price;
if (parseFloat(oldPrice) < parseFloat(price)) {
el.style.backgroundColor = "lightgreen";
} else {
el.style.backgroundColor = "tomato";
}
window.setTimeout(function clearBackground() {
el.style.backgroundColor = "white";
}, 500);
}
function logMessage(obj) {
var el = document.getElementById("log");
if (typeof obj === "string") {
el.innerHTML += obj + "<br>";
} else {
el.innerHTML += obj.lastEventId + " - " + obj.data + "<br>
+";
}
el.scrollTop += 20;
}
</script>
</head>
<body>
<h1>Server Sent Events Perl Example</h1>
<p class="hint">
This is simple Server Sent Events (SSE) example that updates stock
+ prices when market moves.
Data source is predefined array with prices and an update every se
+cond.
This script is adapted from http://demo.howopensource.com/sse/
</p>
<h2>Tickets</h2>
<div id="tickets">
<div class="ticket"><div class="name">IBM</div><div class="price"
+id="t_IBM">161.57</div></div>
<div class="ticket"><div class="name">AAPL</div><div class="price"
+ id="t_AAPL">114.45</div></div>
<div class="ticket"><div class="name">GOOG</div><div class="price"
+ id="t_GOOG">532.94</div></div>
<div class="ticket"><div class="name">MSFT</div><div class="price"
+ id="t_MSFT">47.12</div></div>
</div>
<h2>Simple Log Console</h2>
<p class="hint">
This is simple log console. It is useful for testing purposes and
+to understand better how SSE works.
Event id and data are logged for each event.
</p>
<div id="log">
</div>
</body>
</html>
It should update a ticker price every second but all events are updated at the end of the script (it works in general, but flush does not work this way). This is an adaption of a working php-version at http://demo.howopensource.com/sse/
Environment is a Linux V-Server 2.6.32-042stab092.3 with Apache2.
The php-Version does work as expected on the this environment.
