Symfonytn

1 961 vues

Publié le

demo d'application web temps réél avec symfony2

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 961
Sur SlideShare
0
Issues des intégrations
0
Intégrations
11
Actions
Partages
0
Téléchargements
39
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Symfonytn

  1. 1. Application web temps réél avec Symfony2
  2. 2. A propos de moi * Ali Hichem * web engineering ~ 6 years * live in Tunis
  3. 3. Sommaire * Introduction sur le temps reél * fonctionnement du web * temps réél dans le web * intégration du web temps réél dans SF
  4. 4. Qu'est ce que le “temps réel” ?
  5. 5. Temps réél = * Immédiat * Sans attente * Instantané
  6. 6. Exemples Media Emission en directe, fiction temp reel Recherche Reseaux sociaux, Tweets, Articles .. Jeux Jeux multi joueurs en ligne
  7. 7. Qu'est ce que le Web “temps réel” ?
  8. 8. Attendez un instant comment fonctione le Web ?
  9. 9. Requête Client Server Réponse
  10. 10. Client/Serveur Internet 1 requête Google.com Client PC Smartphone Tele ... Amazon.com réponse 2 Symfony.com Facebook.com
  11. 11. Client/Serveur 1- GET sur http://www.symfony.com Réponse HTML http://www.symfony.com - 2 3- GET sur http://www.symfony.com/events Réponse HTML http://www.symfony.com/events - 4 Symfony.co m Client 5 - GET sur http://www.symfony.com/events Réponse HTML http://www.symfony.com/events - 6
  12. 12. Web temp réél 1- GET sur http://www.symfony.com Réponse HTML http://www.symfony.com - 2 3- GET sur http://www.symfony.com/events Client Réponse HTML http://www.symfony.com/events - 4 Ajout d'un nouvel evènement - * Réponse HTML http://www.symfony.com/events - 5 Ajout d'un nouvel evènement - * Réponse HTML http://www.symfony.com/events - 6 Ajout d'un nouvel evènement - * Réponse HTML http://www.symfony.com/events – 7 Symfony.co m
  13. 13. Qu'est ce que le Web “temps réel” ? “..l'utilisateur reçoit des informations au moment où elles sont publiées sans l'intervention du client...”
  14. 14. Utilité du web temps réel ● Interactivité ● Rapidité ● Frontend plus persistant ● live data ● Collaboration plus facile
  15. 15. Utilisation du web temps réel ● Chat ● Interface d'administration ● Instant charts ● Notification ● Statistics ... ● Games
  16. 16. Comment faire du Web temps réel ?
  17. 17. Techniques web temps réel ● Periodic Ajax ● Long polling ● Websockets ...
  18. 18. WebSockets “..crée un canal de communication bidirectionnel et persistant entre un client et un serveur...”
  19. 19. Websocket sur TCP/IP Serveur Client HTTP Application HTTP Transport WebSocket Internet Réseaux
  20. 20. Compatibilé des Websocket 10.0+ 12/2011 6.0+ 04/2011 4.0+ 02/2010 12.0+ 12/2010 5.0+ 02/2010
  21. 21. Comment inclure les websocket dans une application web Symfony ? Symfony2 + ?
  22. 22. Symfony2 + NodeJs + Socket.io + Redis
  23. 23. Symfony2 + NodeJs + Socket.io + Redis PHP SSJS WebSocket s In-memory storage
  24. 24. Client Symfony2 + NodeJs + Socket.io + Redis Serveur
  25. 25. Synchrone Asynchrone Symfony2 NodeJs Serveur HTTP Socket.io PHP Javascript Redis
  26. 26. Fonctionnement Application Symfony Model Controlleur Internet Trans+ port reseaux Vue
  27. 27. Fonctionnement Application Symfony NodeJs Model Controlleur Internet Trans+ port reseaux Vue Client Socket.io I/O Websockets I/O Serveur Socket.io
  28. 28. Fonctionnement Application Symfony NodeJs Model Controlleur Publish Client Redis Subscribe Client Redis Redis Internet Trans+ port reseaux Vue Client Socket.io I/O Websockets I/O Serveur Socket.io
  29. 29. Exemple : serveur node var io = require('socket.io').listen(8001); var redis = require('redis').createClient(); redis.psubscribe('socketio_*'); io.sockets.on('connection', function(socket) { redis.on('pmessage', function(pattern, channel, key) { socket.emit(channel, key); }); });
  30. 30. Exemple : client socket.io var socket = io.connect('http://localhost:8001/'); socket.on('socketio_news', function (data) { var news = $.parseJSON(data); //do your magic !! }); });
  31. 31. Exemple : interaction depuis SF2 $redis = $this->get('snc_redis.default'); $redis->publish('socketio_news', json_encode([ 'title' => $entity->getTitle(), 'description' => $entity->getDescription(), ]));
  32. 32. Securité ● ● Sauvegarde de la session PHP dans redis et vérification dans le serveur NodeJs Socket.io supporte le SSL var socket = io.connect('https://localhost', {secure: true});
  33. 33. Démonstration https://github.com/AliHichem/SymfonyTn-Demo
  34. 34. Question ?
  35. 35. Merci

×