Jak łączyć mobile i desktop? Node.js w aplikacjach czasu rzeczywistego.

1. Node.js w aplikacjach czasu rzeczywistego
Jak łączyć mobile
i desktop?

3. Orange Boscy

4. Cel
Stworzenie gry umożliwiającej interakcję
z użytkownikiem w czasie rzeczywistym

5. Dom Boskich

6. Dom Boskich
automatyczne połączenia telefoniczne
sterowanie grami przez telefon
wirtualny spacer po domu Boskich
integracja z systemem wysyłki SMS

7. Dom Boskich

8. Symfony 2
FOSRestBundle - szybki sposób na pisanie REST API
NelmioApiBundle - dokumentowanie API
FOSUserBundle - uwierzytelnianie i autoryzacja użytkowników
DoctrineMongoDBBundle - Doctrine jako ODM dla MongoDB
Framework stanowiący podstawę aplikacji.

9. node.js
Wysoce skalowalne i elastyczne
środowisko programistyczne.
= +

10. MongoDB
łatwa komunikacja z Symfony 2 i node.js
elastyczna struktura danych
skalowalność

11. Jak to działa?
REST API
CALL APIKLIENT

12. Jak to działa?
REST API
CALL API KLIENT

13. Call API
informacje o zdarzeniach
synchronizacja pomiędzy aplikacją i telefonem
informacje o stanie połączenia
(odebrał, oczekuje, zakończył)

14. Obsługa po stronie klienta
nasłuchiwanie w JSie eventów z serwera
przekazywanie eventów z serwera do flasha
za pomocą metod publicznych
przekazywanie eventów z flasha do JSa
i następnie na serwer

15. Podstawowa komunikacji
inicjalizacja połączenia po stronie klienta
próba nawiązania połączenia
z użytkownikiem
reakcja aplikacji flashowej na różne stany
połączenia

18. Liczby
180 000 wizyt
prawie 4 minuty spędzone w grze
obsługa 1700 jednoczesnych połączeń

19. Podsumowanie
skalowalność aplikacji
krótki czas produkcji
modułowość

20. Orange
Sprzęt Pewny
Siebie

21. Idea
Przedstawić nową ofertę Orange
w sposób interaktywny, za pomocą
bohatera, który przechodzi z ekranu
komputera na urządzenie mobilne
i zaczyna tam „rządzić”.

22. Cel
pozwala na wyświetlenie zsynchronizowanych
filmów jednocześnie na komputerach
i urządzeniach mobilnych
daje możliwość interakcji z wyświetlanymi
filmami za pomocą urządzenia mobilnego

23. Jak to działa?

26. Sprzęt pewny siebie
parowanie komputera stacjonarnego
z urządzeniem mobilnym
wyświetlanie filmów na obu urządzeniach
jednocześnie zsynchronizowanych do
0,1 sekundy
interakcje na filmach

27. Zadania backendowe
serwer http
parowanie urządzeń desktop <-> mobile
komunikacja między urządzeniami

28. Protokół HTTP
request -> response
brak wiadomości typu push od serwera do
klienta

29. Komunikacja dwukierunkowa w HTTP
Kiedyś:
polling
longpolling
streaming http
Teraz:
websockety

30. Websockety
komunikacja dwukierunkowa
wiadomości w czasie rzeczywistym
niewielkie obciążenie sieci

31. Socket.io
wsparcie starszych przeglądarek
automatyczny wybór odpowiedniej metody
komunikacji

32. Dlaczego node.js?
asynchroniczność
idealne sprawdza się z websocketami
npm – node packaged module
unifikacja kodu backend - frontend

33. Komunikacja desktop <-> serwer
Desktop
Socket
Server
Socket
2. Response (Render view)
4. Create room
5. Room created (random numer)
1. HTTP Request
3. Socket
Init

34. Komunikacja mobile <-> serwer
Mobile
Socket
Server
Socket
2. Response (Render view)
3. Send Code
1. HTTP Request
5. Socket
Init
4a. Invalid Code
4b. Valid Code

35. Komunikacja mobile <-> serwer
Mobile
Socket
Server
Socket
7. Joined
6. Join Room
Desktop
7. Mobile
joined

36. Komunikacja mobile <-> desktop
Desktop Mobile
Web Socket Server
Movie Event
Movie
Event
Movie
Event
Movie Event

37. Zadania frontowe
strona desktopowa
odtwarzacz filmów na mobile oparty
o wyeksportowane klatki i oddzielną ścieżkę
dźwiękową
komunikacja i synchronizacja mobile-desktop

38. Technologie frontowe
canvas
socket.io

39. Wyzwania
synchronizacja ścieżki dźwiękowej
z renderowanymi klatkami
synchronizacja odtwarzanej ścieżki na mobile
z desktopem
Safari Mobile

40. Liczby
bouce rate na poziomie 26 %
średni czas na stronie to prawie 3 minuty
ponad 2 300 klików w aspekty ofertowe na
stronie

41. Podsumowanie

42. Zawartość niniejszej prezentacji, a w szczególności koncepcje i sposób prezentacji treści, stanowią własność intelektualną VML Poland, chronioną
prawem zgodnie z ustawą z dnia 4 lutego 1994 r. o ochronie praw autorskich i praw pokrewnych. Wykorzystanie całości lub części niniejszego
utworu w jakichkolwiek celach wymaga pisemnej zgody właściciela. Niniejsza oferta zachowuje ważność przez okres 3 miesięcy od daty otrzymania.
Rafał Śledź
Lead Web Developer
rafal.sledz@vml.com
Dziękujemy!
Piotr Grabski-Gradziński
Technology Director
piotr.gradzinski@vml.com
Dymitr Malczik
Frontend/Flash Developer
dymitr.malczik@vml.com
Michał Szyćko
Software Engineer
michal.szycko@vml.com