Building Real-Time Web Applications
-
Upload
tony-abou-assaleh -
Category
Technology
-
view
999 -
download
2
description
Transcript of Building Real-Time Web Applications
![Page 1: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/1.jpg)
Building Real-‐Time Web Applica4ons
Tony Abou-‐Assaleh & Mark Dineen October 22, 2013
Volta Labs
![Page 2: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/2.jpg)
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
![Page 3: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/3.jpg)
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
![Page 4: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/4.jpg)
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
![Page 5: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/5.jpg)
What is Real-‐Time Web?
Copyright (c) 2013 TitanFile Inc. 5
![Page 6: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/6.jpg)
What is Real-‐Time Web? Copyright (c) 2013 TitanFile Inc. 6
![Page 7: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/7.jpg)
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
![Page 8: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/8.jpg)
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
![Page 9: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/9.jpg)
What is Real-‐Time Web?
• Dynamic user interface • Server-‐side push • Event-‐driven • Asynchronous
Copyright (c) 2013 TitanFile Inc. 9
![Page 10: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/10.jpg)
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
![Page 11: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/11.jpg)
The Stack
Copyright (c) 2013 TitanFile Inc. 11
![Page 12: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/12.jpg)
Copyright (c) 2013 TitanFile Inc. 12
![Page 13: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/13.jpg)
The Stack
• Asynchronous, dynamic client • HTML5 WebSockets
• Asynchronous backend server
Copyright (c) 2013 TitanFile Inc. 13
![Page 14: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/14.jpg)
The Stack @ TitanFile
Client Server
Dispatcher
TornadIO2
Copyright (c) 2013 TitanFile Inc. 14
![Page 15: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/15.jpg)
Client-‐Side Stack
Copyright (c) 2013 TitanFile Inc. 15
![Page 16: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/16.jpg)
Transport Op4ons -‐ Comet
• HTML5 WebSockets • Flash Socket • Long Polling – IFrame – Ajax – XMLHttpRequest – JSONP
Copyright (c) 2013 TitanFile Inc. 16
![Page 17: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/17.jpg)
Cross-‐origin resource sharing (CORS)
Copyright (c) 2013 TitanFile Inc. 17
![Page 18: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/18.jpg)
Polling vs. WebSockets
Copyright (c) 2013 TitanFile Inc. 18
![Page 19: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/19.jpg)
WebSocket Handshake
Copyright (c) 2013 TitanFile Inc. 19
![Page 20: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/20.jpg)
WebSocket Op4ons
• Plain HTML5 WebSockets • SockJS
• Socket.io
Copyright (c) 2013 TitanFile Inc. 20
![Page 21: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/21.jpg)
HTML5 WebSockets
• Open Connection • Send message • On message event • Close connection
Copyright (c) 2013 TitanFile Inc. 21
![Page 22: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/22.jpg)
SockJS
• WebSocket Emulator • Follows HTML5 WebSocket API • Cross-‐domain support • Polling as fallback
Copyright (c) 2013 TitanFile Inc. 22
![Page 23: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/23.jpg)
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
![Page 24: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/24.jpg)
Server-‐Side Stack
Copyright (c) 2013 TitanFile Inc. 24
![Page 25: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/25.jpg)
Real-‐Time Web Servers
• Most modern languages …
• Many modern frameworks … – NodeJS – Tornado
Copyright (c) 2013 TitanFile Inc. 25
![Page 26: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/26.jpg)
The Flow
Copyright (c) 2013 TitanFile Inc. 26
![Page 27: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/27.jpg)
Copyright (c) 2013 TitanFile Inc. 27
![Page 28: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/28.jpg)
Copyright (c) 2013 TitanFile Inc. 28
![Page 29: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/29.jpg)
More Detailed (Useful) Flow
Copyright (c) 2013 TitanFile Inc. 29
![Page 30: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/30.jpg)
Copyright (c) 2013 TitanFile Inc. 30
![Page 31: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/31.jpg)
Copyright (c) 2013 TitanFile Inc. 31
![Page 32: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/32.jpg)
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
![Page 33: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/33.jpg)
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
![Page 34: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/34.jpg)
Beyond the Basics
Real-‐World Challenges
Copyright (c) 2013 TitanFile Inc. 34
![Page 35: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/35.jpg)
Real World Challenges
• Authentication • Security • Binary Data (Files) • Blocking Code – Database, File I/O, Network
• Scalability
Copyright (c) 2013 TitanFile Inc. 35
![Page 36: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/36.jpg)
Authen4ca4on
Copyright (c) 2013 TitanFile Inc. 36
![Page 37: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/37.jpg)
Security
Copyright (c) 2013 TitanFile Inc. 37
![Page 38: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/38.jpg)
Binary Data
Copyright (c) 2013 TitanFile Inc. 38
![Page 39: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/39.jpg)
Blocking Code
Copyright (c) 2013 TitanFile Inc. 39
![Page 40: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/40.jpg)
Scalability
Copyright (c) 2013 TitanFile Inc. 40
![Page 41: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/41.jpg)
Live Tutorial
https://github.com/mdineen/chatserver
Copyright (c) 2013 TitanFile Inc. 41
![Page 42: Building Real-Time Web Applications](https://reader033.fdocuments.in/reader033/viewer/2022051514/54c307424a7959ce238b45f5/html5/thumbnails/42.jpg)
Tony Abou-‐Assaleh & Mark Dineen https://www.titanFile.com {taa,mark}@titanFile.com
Twitter: @tony_aa, @DineenMa