Application web temps réél avec
Symfony2
A propos de moi
* Ali Hichem
* web engineering ~ 6 years
* live in Tunis
Sommaire
* Introduction sur le temps reél
* fonctionnement du web
* temps réél dans le web
* intégration du web temps réél...
Qu'est ce que
le “temps réel” ?
Temps réél

=

* Immédiat
* Sans attente
* Instantané
Exemples
Media

Emission en directe, fiction temp reel

Recherche

Reseaux sociaux, Tweets, Articles ..

Jeux

Jeux multi ...
Qu'est ce que
le Web “temps réel” ?
Attendez un instant
comment fonctione le
Web ?
Requête

Client

Server
Réponse
Client/Serveur
Internet
1

requête
Google.com

Client
PC
Smartphone
Tele
...

Amazon.com
réponse

2

Symfony.com
Facebook....
Client/Serveur
1- GET sur http://www.symfony.com
Réponse HTML
http://www.symfony.com - 2
3- GET sur http://www.symfony.com...
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/...
Qu'est ce que
le Web “temps réel” ?

“..l'utilisateur reçoit des informations au moment où
elles sont publiées sans l'inte...
Utilité du web temps réel
●

Interactivité

●

Rapidité

●

Frontend plus persistant

●

live data

●

Collaboration plus ...
Utilisation du web temps réel
●

Chat

●

Interface d'administration

●

Instant charts

●

Notification

●

Statistics

....
Comment faire du Web temps réel ?
Techniques web temps réel
●

Periodic Ajax

●

Long polling

●

Websockets

...
WebSockets

“..crée un canal de communication bidirectionnel et
persistant entre un client et un serveur...”
Websocket sur TCP/IP
Serveur

Client
HTTP

Application
HTTP
Transport
WebSocket
Internet
Réseaux
Compatibilé des Websocket

10.0+
12/2011

6.0+
04/2011

4.0+
02/2010

12.0+
12/2010

5.0+
02/2010
Comment inclure les websocket dans
une application web Symfony ?
Symfony2
+

?
Symfony2
+
NodeJs
+
Socket.io
+
Redis
Symfony2
+
NodeJs
+
Socket.io
+
Redis

PHP
SSJS
WebSocket
s
In-memory
storage
Client

Symfony2
+
NodeJs
+
Socket.io
+
Redis

Serveur
Synchrone

Asynchrone

Symfony2

NodeJs

Serveur HTTP

Socket.io

PHP

Javascript
Redis
Fonctionnement
Application

Symfony
Model
Controlleur

Internet
Trans+
port
reseaux

Vue
Fonctionnement
Application

Symfony

NodeJs
Model

Controlleur

Internet
Trans+
port
reseaux

Vue

Client Socket.io

I/O

...
Fonctionnement
Application

Symfony

NodeJs
Model

Controlleur
Publish

Client Redis

Subscribe

Client Redis

Redis

Inte...
Exemple : serveur node

var io = require('socket.io').listen(8001);
var redis = require('redis').createClient();
redis.psu...
Exemple : client socket.io

var socket = io.connect('http://localhost:8001/');
socket.on('socketio_news', function (data) ...
Exemple : interaction depuis SF2

$redis = $this->get('snc_redis.default');
$redis->publish('socketio_news', json_encode([...
Securité

●

●

Sauvegarde de la session PHP dans redis et vérification dans
le serveur NodeJs
Socket.io supporte le SSL

...
Démonstration
https://github.com/AliHichem/SymfonyTn-Demo
Question ?
Merci
Prochain SlideShare
Chargement dans…5
×

Symfonytn

2 175 vues

Publié le

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

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

Aucun téléchargement
Vues
Nombre de vues
2 175
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
58
Commentaires
0
J’aime
3
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

×