building real-time web applications
DESCRIPTION
This is a hands-on workshop that will teach you how to build a Web application that incorporate real-time communication between the client application running on the browser and the back-end server. We will start with an overview of technologies and tools available for building real-time Web apps, what’s involved, the basics, and the gotchas. Next, we will build, in real-time, a real-time chat application using the python (Tornado) + socket.io + Backbone stack. Why not Node.js, you might ask. Simple: it’s too easy, too popular, and and not super-stable or secure. But you’re welcome to use Node.js as the backend in your own apps!TRANSCRIPT
Building Real-‐Time Web Applica4ons
Tony Abou-‐Assaleh & Mark Dineen October 22, 2013
Volta Labs
Agenda
• What is real-‐time web • The stack • Client-‐side • Server-‐side • The Flow • Beyond the basics • Live Tutorial
Copyright (c) 2013 TitanFile Inc. 2
Who we are
• Tony Abou-‐Assaleh – PhD in Computer Science from Dal – Cofounder and CEO, TitanFile – Ex-‐Google, VP Tech / R&D Director @ GenieKnows
– Developed the initial real-‐time components of TitanFile
– Core member of Backbone Marionette Team
Copyright (c) 2013 TitanFile Inc. 3
Who we are
• Mark Dineen – CTO, TitanFile – Made RT in TitanFile fast and secure – Director of IT at Allianz – Compliance and security veteran – Contributor at OWASP.org
Copyright (c) 2013 TitanFile Inc. 4
What is Real-‐Time Web?
Copyright (c) 2013 TitanFile Inc. 5
What is Real-‐Time Web? Copyright (c) 2013 TitanFile Inc. 6
What is Real-‐Time Web?
• Saves to the database ≠ real-‐time Web • Periodic refresh ≠ real-‐time Web • Real-‐time computing ≠ real-‐time Web • Real-‐time streaming ≠ real-‐time Web
Copyright (c) 2013 TitanFile Inc. 7
What is Real-‐Time Web?
A set of technologies and practices that enable users to receive information as soon as it is
published by its authors, rather than requiring that they or their software check a source
periodically for updates.
Copyright (c) 2013 TitanFile Inc. 8
What is Real-‐Time Web?
• Dynamic user interface • Server-‐side push • Event-‐driven • Asynchronous
Copyright (c) 2013 TitanFile Inc. 9
Applica4on of RT Web
• Chat, communication • Collaboration • Co-‐editing, co-‐browsing, co-‐shopping • Dashboards and monitoring • Gaming • Social Web • Date Streaming
Copyright (c) 2013 TitanFile Inc. 10
The Stack
Copyright (c) 2013 TitanFile Inc. 11
Copyright (c) 2013 TitanFile Inc. 12
The Stack
• Asynchronous, dynamic client • HTML5 WebSockets
• Asynchronous backend server
Copyright (c) 2013 TitanFile Inc. 13
The Stack @ TitanFile
Client Server
Dispatcher
TornadIO2
Copyright (c) 2013 TitanFile Inc. 14
Client-‐Side Stack
Copyright (c) 2013 TitanFile Inc. 15
Transport Op4ons -‐ Comet
• HTML5 WebSockets • Flash Socket • Long Polling – IFrame – Ajax – XMLHttpRequest – JSONP
Copyright (c) 2013 TitanFile Inc. 16
Cross-‐origin resource sharing (CORS)
Copyright (c) 2013 TitanFile Inc. 17
Polling vs. WebSockets
Copyright (c) 2013 TitanFile Inc. 18
WebSocket Handshake
Copyright (c) 2013 TitanFile Inc. 19
WebSocket Op4ons
• Plain HTML5 WebSockets • SockJS
• Socket.io
Copyright (c) 2013 TitanFile Inc. 20
HTML5 WebSockets
• Open Connection • Send message • On message event • Close connection
Copyright (c) 2013 TitanFile Inc. 21
SockJS
• WebSocket Emulator • Follows HTML5 WebSocket API • Cross-‐domain support • Polling as fallback
Copyright (c) 2013 TitanFile Inc. 22
Socket.IO
• Real-‐time Web App Protocol • Event-‐based communication – Connection events – Named events
• Broadcast • Cross-‐browser and platform • Server-‐side (Node.JS) and client-‐side
Copyright (c) 2013 TitanFile Inc. 23
Server-‐Side Stack
Copyright (c) 2013 TitanFile Inc. 24
Real-‐Time Web Servers
• Most modern languages …
• Many modern frameworks … – NodeJS – Tornado
Copyright (c) 2013 TitanFile Inc. 25
The Flow
Copyright (c) 2013 TitanFile Inc. 26
Copyright (c) 2013 TitanFile Inc. 27
Copyright (c) 2013 TitanFile Inc. 28
More Detailed (Useful) Flow
Copyright (c) 2013 TitanFile Inc. 29
Copyright (c) 2013 TitanFile Inc. 30
Copyright (c) 2013 TitanFile Inc. 31
Pub Sub PaPern
• Decouples senders from receivers • Intermediate hub • Senders – publish messages to a channel • Receivers – subscribe to a channel
Copyright (c) 2013 TitanFile Inc. 32
The Flow @ TitanFile
Copyright (c) 2013 TitanFile Inc. 33
User Action
Backbone Model Saved
ioSync Socket.io
TornadIO2 Dispatcher
Django Handler
Django Model Saved
Django post_save
Django signal handler
TorandIO2 Broadcast
ioBind Socket.io
Backbone handler
Render changes
Sender Client Server Recipient Client
Beyond the Basics
Real-‐World Challenges
Copyright (c) 2013 TitanFile Inc. 34
Real World Challenges
• Authentication • Security • Binary Data (Files) • Blocking Code – Database, File I/O, Network
• Scalability
Copyright (c) 2013 TitanFile Inc. 35
Authen4ca4on
Copyright (c) 2013 TitanFile Inc. 36
Security
Copyright (c) 2013 TitanFile Inc. 37
Binary Data
Copyright (c) 2013 TitanFile Inc. 38
Blocking Code
Copyright (c) 2013 TitanFile Inc. 39
Scalability
Copyright (c) 2013 TitanFile Inc. 40
Live Tutorial
https://github.com/mdineen/chatserver
Copyright (c) 2013 TitanFile Inc. 41
Tony Abou-‐Assaleh & Mark Dineen https://www.titanFile.com {taa,mark}@titanFile.com
Twitter: @tony_aa, @DineenMa