Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

129 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Node.js w aplikacjach czasu rzeczywistego Jak łączyć mobile i desktop?
  2. 2. Orange Boscy
  3. 3. Cel Stworzenie gry umożliwiającej interakcję z użytkownikiem w czasie rzeczywistym
  4. 4. Dom Boskich
  5. 5. Dom Boskich automatyczne połączenia telefoniczne sterowanie grami przez telefon wirtualny spacer po domu Boskich integracja z systemem wysyłki SMS
  6. 6. Dom Boskich
  7. 7. 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.
  8. 8. node.js Wysoce skalowalne i elastyczne środowisko programistyczne. = +
  9. 9. MongoDB łatwa komunikacja z Symfony 2 i node.js elastyczna struktura danych skalowalność
  10. 10. Jak to działa? REST API CALL APIKLIENT
  11. 11. Jak to działa? REST API CALL API KLIENT
  12. 12. Call API informacje o zdarzeniach synchronizacja pomiędzy aplikacją i telefonem informacje o stanie połączenia 
 (odebrał, oczekuje, zakończył)
  13. 13. 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
  14. 14. 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
  15. 15. Liczby 180 000 wizyt prawie 4 minuty spędzone w grze obsługa 1700 jednoczesnych połączeń
  16. 16. Podsumowanie skalowalność aplikacji krótki czas produkcji modułowość
  17. 17. Orange Sprzęt Pewny Siebie
  18. 18. 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ć”.
  19. 19. 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
  20. 20. Jak to działa?
  21. 21. 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
  22. 22. Zadania backendowe serwer http parowanie urządzeń desktop <-> mobile komunikacja między urządzeniami
  23. 23. Protokół HTTP request -> response brak wiadomości typu push od serwera do klienta
  24. 24. Komunikacja dwukierunkowa w HTTP Kiedyś: polling longpolling streaming http Teraz: websockety
  25. 25. Websockety komunikacja dwukierunkowa wiadomości w czasie rzeczywistym niewielkie obciążenie sieci
  26. 26. Socket.io wsparcie starszych przeglądarek automatyczny wybór odpowiedniej metody komunikacji
  27. 27. Dlaczego node.js? asynchroniczność idealne sprawdza się z websocketami npm – node packaged module unifikacja kodu backend - frontend
  28. 28. 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
  29. 29. 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
  30. 30. Komunikacja mobile <-> serwer Mobile Socket Server Socket 7. Joined 6. Join Room Desktop 7. Mobile joined
  31. 31. Komunikacja mobile <-> desktop Desktop Mobile Web Socket Server Movie Event Movie Event Movie Event Movie Event
  32. 32. 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
  33. 33. Technologie frontowe canvas socket.io
  34. 34. Wyzwania synchronizacja ścieżki dźwiękowej z renderowanymi klatkami synchronizacja odtwarzanej ścieżki na mobile z desktopem Safari Mobile
  35. 35. Liczby bouce rate na poziomie 26 % średni czas na stronie to prawie 3 minuty ponad 2 300 klików w aspekty ofertowe na stronie
  36. 36. Podsumowanie
  37. 37. 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

×