Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery

388 Pages·2013·2.18 MB·English

by  Jason Lengstorf

Realtime Web Apps
With HTML5 WebSocket, PHP, and jQuery
Jason Lengstorf
Phil Leggetter
Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery Copyright © 2013 by Jason
Lengstorf, Phil Leggetter This work is subject to copyright. All rights are reserved by the Publisher,
whether the whole or part of the material is concerned, specifically the rights of translation,
reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other
physical way, and transmission or information storage and retrieval, electronic adaptation, computer
software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from
this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material
supplied specifically for the purpose of being entered and executed on a computer system, for
exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is
permitted only under the provisions of the Copyright Law of the Publisher’s location, in its current
version, and permission for use must always be obtained from Springer. Permissions for use may be
obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution
under the respective Copyright Law.
ISBN-13 (pbk): 978-1-43024620-6
ISBN-13 (electronic): 978-1-4302-4621-3
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol
with every occurrence of a trademarked name, logo, or image we use the names, logos, and images
only in an editorial fashion and to the benefit of the trademark owner, with no intention of
infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they
are not identified as such, is not to be taken as an expression of opinion as to whether or not they are
subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of
publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for
any errors or omissions that may be made. The publisher makes no warranty, express or implied, with
respect to the material contained herein.
President and Publisher: Paul Manning Lead Editor: Ben Renow-Clarke
Technical Reviewer: Phil Leggetter Editorial Board: Steve Anglin, Mark Beckner, Ewan
Buckingham, Gary Cornell, Louise Corrigan, Morgan Ertel, Jonathan Gennick, Jonathan
Hassell, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff
Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft,
Gwenan Spearing, Matt Wade, Tom Welsh Coordinating Editor: Anamika Panchoo Copy
Editor: Nancy Sixsmith
Compositor: SPi Global
Indexer: SPi Global
Artist: SPi Global
Cover Designer: Anna Ishchenko
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring
Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail
[email protected]
, or visit
www.springeronline.com
. Apress Media, LLC is a California LLC and the sole
member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM
Finance Inc is a Delaware corporation.
[email protected]
For information on translations, please e-mail , or visit
www.apress.com
.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional
use. eBook versions and licenses are also available for most titles. For more information, reference
www.apress.com/bulk-
our Special Bulk Sales–eBook Licensing web page at
sales
.
Any source code or other supplementary materials referenced by the author in this text is available to
www.apress.com
readers at . For detailed information about how to locate your book’s
www.apress.com/source-code/
source code, go to .
For Tim the cat.
—Jason Lengstorf
Contents at a Glance
About the Authors
Acknowledgments
Introduction
Part I: Getting Familiar with the Required
Technologies
Chapter 1: What Is Realtime?
Chapter 2: The Tools
Chapter 3: Pusher
Part II: Planning the App
Chapter 4: Choosing Web Apps Over Native Apps
Chapter 5: Determining the App’s Functionality and
Structure
Part III: Building the Basics
Chapter 6: Designing the App
Chapter 7: Creating HTML and CSS Markup
Chapter 8: Building the Back End: Part 1
Chapter 9: Building the Back-End: Part 2
Chapter 10: Implementing Realtime Events and jQuery
Effects
Appendix A: OAuth
Index
Contents
About the Authors
Acknowledgments
Introduction
Part I: Getting Familiar with the Required
Technologies
Chapter 1: What Is Realtime?
The Evolution of Media
Web Sites, Not Web Apps
HTTP Hacks
But First: What Does “Realtime” Actually Mean?
AJAX
Polling
HTTP Long-Polling
HTTP Streaming
Additional Problems with HTTP-based Solutions in Web Browsers
The Solution: WebSockets
The WebSocket Protocol
Why Bother Learning about Realtime Web Technologies?
Using Realtime Web Technologies in Your Apps Now
Summary
Chapter 2: The Tools
What Are We Building?
What Does That Mean Development-Wise?
Choosing Our Tools
HTML5
CSS3
JavaScript and jQuery
PHP
MySQL
HTML5 WebSocket Technology and Pusher
OAuth
Summary
Chapter 3: Pusher
A Brief History of Pusher
Why Use Pusher?
Scalability
WebSocket, Fallback Support, and Auto-Reconnect
Other Client Libraries
REST API
Server Libraries
Developer Tools
Documentation
Pusher Terminology
Getting Started with Pusher
Using Pusher to Send Events
Debugging Your Pusher Application
Summary
Part II: Planning the App
Chapter 4: Choosing Web Apps Over Native Apps
Why Does It Matter?
Factors to Consider
Know Your User
Marketing
Sales
Distribution
Look, Feel, and Performance
Development
Choosing Based on Requirements
Choosing Web Apps Over Native Apps
The Final Decision: Let’s Build a Web App
Summary
Chapter 5: Determining the App’s Functionality and
Structure
What Does the App Do?
Give the App a Mission Statement
What Doesn’t the App Do?
What Roles Will Users Play?
Presenter
Attendees
Front-End Planning
What Technologies Are We Using?
Using HTML5
CSS3, Media Queries, and How That Affects the Design and HTML
Effects and Animations
Back-End Planning
Determining the Database Structure
Putting Everything Together in a Wireframe
Organizing the Home Page
Organizing the Q&A Page for Attendees
Organizing the Q&A Page for Presenters
Summary
Part III: Building the Basics
Chapter 6: Designing the App
Setting Goals for the Design
Defining the Color Palette
Choosing Fonts
Designing the Common Site Elements
Creating the Header
Creating the Footer
Form Elements
Designing the Home View
Create-a-Room Form
Join-a-Room Form
Designing the Room View(s)
Designing the Attendee View
Designing the Closed Room View
Designing the Presenter View
Smaller Screen Layouts (and Why You’re Not Designing Them
Here)
Summary
Chapter 7: Creating HTML and CSS Markup
Starting with the Basics: Setting Up an HTML5 Document
Getting Fonts Ready to Go
Common Elements
The Header Markup
The Footer Markup