Comentarios en tiempo real con Pusher

adrianalonso.es

web developer

Objetivo

• Sistema de comentarios
• Actualización en tiempo real
• Chat
• Sin recarga y sin Ajax
• Websockets

Herramienta

¿Que es un websocket?

• Tecnología que permite comunicación bidireccional
• Diseñada para navegadores y servidores web
• Proceso de normalización por el W3C

Pusher

• Infastructure as a service
• Abstracción protocolo websockets
• Monitorización y estadística
• Push Notifications
• Comunicación puede ser iniciada por el servidor
• Sistema de Eventos
• Librerías para distintos lenguajes

Version FREE

Para el ejemplo hemos empleado una versión gratuita de Pusher  para demostrar lo que nos permite hacer. Esta version free nos permite tener un máximo de 20 conexiones simultaneas y manejar 100.000 mensaje al día, lo cual nos puede permite probar como implementar nuestros servicios en tiempo real sin pensar inicialmente en la infraestructura ni las necesidades de la plataforma.

Integración con Symfony

LopiPusherbundle https://github.com/laupiFrpar/LopiPusherBundle

# app/config/config.yml
lopi_pusher:
    app_id: <your_app_id>
    key: <your_key>
    secret: <your_secret>

    # Default configuration
    debug: false # true if you want use the debug of all requests
    host: http://api.pusherapp.com
    port: 80
    timeout: 30

    # optional if you want to use private or presence channels
    # see the section about "Private and Presense channel auth" below
    auth_service_id: <the_auth_service_id>

Ejemplo Servidor

$comment= new Comment();
$comment->setComment($commentText);
$comment->setGame($game);
$comment->setUser($user);

$dm->persist($comment);
$dm->flush();

 
$pusher = $this->get('lopi_pusher.pusher');
$serializer = $this->get('jms_serializer');

 pusher->trigger('comments-channel', 
'comments-'.$idGame, $serializer->serialize($comment, 'json'));

Ejemplo Cliente

var pusher = new Pusher(‘apikey’);
var channel = pusher.subscribe('comments-channel');

channel.bind('comments-{{game.id}}', function(data) {

    obj = JSON.parse(data);
    // realizar acciones 
});

GRACIAS

http://adrianalonso.es/2014/08/comentarios-en-tiempo-real-en-tu-aplicacion-web/