Download as PDF, PPTX
Uploaded byTony Abou-Assaleh
Building Real-Time Web Applications
The document discusses real-time web applications, detailing the necessary technologies and practices that provide users with immediate access to information. It covers aspects such as client-server architecture, asynchronous communication methods, and the use of websockets, along with real-world challenges like security and scalability. A live tutorial and contact information for the authors are also provided.
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