Data Push Apps with HTML5 SSE: Pragmatic solutions for real-world clients

221 Pages·2014·10.21 MB·English

by  Darren Cook

Data Push Apps with HTML5 SSE
Darren Cook
Data Push Apps with HTML5 SSE
by Darren Cook
Copyright © 2014 Darren Cook. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are
also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/
institutional sales department: 800-998-9938 or [email protected].
Editors: Simon St. Laurent and Allyson MacDonald Indexer: Lucie Haskins
Production Editor: Kristen Brown Cover Designer: Karen Montgomery
Copyeditor: Kim Cofer Interior Designer: David Futato
Proofreader: Charles Roumeliotis Illustrator: Rebecca Demarest
March 2014: First Edition
Revision History for the First Edition:
2014-03-17: First release
See http://oreilly.com/catalog/errata.csp?isbn=9781449371937 for release details.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly
Media, Inc. Data Push Apps with HTML5 SSE, the image of a short-beaked echidna, and related trade dress
are trademarks of O’Reilly Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark
claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and authors assume
no responsibility for errors or omissions, or for damages resulting from the use of the information contained
herein.
ISBN: 978-1-449-37193-7
[LSI]
Table of Contents
Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii
1. All About SSE...And Then Some. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
HTML5 2
Data Push 2
Other Names for Data Push 6
Potential Applications 6
Comparison with WebSockets 7
When Data Push Is the Wrong Choice 9
Decisions, Decisions… 11
Take Me to Your Code! 13
2. Super Simple Easy SSE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Minimal Example: The Frontend 15
Using JQuery? 19
Minimal Example: The Backend 20
The Backend in Node.js 22
Minimal Web Server in Node.js 22
Pushing SSE in Node.js 23
Now to Get It Working in a Browser! 25
Smart, Sassy Exit 27
3. A Delightfully Realistic Data Push Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Our Problem Domain 29
The Backend 30
The Frontend 35
Realistic, Repeatable, Random Data 36
Fine-Grained Timestamps 39
Taking Control of the Randomness 42
iii
Making Allowance for the Real Passage of Time 44
Taking Stock 46
4. Living in More Than the Present Moment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
More Structure in Our Data 47
Refactoring the PHP 48
Refactoring the JavaScript 49
Adding a History Store 51
Persistent Storage 55
Now We Are Historians… 58
5. No More Ivory Tower: Making Our Application Production-Quality. . . . . . . . . . . . . . . . . 59
Error Handling 59
Bad JSON 60
Adding Keep-Alive 60
Server Side 61
Client Side 62
SSE Retry 65
Adding Scheduled Shutdowns/Reconnects 68
Sending Last-Event-ID 71
ID for Multiple Feeds 75
Using Last-Event-ID 76
Passing the ID at Reconnection Time 78
Don’t Act Globally, Think Locally 81
Cache Prevention 82
Death Prevention 82
The Easy Way to Lose Weight 82
Looking Back 83
6. Fallbacks: Data Push for Everyone Else. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Browser Wars 85
What Is Polling? 86
How Does Long-Polling Work? 87
Show Me Some Code! 88
Optimizing Long-Poll 92
What If JavaScript Is Disabled? 93
Grafting Long-Poll onto Our FX Application 94
Connecting 94
Long-Poll and Keep-Alive 96
Long-Poll and Connection Errors 97
Server Side 99
Dealing with Data 101
iv | Table of Contents
Wire It Up! 102
IE8 and Earlier 102
IE7 and Earlier 103
The Long and Winding Poll 103
7. Fallbacks: There Has to Be a Better Way!. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Commonalities 106
XHR 108
iframe 110
Grafting XHR/Iframe onto Our FX Application 113
XHR on the Backend 113
XHR on the Frontend 114
Iframe on the Frontend 115
Wiring Up XHR 116
Wiring Up Iframe 117
Thanks for the Memories 119
Putting the FX Baby to Bed 120
8. More SSE: The Rest of the Standard. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Headers 123
Event 127
Multiline Data 131
Whitespace in Messages 132
Headers Again 133
So Is That Everything? 134
9. Authorization: Who’s That Knocking at My Door?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Cookies 136
Authorization (with Apache) 137
HTTP POST with SSE 139
Multiple Authentication Choices 141
SSL and CORS (Connecting to Other Servers) 143
Allow-Origin 145
Fine Access Control 146
HEAD and OPTIONS 148
Chrome and Safari and CORS 150
Constructors and Credentials 151
withCredentials 151
CORS and Fallbacks 153
CORS and IE9 and Earlier 154
IE8/IE9: Always Use Long-Poll 156
Handling IE9 and Earlier Dynamically 156
Table of Contents | v
Putting It All Together 160
The Future Holds More of the Same 166
A. The SSE Standard. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
B. Refactor: JavaScript Globals, Objects, and Closures. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
C. PHP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
vi | Table of Contents
Preface
The modern Web is a demanding place. You have to look good. You have to load fast.
And you have to have good, relevant, interesting, up-to-date content. This book is about
a technology to help with the second and third of those: making sure people using your
website or web application are getting content that is bang up-to-date. Minimal latency,
no compromises.
This is also a book that cares about practical, real-world applications. Sure, Chapter 2
is based around a toy example, as are the introductory examples in Chapters 6 and 7.
But the rest of the book is based around complete applications that don’t shy away from
the prickly echidnas that occupy the corner cases the real world will throw at us.
The Kind of Person You Need to Be
You need to be strong yet polite, passionate yet objective, and nice to children, the elderly,
and Internet cats alike. However, this book is less demanding than real life. I’m going
to assume you know your HTML (HyperText Markup Language) from your HTTP
(HyperText Transport Protocol), and that you also know the difference between HTML,
CSS (Cascading Style Sheets), and JavaScript. To understand the client-side code you
should at least be able to read and understand basic JavaScript. (When more complex
JavaScript is used, it will be explained in a sidebar or appendix.)
On the server side, the book has been kept as language-neutral as possible. Most code
is introduced with simple PHP code, because PHP is quite short and expressive for this
kind of application. As long as you know any C-like language you will have no trouble
following along, but if you get stuck, please see Appendix C, which introduces some
aspects of the PHP language. Chapter 2 also shows the example in Node.js. In later
chapters, if the code gets a bit PHP-specific, I also show you how to do it in some other
languages.
Finally, to follow along with the examples it is assumed you have a web server such as
Apache installed on your development machine. On many Linux systems it is already
vii
there, or very simple to install. For instance, on Ubuntu, sudo apt-get install lamp-
server will install Apache, PHP, and MySQL in one easy step. On Windows, XAMPP
is a similar all-in-one package that will give you everything you need. There is also a
Mac version.
Organization of This Book
The core elements of SSE are not that complex: Chapter 2 shows a fully working example
(both frontend and backend) in just a few pages. Before that, Chapter 1 will give some
background on HTML5, data push, potential applications, and alternative technologies.
From Chapter 3 through Chapter 7 we build a complete application, trying to be as
realistic as possible while also trying really hard not to bore you with irrelevant detail.
The domain of this application is financial data. Chapter 3 is the core application.
Chapter 4 refactors and expands on it. Chapter 5 deals with the awkward details that
turn up when we try to make a data push application, things like complex data, data
sources going quiet, and sockets dying on us. Chapter 6 introduces one way (long-
polling) to get our application working on desktop and mobile browsers that are not
yet supporting SSE, and then Chapter 7 shows two other ways that are superior but not
available on all browsers. Chapter 3 also spends some time developing realistic, repeat‐
able data that our sample application can push. Though not directly about SSE, it is a
very useful demonstration of designing for testability in data push applications.
Chapter 8 covers some elements of the SSE protocol that we chose not to use in the
realistic application that was built up in the other chapters. And, yes, the reasons why
they were not used is also given. That leads into Chapter 9, where all the security issues
(cookies, authorization, CORS) that were glossed over in earlier chapters are finally
covered.
Conventions Used in This Book
The following typographical conventions are used in this book:
Italic
Indicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width
Used for program listings, as well as within paragraphs to refer to program elements
such as variable or function names, databases, data types, environment variables,
statements, and keywords.
Constant width bold
Shows commands or other text that should be typed literally by the user.
viii | Preface