SlideShare une entreprise Scribd logo
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 dans SF
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 joueurs en ligne
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.com
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
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
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...”
Utilité du web temps réel
●

Interactivité

●

Rapidité

●

Frontend plus persistant

●

live data

●

Collaboration plus facile
Utilisation du web temps réel
●

Chat

●

Interface d'administration

●

Instant charts

●

Notification

●

Statistics

...

●

Games
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

Websockets

I/O

Serveur Socket.io
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
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);
});
});
Exemple : client socket.io

var socket = io.connect('http://localhost:8001/');
socket.on('socketio_news', function (data) {
var news = $.parseJSON(data);
//do your magic !!
});
});
Exemple : interaction depuis SF2

$redis = $this->get('snc_redis.default');
$redis->publish('socketio_news', json_encode([
'title'
=> $entity->getTitle(),
'description' => $entity->getDescription(),
]));
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});
Démonstration
https://github.com/AliHichem/SymfonyTn-Demo
Question ?
Merci

Contenu connexe

En vedette

La Console Symfony
La Console Symfony La Console Symfony
La Console Symfony
Imad ZAIRIG
 
Redis installation
Redis installationRedis installation
Redis installation
eric German
 
Drupal 8
Drupal 8Drupal 8
Drupal 8
qdelance
 
Conference drupal 8 au Forum PHP 2013 à Paris
Conference drupal 8 au Forum PHP 2013 à ParisConference drupal 8 au Forum PHP 2013 à Paris
Conference drupal 8 au Forum PHP 2013 à Paris
Chipway
 
Symfony live Paris 2014 - Symfony2 sur Azure
Symfony live Paris 2014 - Symfony2 sur AzureSymfony live Paris 2014 - Symfony2 sur Azure
Symfony live Paris 2014 - Symfony2 sur Azure
Stéphane ESCANDELL
 
symfony : Un Framework Open-Source pour les Professionnels
symfony : Un Framework Open-Source pour les Professionnelssymfony : Un Framework Open-Source pour les Professionnels
symfony : Un Framework Open-Source pour les Professionnels
Fabien Potencier
 
Drupal 8 + Symfony 2 = une équipe gagnante
Drupal 8 + Symfony 2 = une équipe gagnanteDrupal 8 + Symfony 2 = une équipe gagnante
Drupal 8 + Symfony 2 = une équipe gagnante
Vanessa David
 
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
Fabien Potencier
 
Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+ Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+
ekino
 
Exposer des services web SOAP et REST avec symfony 1.4 et Zend Framework
Exposer des services web SOAP et REST avec symfony 1.4 et Zend FrameworkExposer des services web SOAP et REST avec symfony 1.4 et Zend Framework
Exposer des services web SOAP et REST avec symfony 1.4 et Zend Framework
Hugo Hamon
 
Symfony2: 30 astuces et bonnes pratiques
Symfony2: 30 astuces et bonnes pratiquesSymfony2: 30 astuces et bonnes pratiques
Symfony2: 30 astuces et bonnes pratiques
Noel GUILBERT
 
Redis — The AK-47 of Post-relational Databases
Redis — The AK-47 of Post-relational DatabasesRedis — The AK-47 of Post-relational Databases
Redis — The AK-47 of Post-relational Databases
Karel Minarik
 
Design patterns avec Symfony
Design patterns avec SymfonyDesign patterns avec Symfony
Design patterns avec Symfony
Mohammed Rhamnia
 
Building notification system in NodeJS + Redis
Building notification system in NodeJS + RedisBuilding notification system in NodeJS + Redis
Building notification system in NodeJS + Redis
Le Duc
 
Real-time Web Application with Socket.IO, Node.js, and Redis
Real-time Web Application with Socket.IO, Node.js, and RedisReal-time Web Application with Socket.IO, Node.js, and Redis
Real-time Web Application with Socket.IO, Node.js, and Redis
York Tsai
 
BigData_TP5 : Neo4J
BigData_TP5 : Neo4JBigData_TP5 : Neo4J
BigData_TP5 : Neo4J
Lilia Sfaxi
 
BigData_TP2: Design Patterns dans Hadoop
BigData_TP2: Design Patterns dans HadoopBigData_TP2: Design Patterns dans Hadoop
BigData_TP2: Design Patterns dans Hadoop
Lilia Sfaxi
 
