WebSocket Essentials – Building Apps with HTML5 WebSockets Build your own real-time web applications using HTML5 WebSockets Varun Chopra BIRMINGHAM - MUMBAI WebSocket Essentials – Building Apps with HTML5 WebSockets Copyright © 2015 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: April 2015 Production reference: 1270415 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78439-675-6 www.packtpub.com Credits Author Project Coordinator Varun Chopra Shipra Chawhan Reviewers Proofreaders Adir Amsalem Safis Editing Sann-Remy Chea Paul Hindle Commissioning Editor Indexer Amarabha Banerjee Monica Mehta Acquisition Editor Production Coordinator Sonali Vernekar Aparna Bhagat Content Development Editor Cover Work Mamata Walkar Aparna Bhagat Technical Editor Siddhesh Patil Copy Editors Puja Lalwani Vikrant Phadke About the Author Varun Chopra has a lot of experience in the design and development of enterprise applications. He has worked as a consultant and has extensive experience in integrating different technologies. Besides his love of technology, he is also a singer and a guitarist and loves gadgets. About the Reviewers Adir Amsalem is a software engineer from Israel. Since the age of 16, he has loved developing websites and web apps, reading about technology, and solving technological challenges. He currently works for a major financial institution, where he leads web and frontend development of several products. Previously, he was a web developer and frontend developer at several Israeli companies and was also a freelancer. Sann-Remy Chea works as a software engineer at Ubisoft Owlient, a video game company specializing in web and mobile games, based in Paris, France. He has also worked at IBM as an application architect intern. Fond of web application development, he specializes in JavaScript and Node.js. www.PacktPub.com Support files, eBooks, discount offers, and more For support files and downloads related to your book, please visit www.PacktPub.com. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub. com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM https://www2.packtpub.com/books/subscription/packtlib Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books. Why subscribe? • Fully searchable across every book published by Packt • Copy and paste, print, and bookmark content • On demand and accessible via a web browser Free access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access. Table of Contents Preface v Chapter 1: Introducing the World of Web App 1 What is the Web? 1 Web applications 2 Where does WebSockets fit? 3 WebSockets over other methods 3 Modern browsers 4 HTML 4 HTML5 – the modern Web standard 5 Media – audio/video 5 Canvas 5 Form elements 6 Semantics 6 Mobile first 7 Offline storage 7 Geolocation 8 Drag and drop 8 Web workers 9 JavaScript 9 Modern servers 9 WebSockets 10 Summary 10 Chapter 2: Getting Started with WebSockets 11 Why WebSockets? 11 Importance of WebSockets 12 When to use? 13 [ i ] Table of Contents How it works? 13 WebSocket API 15 Ready states 16 Events 16 Echo Test 16 The WebSockets client app 17 Instantiation 20 Adding events 20 Sending messages 21 Receiving messages 21 Closing the connection 21 The WebSocket server 21 The Node.js server 22 Summary 25 Chapter 3: Configuring the Server and Transferring Real-time Data 27 Full-duplex real-time data transfer 28 Foundation of real-time applications 28 Collaborative presentation application 28 The presentation library 29 Setting up the library 29 Adding collaboration 30 Code implementation 31 The client code 31 The server code 34 Do it yourself 40 Input username 41 The list of users 41 User-based authorization to change the presentation 41 Making the user the presenter 42 Tips and tricks 42 Summary 43 Chapter 4: Using WebSockets in Real Scenario 45 The real scenario 45 The JavaScript framework 45 AngularJS 46 Learn by doing 46 The collaborative drawing application 46 Requirements 46 The drawing library 47 [ ii ] Table of Contents The client application 48 Integrating with the server 51 The client code 52 The server code 59 Do it yourself 61 User registration 61 The list of users 62 Share with specific users 62 Save drawings 62 The application structure 63 Restructure the application 63 Model 63 View 63 Controller 63 Service 64 Summary 64 Chapter 5: WebSockets for Mobile and Tablet 65 Mobile devices and the WebSocket 65 Pusher 66 Socket.IO 66 Running server on mobile 67 Local server on mobile 69 Mobile output 70 Browser support 71 Do it yourself 71 Scenario 1 71 Scenario 2 72 Scenario 3 74 Summary 74 Chapter 6: Enhancing HTML5 Web Application Development Using Modern Tools 75 Modern tools and techniques 75 Code editors 76 Boilerplates 77 Packaging tools 79 Build tools 80 Application frameworks 82 Modern servers 82 [ iii ]