Data Push Apps with HTML5 SSE

Chapter 2. Super Simple Easy SSE

This chapter will introduce a simple frontend and backend that uses SSE to stream real-time data to a browser client from a server. I won’t get into some of the exotic features of SSE (those are saved for Chapters 5, 8, and 9). I also won’t try to make it work on older browsers that do not support SSE (see Chapters 6 and 7 for that). But, even so, it will work on recent versions of most of the major browsers.

Note

Any recent version of Firefox, Chrome, Safari, iOS Safari, or Opera will work. It won’t work on IE11 and earlier. It also won’t work on the native browser in Android 4.3 and earlier. To test this example on your Android phone or tablet, install either Chrome for Android or Firefox for Android. Alternatively, wait for Chapter 6 where we will implement long-poll as a fallback solution. For the latest list of which browsers support SSE natively, see http://caniuse.com/eventsource.

If you want to go ahead and try it out, put basic_sse.html and basic_sse.php in the same directory,^[9] a directory that is served by Apache (or whatever web server you use). It can be on localhost, or a remote server. If you’ve put it on localhost, in a directory called sse, then the URL you browse to will be http://localhost/sse/basic_sse.html. You should see a timestamp appearing once per second, and it will soon fill the screen.

Minimal Example: The Frontend

I will take this first example really slowly, in case you need an HTML5 or JavaScript refresher. First, let’s ...