comment on

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";
}
[download]

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>
[download]

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.

In reply to HTML5, SSE, flush output '$| = 1' not working as expected by ehaase

Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!

Titles consisting of a single word are discouraged, and in most cases are disallowed outright.

Read Where should I post X? if you're not absolutely sure you're posting in the right place.

Please read these before you post! —

Posts may use any of the Perl Monks Approved HTML tags:

a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr

You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)

	For:		Use:
	&		`&`
	<		`<`
	>		`>`
	[		`[`
	]		`]`

Link using PerlMonks shortcuts! What shortcuts can I use for linking?

See Writeup Formatting Tips and other pages linked from there for more info.