Last active
December 16, 2015 23:59
-
-
Save abennouna/5517147 to your computer and use it in GitHub Desktop.
Tutoriel Yii : Affichage en temps réel de données en provenance du serveur à l’aide des Server-Side Events (SSE) - http://tellibus.com/blog/1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
CREATE TABLE `Message` ( | |
`id` int unsigned NOT NULL AUTO_INCREMENT, | |
`toUserId` int unsigned NOT NULL, | |
`message` text NOT NULL, | |
`new` tinyint NOT NULL DEFAULT '1', | |
PRIMARY KEY (`id`), | |
KEY `toUserId` (`toUserId`) | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
Yii::app()->clientScript->registerScript('message-update', ' | |
if (typeof(EventSource) !== "undefined") { | |
var source = new EventSource("' . $this->createUrl('site/getMessage') . '"); | |
source.onmessage = function(event) { | |
// Nous afficherons les nouveaux messages en haut de la pile | |
$("#message").prepend(event.data).fadeIn(); | |
}; | |
} else { | |
// Le navigateur ne supporte par les SSE, mais il y a des solutions malgré tout, lisez le tuto jusqu’au bout | |
$("#message").replaceWith("<div class=\"flash-notice\">Désolés, votre navigateur ne supporte pas les SSE.<br>Un conseil : utilisez un meilleur navigateur :-)</div>"); | |
} | |
', CClientScript::POS_READY); | |
?> | |
<div id="message"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
class SiteController extends Controller | |
{ | |
… | |
/* Ajoutez les règles d’accès éventuelles pour l’action getMessage */ | |
… | |
public function actionGetMessage() | |
{ | |
$messageList = Message::model()->findAll( | |
array( | |
'condition' => 'toUserId = :myId AND new = 1', | |
'order' => 'id DESC', | |
'params' => array(':myId' => Yii::app()->user->_id) | |
) | |
); | |
header('Content-Type: text/event-stream'); | |
header('Cache-Control: no-cache'); | |
// Faculatif : Nous disons au navigateur de renvoyer la requête | |
// à nouveau après 10 secondes | |
echo "retry: 10000\n"; | |
if (count($messageList)) { | |
foreach ($messageList as $message) { | |
echo "data: <p>{$message->message}</p>\n"; | |
} | |
// Pour simplifier, nous exécutons une requête SQL assez grossière | |
// pour mettre à jour les statuts des messages que nous venons d’envoyer | |
$sql = 'UPDATE `Message` | |
SET `new` = 0 | |
WHERE `toUserId` = ' . Yii::app()->user->_id; | |
$command = Yii::app()->db->createCommand($sql); | |
$command->execute(); | |
} | |
// La touche finale | |
flush(); | |
} | |
… | |
} | |
?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
class Message extends CActiveRecord | |
{ | |
public static function model($className=__CLASS__) | |
{ | |
return parent::model($className); | |
} | |
public function tableName() | |
{ | |
return 'Message'; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Pour plus de détails, consultez le billet de blog http://tellibus.com/blog/1-Tutoriel-Yii--Affichage-en-temps-réel-de-données-en-provenance-du-serveur-à-l-aide-des-ServerSide-Events-SSE