IMS IP multimedia subsystem presentation
IMS IP multimedia subsystem presentationIMS IP multimedia subsystem presentation
IMS IP multimedia subsystem presentation
Waldir R. Pires Jr
 
BigData_TP4 : Cassandra
BigData_TP4 : CassandraBigData_TP4 : Cassandra
BigData_TP4 : Cassandra
Lilia Sfaxi
 
gestion de projet
gestion de projetgestion de projet
gestion de projet
Wajdi kanzali
 

En vedette (20)

La Console Symfony
La Console Symfony La Console Symfony
La Console Symfony
 
Redis installation
Redis installationRedis installation
Redis installation
 
Drupal 8
Drupal 8Drupal 8
Drupal 8
 
Conference drupal 8 au Forum PHP 2013 à Paris
Conference drupal 8 au Forum PHP 2013 à ParisConference drupal 8 au Forum PHP 2013 à Paris
Conference drupal 8 au Forum PHP 2013 à Paris
 
Symfony live Paris 2014 - Symfony2 sur Azure
Symfony live Paris 2014 - Symfony2 sur AzureSymfony live Paris 2014 - Symfony2 sur Azure
Symfony live Paris 2014 - Symfony2 sur Azure
 
symfony : Un Framework Open-Source pour les Professionnels
symfony : Un Framework Open-Source pour les Professionnelssymfony : Un Framework Open-Source pour les Professionnels
symfony : Un Framework Open-Source pour les Professionnels
 
Drupal 8 + Symfony 2 = une équipe gagnante
Drupal 8 + Symfony 2 = une équipe gagnanteDrupal 8 + Symfony 2 = une équipe gagnante
Drupal 8 + Symfony 2 = une équipe gagnante
 
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
 
Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+ Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+
 
Exposer des services web SOAP et REST avec symfony 1.4 et Zend Framework
Exposer des services web SOAP et REST avec symfony 1.4 et Zend FrameworkExposer des services web SOAP et REST avec symfony 1.4 et Zend Framework
Exposer des services web SOAP et REST avec symfony 1.4 et Zend Framework
 
Symfony2: 30 astuces et bonnes pratiques
Symfony2: 30 astuces et bonnes pratiquesSymfony2: 30 astuces et bonnes pratiques
Symfony2: 30 astuces et bonnes pratiques
 
Redis — The AK-47 of Post-relational Databases
Redis — The AK-47 of Post-relational DatabasesRedis — The AK-47 of Post-relational Databases
Redis — The AK-47 of Post-relational Databases
 
Design patterns avec Symfony
Design patterns avec SymfonyDesign patterns avec Symfony
Design patterns avec Symfony
 
Building notification system in NodeJS + Redis
Building notification system in NodeJS + RedisBuilding notification system in NodeJS + Redis
Building notification system in NodeJS + Redis
 
Real-time Web Application with Socket.IO, Node.js, and Redis
Real-time Web Application with Socket.IO, Node.js, and RedisReal-time Web Application with Socket.IO, Node.js, and Redis
Real-time Web Application with Socket.IO, Node.js, and Redis
 
BigData_TP5 : Neo4J
BigData_TP5 : Neo4JBigData_TP5 : Neo4J
BigData_TP5 : Neo4J
 
BigData_TP2: Design Patterns dans Hadoop
BigData_TP2: Design Patterns dans HadoopBigData_TP2: Design Patterns dans Hadoop
BigData_TP2: Design Patterns dans Hadoop
 
IMS IP multimedia subsystem presentation
IMS IP multimedia subsystem presentationIMS IP multimedia subsystem presentation
IMS IP multimedia subsystem presentation
 
BigData_TP4 : Cassandra
BigData_TP4 : CassandraBigData_TP4 : Cassandra
BigData_TP4 : Cassandra
 
gestion de projet
gestion de projetgestion de projet
gestion de projet
 

Similaire à Symfonytn

Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYENWeb rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
malik3rdH
 
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
Microsoft Technet France
 
Programmation web asynchrone avec Tornado
Programmation web asynchrone avec TornadoProgrammation web asynchrone avec Tornado
Programmation web asynchrone avec Tornado
Ronan Amicel
 
Client riche et nouvelles technologies
Client riche et nouvelles technologiesClient riche et nouvelles technologies
Client riche et nouvelles technologies
Sébastien Letélié
 
