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

1. Application web temps réél avec
Symfony2

2. A propos de moi
* Ali Hichem
* web engineering ~ 6 years
* live in Tunis

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. Qu'est ce que
le “temps réel” ?

5. Temps réél
=
* Immédiat
* Sans attente
* Instantané

6. Exemples
Media
Emission en directe, fiction temp reel
Recherche
Reseaux sociaux, Tweets, Articles ..
Jeux
Jeux multi joueurs en ligne

7. Qu'est ce que
le Web “temps réel” ?

8. Attendez un instant
comment fonctione le
Web ?

9. Requête
Client
Server
Réponse

10. Client/Serveur
Internet
1
requête
Google.com
Client
PC
Smartphone
Tele
...
Amazon.com
réponse
2
Symfony.com
Facebook.com

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. 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. 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. Utilité du web temps réel
●
Interactivité
●
Rapidité
●
Frontend plus persistant
●
live data
●
Collaboration plus facile

15. Utilisation du web temps réel
●
Chat
●
Interface d'administration
●
Instant charts
●
Notification
●
Statistics
...
●
Games

16. Comment faire du Web temps réel ?

17. Techniques web temps réel
●
Periodic Ajax
●
Long polling
●
Websockets
...

18. WebSockets
“..crée un canal de communication bidirectionnel et
persistant entre un client et un serveur...”

19. Websocket sur TCP/IP
Serveur
Client
HTTP
Application
HTTP
Transport
WebSocket
Internet
Réseaux

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. Comment inclure les websocket dans
une application web Symfony ?
Symfony2
+
?

22. Symfony2
+
NodeJs
+
Socket.io
+
Redis

23. Symfony2
+
NodeJs
+
Socket.io
+
Redis
PHP
SSJS
WebSocket
s
In-memory
storage

24. Client
Symfony2
+
NodeJs
+
Socket.io
+
Redis
Serveur

25. Synchrone
Asynchrone
Symfony2
NodeJs
Serveur HTTP
Socket.io
PHP
Javascript
Redis

26. Fonctionnement
Application
Symfony
Model
Controlleur
Internet
Trans+
port
reseaux
Vue

27. Fonctionnement
Application
Symfony
NodeJs
Model
Controlleur
Internet
Trans+
port
reseaux
Vue
Client Socket.io
I/O
Websockets
I/O
Serveur Socket.io

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. 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. 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. Exemple : interaction depuis SF2
$redis = $this->get('snc_redis.default');
$redis->publish('socketio_news', json_encode([
'title'
=> $entity->getTitle(),
'description' => $entity->getDescription(),
]));

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. Démonstration
https://github.com/AliHichem/SymfonyTn-Demo

34. Question ?

35. Merci