Building Real-Time Web Applications
•
2 likes•4,346 views
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!
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (15)
Similar to Building Real-Time Web Applications
Similar to Building Real-Time Web Applications (20)
Recently uploaded
Recently uploaded (20)
Building Real-Time Web Applications
- 1. Building Real-‐Time Web Applica4ons Tony Abou-‐Assaleh & Mark Dineen October 22, 2013 Volta Labs
- 2. 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
- 3. 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
- 4. 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
- 5. What is Real-‐Time Web? Copyright (c) 2013 TitanFile Inc. 5
- 6. What is Real-‐Time Web? Copyright (c) 2013 TitanFile Inc. 6
- 7. 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
- 8. 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
- 9. What is Real-‐Time Web? • • • • Dynamic user interface Server-‐side push Event-‐driven Asynchronous Copyright (c) 2013 TitanFile Inc. 9
- 10. 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
- 11. The Stack Copyright (c) 2013 TitanFile Inc. 11
- 12. Copyright (c) 2013 TitanFile Inc. 12
- 13. The Stack • Asynchronous, dynamic client • HTML5 WebSockets • Asynchronous backend server Copyright (c) 2013 TitanFile Inc. 13
- 14. The Stack @ TitanFile Client Server Dispatcher TornadIO2 Copyright (c) 2013 TitanFile Inc. 14
- 15. Client-‐Side Stack Copyright (c) 2013 TitanFile Inc. 15
- 16. Transport Op4ons -‐ Comet • HTML5 WebSockets • Flash Socket • Long Polling – IFrame – Ajax – XMLHttpRequest – JSONP Copyright (c) 2013 TitanFile Inc. 16
- 17. Cross-‐origin resource sharing (CORS) Copyright (c) 2013 TitanFile Inc. 17
- 18. Polling vs. WebSockets Copyright (c) 2013 TitanFile Inc. 18
- 19. WebSocket Handshake Copyright (c) 2013 TitanFile Inc. 19
- 20. WebSocket Op4ons • Plain HTML5 WebSockets • SockJS • Socket.io Copyright (c) 2013 TitanFile Inc. 20
- 21. HTML5 WebSockets • • • • Open Connection Send message On message event Close connection Copyright (c) 2013 TitanFile Inc. 21
- 22. SockJS • • • • WebSocket Emulator Follows HTML5 WebSocket API Cross-‐domain support Polling as fallback Copyright (c) 2013 TitanFile Inc. 22
- 23. 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
- 24. Server-‐Side Stack Copyright (c) 2013 TitanFile Inc. 24
- 25. Real-‐Time Web Servers • Most modern languages … • Many modern frameworks … – NodeJS – Tornado Copyright (c) 2013 TitanFile Inc. 25
- 26. The Flow Copyright (c) 2013 TitanFile Inc. 26
- 27. Copyright (c) 2013 TitanFile Inc. 27
- 28. Copyright (c) 2013 TitanFile Inc. 28
- 29. More Detailed (Useful) Flow Copyright (c) 2013 TitanFile Inc. 29
- 30. Copyright (c) 2013 TitanFile Inc. 30
- 31. Copyright (c) 2013 TitanFile Inc. 31
- 32. 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
- 33. The Flow @ TitanFile Sender Client Server Recipient Client User Action Django Model Saved Django post_save Render changes Backbone Model Saved Django Handler Django signal handler Backbone handler ioSync Socket.io TornadIO2 Dispatcher TorandIO2 Broadcast ioBind Socket.io Copyright (c) 2013 TitanFile Inc. 33
- 34. Beyond the Basics Real-‐World Challenges Copyright (c) 2013 TitanFile Inc. 34
- 35. Real World Challenges • • • • Authentication Security Binary Data (Files) Blocking Code – Database, File I/O, Network • Scalability Copyright (c) 2013 TitanFile Inc. 35
- 36. Authen4ca4on Copyright (c) 2013 TitanFile Inc. 36
- 37. Security Copyright (c) 2013 TitanFile Inc. 37
- 38. Binary Data Copyright (c) 2013 TitanFile Inc. 38
- 39. Blocking Code Copyright (c) 2013 TitanFile Inc. 39
- 40. Scalability Copyright (c) 2013 TitanFile Inc. 40
- 41. Live Tutorial https://github.com/mdineen/chatserver Copyright (c) 2013 TitanFile Inc. 41
- 42. Tony Abou-‐Assaleh & Mark Dineen https://www.titanFile.com {taa,mark}@titanFile.com Twitter: @tony_aa, @DineenMa