Introduction to WebRTC on iOS
Introduction to WebRTC on iOSIntroduction to WebRTC on iOS
Introduction to WebRTC on iOS
CocoaHeads France
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
Java script Introduction
Java script IntroductionJava script Introduction
Java script Introduction
Mohamed MHAMDI
 
ReMix11 Paris: Windows Azure & développement mobile
ReMix11 Paris: Windows Azure & développement mobileReMix11 Paris: Windows Azure & développement mobile
ReMix11 Paris: Windows Azure & développement mobile
Thomas Conté
 
Conférence de Presse Back From Mix 07
Conférence de Presse Back From Mix 07Conférence de Presse Back From Mix 07
Conférence de Presse Back From Mix 07
Jean-François Ruiz
 
Introduction à DotNetNuke
Introduction à DotNetNukeIntroduction à DotNetNuke
Introduction à DotNetNuke
Microsoft
 
DotNetNuke aux TechDays 2012
DotNetNuke aux TechDays 2012DotNetNuke aux TechDays 2012
DotNetNuke aux TechDays 2012
Cyril P
 
Découvrez la technologie WebRTC, comment cela fonctionne?
Découvrez la technologie WebRTC, comment cela fonctionne? Découvrez la technologie WebRTC, comment cela fonctionne?
Découvrez la technologie WebRTC, comment cela fonctionne?
Sylvain Boily
 
WebRTC Paris Meetup @ Google France
WebRTC Paris Meetup @ Google FranceWebRTC Paris Meetup @ Google France
WebRTC Paris Meetup @ Google France
Arnaud BUDKIEWICZ
 
Wygday Session PléNièRe (2)
Wygday Session PléNièRe (2)Wygday Session PléNièRe (2)
Wygday Session PléNièRe (2)
Gregory Renard
 
Innover Avec Les Applications De Demain
Innover Avec Les Applications De DemainInnover Avec Les Applications De Demain
Innover Avec Les Applications De Demain
Gregory Renard
 
Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2pp
RYMAA
 
Keynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle èreKeynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle ère
Microsoft
 
Wygday2010 - silverlight 4 & wpf 4
Wygday2010 -  silverlight 4 & wpf 4Wygday2010 -  silverlight 4 & wpf 4
Wygday2010 - silverlight 4 & wpf 4
Wygwam
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
davrous
 

Similaire à Symfonytn (20)

Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYENWeb rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN
 
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
[AzureCamp 24 Juin 2014] Interactions en "temps réel" pour les applications W...
 
Programmation web asynchrone avec Tornado
Programmation web asynchrone avec TornadoProgrammation web asynchrone avec Tornado
Programmation web asynchrone avec Tornado
 
Client riche et nouvelles technologies
Client riche et nouvelles technologiesClient riche et nouvelles technologies
Client riche et nouvelles technologies
 
Introduction to WebRTC on iOS
Introduction to WebRTC on iOSIntroduction to WebRTC on iOS
Introduction to WebRTC on iOS
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Java script Introduction
Java script IntroductionJava script Introduction
Java script Introduction
 
ReMix11 Paris: Windows Azure & développement mobile
ReMix11 Paris: Windows Azure & développement mobileReMix11 Paris: Windows Azure & développement mobile
ReMix11 Paris: Windows Azure & développement mobile
 
Conférence de Presse Back From Mix 07
Conférence de Presse Back From Mix 07Conférence de Presse Back From Mix 07
Conférence de Presse Back From Mix 07
 
Introduction à DotNetNuke
Introduction à DotNetNukeIntroduction à DotNetNuke
Introduction à DotNetNuke
 
DotNetNuke aux TechDays 2012
DotNetNuke aux TechDays 2012DotNetNuke aux TechDays 2012
DotNetNuke aux TechDays 2012
 
Exakis Day
Exakis DayExakis Day
Exakis Day
 
Découvrez la technologie WebRTC, comment cela fonctionne?
Découvrez la technologie WebRTC, comment cela fonctionne? Découvrez la technologie WebRTC, comment cela fonctionne?
Découvrez la technologie WebRTC, comment cela fonctionne?
 
WebRTC Paris Meetup @ Google France
WebRTC Paris Meetup @ Google FranceWebRTC Paris Meetup @ Google France
WebRTC Paris Meetup @ Google France
 
