2. /**
* @author Paul Seiffert <paul.seiffert@mayflower.de>
*/
•Developer @ Mayflower
•Studied @ TU München
•Jabber/E-Mail:
paul.seiffert@mayflower.de
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 2
3. // Topic
Real-Time
Web
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 3
4. // User’s Expectations
Information displayed on websites is
up-to-date
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 4
5. // User’s Expectations
Information displayed on websites is
up-to-date
30 minutes later:
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 4
6. // User’s Expectations
Information displayed on websites is
up-to-date
30 minutes later:
Information is still up-to-date /
updated
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 4
7. // HTTP
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 5
8. // Next step: XHR-Polling
Web applications started to ask
the server for new information
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 6
9.
10. Probably not a good
idea.
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 8
11. Good idea:
WebSockets!
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 9
12.
13. // Browsers support WebSockets!
source: http://caniuse.com/
websockets
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 11
14. // Browsers support WebSockets!
source: http://caniuse.com/
websockets
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 11
15. // Architecture
PHP +
Symfony2
HTTP
JavaScript App DB / Redis
WebSocket
Node.js
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 12
16. // Approach: Reactive Programming
Changes to entity objects have to be
communicated to all browsers that are currently
connected!
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 13
17. // Approach: Reactive Programming
Changes to entity objects have to be
communicated to all browsers that are currently
connected!
This communication has to be done transparently.
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 13
18. // Approach: Reactive Programming
Changes to entity objects have to be
communicated to all browsers that are currently
connected!
This communication has to be done transparently.
Reactive Programming
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 13
19. // Demo
I Simon Waibl’s Bachelor Thesis
“Real-Time Model Synchronization with
Symfony2”
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 14
21. // “Real-Real-Time”
I Sportactics: Live-Tracking of Soccer Players
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 16
22. // Challenge
I Tracking and visualizing the position of
I 22 Soccer Players + 1 Ball
I with a sample rate of 20hz
I for 90 minutes
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I
23. // Challenge
I Tracking and visualizing the position of
I 22 Soccer Players + 1 Ball
I with a sample rate of 20hz
I for 90 minutes
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I
24. // Challenge
I Tracking and visualizing the position of
I 22 Soccer Players + 1 Ball
I with a sample rate of 20hz
I for 90 minutes
80Byte × 23 (Tags) × 20Hz ≈ 36 KB/s
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I
25. // Challenge
I Tracking and visualizing the position of
I 22 Soccer Players + 1 Ball
I with a sample rate of 20hz
I for 90 minutes
80Byte × 23 (Tags) × 20Hz ≈ 36 KB/s
36KB/s × 60s × 90 (min) ≈ 200 MB
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I
26. // Technology
I PHP-Backend: Symfony2, Doctrine
storage: MySQL
I Node-Backend: Node.js, Socket.io
I Frontend: Backbone.js, Raphaël, ...
State-of-the-art Realtime Web I Mayflower GmbH I November 22nd 2012 I 18