Wygday Session PléNièRe (2)
Wygday Session PléNièRe (2)Wygday Session PléNièRe (2)
Wygday Session PléNièRe (2)
 
Innover Avec Les Applications De Demain
Innover Avec Les Applications De DemainInnover Avec Les Applications De Demain
Innover Avec Les Applications De Demain
 
Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2pp
 
Keynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle èreKeynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle ère
 
Wygday2010 - silverlight 4 & wpf 4
Wygday2010 -  silverlight 4 & wpf 4Wygday2010 -  silverlight 4 & wpf 4
Wygday2010 - silverlight 4 & wpf 4
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
 

Dernier

Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
InnovaSter-Trade Ltd.
 
INTELLIGENCE ARTIFICIELLE + INFORMATIQUE QUANTIQUE = LA PLUS GRANDE RÉVOLUTIO...
INTELLIGENCE ARTIFICIELLE + INFORMATIQUE QUANTIQUE = LA PLUS GRANDE RÉVOLUTIO...INTELLIGENCE ARTIFICIELLE + INFORMATIQUE QUANTIQUE = LA PLUS GRANDE RÉVOLUTIO...
INTELLIGENCE ARTIFICIELLE + INFORMATIQUE QUANTIQUE = LA PLUS GRANDE RÉVOLUTIO...
Faga1939
 
Rapport Projet ERP - Plateforme Odoo 16 (PFE Licence)
Rapport Projet ERP - Plateforme Odoo 16 (PFE Licence)Rapport Projet ERP - Plateforme Odoo 16 (PFE Licence)
Rapport Projet ERP - Plateforme Odoo 16 (PFE Licence)
Chadi Kammoun
 
M365 Community Days MTL 2024 - Découverte du Process Mining et du Task Mining...
M365 Community Days MTL 2024 - Découverte du Process Mining et du Task Mining...M365 Community Days MTL 2024 - Découverte du Process Mining et du Task Mining...
M365 Community Days MTL 2024 - Découverte du Process Mining et du Task Mining...
Nicolas Georgeault
 
La Gestion des risques selon ISO 27005.pdf
La Gestion des risques selon ISO 27005.pdfLa Gestion des risques selon ISO 27005.pdf
La Gestion des risques selon ISO 27005.pdf
SoniazghalKallel
 
Les Vidéoprojecteurs : Guide d'achat et Comparatif
Les Vidéoprojecteurs : Guide d'achat et ComparatifLes Vidéoprojecteurs : Guide d'achat et Comparatif
Les Vidéoprojecteurs : Guide d'achat et Comparatif
Top-plans
 

Dernier (6)

Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
 
INTELLIGENCE ARTIFICIELLE + INFORMATIQUE QUANTIQUE = LA PLUS GRANDE RÉVOLUTIO...
INTELLIGENCE ARTIFICIELLE + INFORMATIQUE QUANTIQUE = LA PLUS GRANDE RÉVOLUTIO...INTELLIGENCE ARTIFICIELLE + INFORMATIQUE QUANTIQUE = LA PLUS GRANDE RÉVOLUTIO...
INTELLIGENCE ARTIFICIELLE + INFORMATIQUE QUANTIQUE = LA PLUS GRANDE RÉVOLUTIO...
 
Rapport Projet ERP - Plateforme Odoo 16 (PFE Licence)
Rapport Projet ERP - Plateforme Odoo 16 (PFE Licence)Rapport Projet ERP - Plateforme Odoo 16 (PFE Licence)
Rapport Projet ERP - Plateforme Odoo 16 (PFE Licence)
 
M365 Community Days MTL 2024 - Découverte du Process Mining et du Task Mining...
M365 Community Days MTL 2024 - Découverte du Process Mining et du Task Mining...M365 Community Days MTL 2024 - Découverte du Process Mining et du Task Mining...
M365 Community Days MTL 2024 - Découverte du Process Mining et du Task Mining...
 
La Gestion des risques selon ISO 27005.pdf
La Gestion des risques selon ISO 27005.pdfLa Gestion des risques selon ISO 27005.pdf
La Gestion des risques selon ISO 27005.pdf
 
Les Vidéoprojecteurs : Guide d'achat et Comparatif
Les Vidéoprojecteurs : Guide d'achat et ComparatifLes Vidéoprojecteurs : Guide d'achat et Comparatif
Les Vidéoprojecteurs : Guide d'achat et Comparatif
 

Symfonytn