Obteniendo tiempo real con Pusher

() translation by (you can also view the original English article)

¿Quieres darle vida a tus aplicaciones web haciéndolas en tiempo real, pero no quieres crear nuevas infraestructuras con el único propósito de hacer que los sockets web funcionen? En este artículo, exploraremos cómo usar e implementar Pusher, un servicio de mensajería en tiempo real basado en HTML5 WebSocket para tus aplicaciones.

Introducción

¿Qué son los WebSockets?

Según la página de Wikipedia de WebSocket, WebSocket es una tecnología que proporciona canales de comunicación bidireccionales, full-duplex, a través de un solo socket TCP.

En términos sencillos, WebSockets permite que un cliente y un servidor se comuniquen en ambas direcciones. Permite que un servidor envíe mensajes al cliente y viceversa.

¿Cómo es esto relevante para mi aplicación web?

A lo largo de los años, la caducidad de los datos siempre ha sido un problema con las aplicaciones web, específicamente aquellas que tienen varias personas conectadas y trabajando en las mismas cosas. Por ejemplo, en una aplicación de gestión de proyectos, los usuarios a veces crean elementos de tareas pendientes que los miembros de su equipo están creando al mismo tiempo. Con WebSockets, esto se puede mitigar permitiendo que el servidor envíe notificaciones a todas las partes conectadas, permitiendo que los navegadores reciban nuevos datos en tiempo real. De hecho, antes de crear un elemento pendiente duplicado, verás que alguien más ya lo ha creado.

¿Qué es Pusher?

Pusher es una API alojada para agregar de manera rápida, fácil y segura funcionalidad escalable en tiempo real a través de WebSockets a aplicaciones web y móviles.

Esencialmente, Pusher encapsula la implementación, la funcionalidad, la depuración y el alojamiento de WebSockets para ti. En lugar de tener que ejecutar tu propio servidor WebSockets, te permite descargar todo el proceso a los servidores de Pusher, lo que te permite ahorrar tiempo y dinero.

Pusher es una API alojada para agregar de manera rápida, fácil y segura funcionalidad escalable en tiempo real a través de WebSockets a aplicaciones web y móviles.

Para que Pusher funcione, necesitarás una biblioteca cliente y una biblioteca de editor. Las bibliotecas de cliente se utilizan con el cliente que interactúa con tu aplicación. Puede ser un navegador (a través de JavaScript), una aplicación de iPhone (a través de Objective-C) o una aplicación Flash (a través de ActionScript). Las bibliotecas de editores se utilizan en tu servidor para enviar eventos a tus clientes.

Actualmente, Pusher tiene bibliotecas cliente para JavaScript, Objective-C, ActionScript, .NET y Silverlight, Ruby y Arduino. Tiene bibliotecas de editor para Node.js, Java, Groovy, Grails, Clojure, Python, VB.NET, C #, PHP, Ruby, Perl y ColdFusion.

Para los propósitos de este tutorial, usaremos la biblioteca cliente de JavaScript y la biblioteca del editor PHP. La implementación no debería ser muy diferente si estás utilizando otro lenguaje de programación.

Tengo ganas de crear un widget de chat en vivo para que la gente pueda chatear en tiempo real en un sitio web. Con esto en mente, continuemos.

Configurando Pusher

Paso 1: Regístrate para obtener una cuenta de desarrollador de Pusher gratuita

Para comenzar, ve al sitio web de Pusher y regístrate para obtener su cuenta. Ofrecen una cuenta gratuita para los usuarios del plan Sandbox, que incluye 20 conexiones y 100.000 mensajes por día. Cuando estés listo, siempre puedes actualizar a un plan pago, pero como solo lo usaremos para nuestra aplicación de muestra, ¡un plan Sandbox gratuito funcionará!

Registro en Pusher

En el sitio, haz clic en el botón Registrarse que encontrarás en la esquina superior derecha e ingresa los detalles requeridos. Una vez hecho esto, haz clic en el botón Registrarse nuevamente para completar tu registro.

Paso 2: inicia sesión por primera vez

Después de registrarte, serás redirigido a tu página de administración de Pusher. Aquí es donde puedes administrar todas tus aplicaciones Pusher. Una sola cuenta puede albergar múltiples aplicaciones.

Página de administración de Pusher

En la parte superior tienes tu barra de navegación, donde encontrarás las siguientes secciones:

Panel de control - aquí es donde verás las estadísticas de la aplicación Pusher. Puedes ver la Tasa de mensajes (cantidad de mensajes enviados por minuto), Conexiones (cantidad de conexiones abiertas en un momento determinado) y Mensajes (el total de mensajes que tu aplicación envía por día).
Editar - aquí, puedes cambiar el nombre de la aplicación actual y elegir si usar o no el cifrado SSL.
Acceso a la API - contiene las credenciales de la API de tu aplicación, que necesitaremos más adelante.
Depurar - esto mostrará todos los eventos activados y los mensajes enviados por tu aplicación Pusher, así como cuando los clientes se conectan o desconectan. Esto es extremadamente útil al desarrollar tu aplicación web, ya que aquí puedes ver exactamente qué envía y recibe Pusher y quién está en línea para recibirlos.
Creador de eventos - esta es una herramienta útil para enviar eventos de prueba a tus clientes conectados, sin tener que activar los eventos tú mismo desde tu aplicación web.

¡Ahora estás listo para comenzar a desarrollar con Pusher!

Desarrollando con Pusher

Paso 1: crea el HTML, CSS, JavaScript y PHP

Comencemos a desarrollar nuestro widget de chat en vivo creando el HTML. Lo que tengo en mente es un widget que aparecerá en la parte inferior de la pantalla, con una lista de "Quién está en línea" al costado, como IRC.

<!DOCTYPE HTML>
<html>
<body>
	<div id="chat_widget_container">
		<div id="chat_widget_login">
			<label for="chat_widget_username">Name:</label>
			<input type="text" id="chat_widget_username" />
			<input type="button" value="Login!" id="chat_widget_login_button" />
			<img src="http://nettuts.s3.amazonaws.com/1059_pusher/loading.gif" alt="Logging in..." id="chat_widget_login_loader" />
		</div>
		
		<div id="chat_widget_main_container">
			<div id="chat_widget_messages_container">
				<div id="chat_widget_messages">
					chat messages go here
				</div>
			</div>
			<div id="chat_widget_online">
				<p>Who's Online (<span id="chat_widget_counter">0</span>)</p>
				<ul id="chat_widget_online_list">
					<li>online users go here</li>
				</ul>
			</div>
			<div class="clear"></div>
			<div id="chat_widget_input_container">
				<form method="post" id="chat_widget_form">
					<input type="text" id="chat_widget_input" />
					<input type="submit" value="Chat" id="chat_widget_button" />
					<img src="http://nettuts.s3.amazonaws.com/1059_pusher/loading.gif" alt="Sending..." id="chat_widget_loader" />
				</form>
			</div>
		</div>
	</div>
</body>
</html>

Algunos CSS para diseñar tu HTML:

#chat_widget_container{padding:20px 20px 5px 20px; background-color:#F2F2F2; border:5px solid #AFAFAF; 
border-bottom:0px; width:333px; font-size:11px; font-family:"Lucida Grande",Arial,Helvetica,sans-serif;
position:fixed; bottom:0px; right:20px}

#chat_widget_login{width:333px; text-align:center; height:166px; margin-top:80px}

#chat_widget_main_container{display:none}

#chat_widget_messages_container{float:left; width:200px; border:1px solid #DDD; height:200px; overflow:auto;
padding:5px; background-color:#FFF; position:relative}

#chat_widget_messages{overflow-x:hidden; overflow-y:auto; position:absolute; bottom:0px}

#chat_widget_online{width:100px; height:210px; float:left; padding:0px 10px; border:1px solid #DDD;
border-left:0px; background-color:#FFF; overflow: auto;}

#chat_widget_online_list{list-style:none; padding:0px}

#chat_widget_online_list >li{margin-left:0px}

#chat_widget_input_container{margin-top:10px; text-align:left}

#chat_widget_input{width:260px; margin-right:10px; border:1px solid #DDD; padding:2px 5px}

#chat_widget_loader{display:none}

#chat_widget_login_loader{display:none}

.clear{clear:both}

Los HTML y CSS combinados de arriba deberían representar algo similar a:

Demostración de inicio de sesión

Necesitaremos crear una función que se active cuando hagamos clic en el botón Iniciar sesión y verifiquemos el valor ingresado, así que hagámoslo:

$('#chat_widget_login_button').click(function() {
	$(this).hide(); //hide the login button
	$('#chat_widget_login_loader').show(); //show the loader gif
	username = $('#chat_widget_username').val(); //get the username
	username = username.replace(/[^a-z0-9]/gi, ''); //filter it
	if( username == '' ) { //if blank, then alert the user
		alert('Please provide a valid username (alphanumeric only)');
	} else { //else, login our user via start_session.php
		ajaxCall('start_session.php', { username : username }, function() {
			//We're logged in! Now what?
		});
	}
});

A continuación, debemos informar al servidor cuando hemos iniciado sesión. Para hacer esto, crearemos un archivo start_session.php que básicamente iniciará la sesión del usuario.

<?php
//Start a PHP session
session_start();

//Get the username sent from the user
$username = $_REQUEST['username'];

//filter it
$username = trim(filter_var($username, FILTER_SANITIZE_STRING, FILTER_FLAG_NO_ENCODE_QUOTES));

//set the username for the session
$_SESSION['username'] = $username;

//set a unique id for the user. since we don't have a working user system, we'll just use the time()
//variable to generate a unique id, and add the user's name to it and the user's session id, then 
//MD5 the whole thing
$_SESSION['userid'] = md5(time() + '_' + $username + '_' + session_id());

//echo the json_encoded success message for our ajax call
echo json_encode(array('success' => true));
exit();
?>

Notarás que he creado una función ajaxCall, que básicamente envuelve la función jQuery $.ajax. Simplemente agrega esto antes de la línea $(document).ready().

function ajaxCall(ajax_url, ajax_data, successCallback) {
	$.ajax({
		type : "POST",
		url : ajax_url,
		dataType : "json",
		data: ajax_data,
		time : 10,
		success : function(msg) {
			if( msg.success ) {
				successCallback(msg);
			} else {
				alert(msg.errormsg);
			}
		},
		error: function(msg) {
		}
	});
}

Ahora, carguemos la biblioteca de JavaScript Pusher y también jQuery. Coloca las siguientes referencias de secuencia de comandos dentro del <head> de tu HTML:

1	<script src="http://js.pusherapp.com/1.9/pusher.min.js"></script>
2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Paso 2: toma nota de tus credenciales del API

¿Recuerdas la página de acceso a la API de arriba? Vuelve a él y anota tus credenciales de API. Necesitaremos estos valores cuando configuremos las bibliotecas cliente y editor.

Credenciales del API de Pusher

Siéntete libre de usar la mía, sin embargo, te recomiendo que obtengas la tuya propia, ya que una cuenta gratuita es limitada y es posible que te desconecten a mitad de camino.

Paso 3: implementar el código Pusher

Antes de comenzar a implementar Pusher en nuestra aplicación, debemos comprender algunos términos de Pusher:

Canal - una forma de diferenciar flujos de datos dentro de una aplicación. Una aplicación puede tener varios canales y un canal puede tener varios clientes. Podemos comparar esto con una sala de chat en IRC: todas las personas que están dentro pueden ver todos los mensajes enviados a una sala de chat específica.
Eventos - esto es similar a que el servidor envía datos al cliente para que puedas ver los mensajes en la sala de chat. Los eventos son activados por la biblioteca del editor y los clientes pueden suscribirse a estos eventos. En nuestra analogía, suscribirse a un evento es similar a escuchar cuando las personas conversan en la sala y tomar nota de lo que están diciendo.

Hay tres tipos de canales:

Canales públicos - canales a los que cualquiera puede suscribirse, siempre que conozcan el nombre del canal.
Canales privados - canales a los que solo los usuarios autenticados pueden suscribirse.
Canales de presencia - similares a los canales privados, pero también nos permiten notificar a otros clientes conectados con información sobre el cliente que se conecta. Usaremos este canal en nuestro widget de chat.

Los canales de presencia son especiales ya que nos permiten enviar información sobre los usuarios cuando se conectan. También tienen eventos especiales a los que podemos suscribirnos para saber cuándo un usuario se conecta y desconecta. Los canales de presencia son ideales para canales privados y seguros que necesitan saber cuándo entra o sale un usuario.

Conectándose al servicio Pusher

Comencemos conectando a nuestro cliente al servicio Pusher. Para hacerlo, necesitaremos crear una nueva instancia del objeto Pusher (de la biblioteca) y llamar a la función subscribe. Agrega el siguiente código después del comentario //We're logged in! Now what?.

La función Subscribe esencialmente hace que el cliente se una al canal. Una vez dentro del canal, el cliente podrá recibir eventos que sucedan dentro de él.

pusher = new Pusher('12c4f4771a7f75100398'); //APP KEY

Pusher.channel_auth_endpoint = 'pusher_auth.php'; //override the channel_auth_endpoint

nettuts_channel = pusher.subscribe('presence-nettuts'); //join the presence-nettuts channel

¿Qué es un "channel_auth_endpoint"?

Al suscribirse a un canal de presencia o privado, debemos asegurarnos de que el usuario que se conecta tenga permiso para acceder al canal. Por lo tanto, antes de permitir que el cliente se conecte por completo, el cliente Pusher realiza automáticamente una llamada a la URL definida en la variable channel_auth_endpoint y le envía información sobre el usuario que se conecta. Luego, a través de channel_auth_endpoint, podemos averiguar si el usuario que se conecta está autorizado.

De forma predeterminada, esta llamada se realiza a /pusher/auth, pero podemos anularla configurando la variable channel_auth_endpoint.

Pusher genera un socket_id único y lo envía al navegador. Cuando se intenta suscribirse a un canal privado o de presencia, el socket_id y el channel_name se envían a tu aplicación, (1) a través de una solicitud POST AJAX que autoriza al usuario a acceder al canal contra tu sistema de autenticación existente. Si tiene éxito, tu aplicacíon devuelve una cadena de autorización al navegador firmada con tu secreto de Pusher. Esto se envía a Pusher a través de WebSocket, que completa la autorización (2) si la cadena de autorización coincide.

Volviendo a nuestra aplicación, necesitamos crear nuestro channel_auth_endpoint . Crea un archivo, llamado pusher_auth.php y colócalo dentro:

<?php
//Start the session again so we can access the username and userid
session_start();

//include the pusher publisher library
include_once 'Pusher.php';

//These values are automatically POSTed by the Pusher client library
$socket_id = $_POST['socket_id'];
$channel_name = $_POST['channel_name'];

//You should put code here that makes sure this person has access to this channel
/*
if( $user->hasAccessTo($channel_name) == false ) {
	header('', true, 403);
	echo( "Not authorized" );
	exit();
}
*/

$pusher = new Pusher(
	'12c4f4771a7f75100398', //APP KEY
	'51399f661b4e0ff15af6', //APP SECRET
	'8896' //APP ID
);

//Any data you want to send about the person who is subscribing
$presence_data = array(
	'username' => $_SESSION['username']
);

echo $pusher->presence_auth(
	$channel_name, //the name of the channel the user is subscribing to 
	$socket_id, //the socket id received from the Pusher client library
	$_SESSION['userid'],  //a UNIQUE USER ID which identifies the user
	$presence_data //the data about the person
);
exit();
?>

Ahora que podemos autenticar a nuestros usuarios que se conectan, necesitaremos vincular algunas funciones de JavaScript a eventos Pusher para mostrar que ya hemos iniciado sesión. Actualiza el código debajo del comentario //We're logged in! Now what?, así:

//We're logged in! Now what?
pusher = new Pusher('12c4f4771a7f75100398'); //APP KEY
Pusher.channel_auth_endpoint = 'pusher_auth.php'; //override the channel_auth_endpoint
nettuts_channel = pusher.subscribe('presence-nettuts'); //join the presence-nettuts channel

pusher.connection.bind('connected', function() { //bind a function after we've connected to Pusher
	$('#chat_widget_login_loader').hide(); //hide the loading gif
	$('#chat_widget_login_button').show(); //show the login button again
	
	$('#chat_widget_login').hide(); //hide the login screen
	$('#chat_widget_main_container').show(); //show the chat screen
	
	//here, we bind to the pusher:subscription_succeeded event, which is called whenever you
	//successfully subscribe to a channel
	nettuts_channel.bind('pusher:subscription_succeeded', function(members) {
		//this makes a list of all the online clients and sets the online list html
		//it also updates the online count
		var whosonline_html = '';
		members.each(function(member) {
			whosonline_html += '<li class="chat_widget_member" id="chat_widget_member_' + 
			member.id + '">' + member.info.username + '</li>';
		});
		$('#chat_widget_online_list').html(whosonline_html);
		updateOnlineCount();
	});
	
	//here we bind to the pusher:member_added event, which tells us whenever someone else
	//successfully subscribes to the channel
	nettuts_channel.bind('pusher:member_added', function(member) {
		//this appends the new connected client's name to the online list
		//and updates the online count as well
		$('#chat_widget_online_list').append('<li class="chat_widget_member" ' +
		'id="chat_widget_member_' + member.id + '">' + member.info.username + '</li>');
		updateOnlineCount();
	});
	
	//here, we bind to pusher:member_removed event, which tells us whenever someone
	//unsubscribes or disconnects from the channel
	nettuts_channel.bind('pusher:member_removed', function(member) {
		//this removes the client from the online list and updates the online count
		$('#chat_widget_member_' + member.id).remove();
		updateOnlineCount();
	});
});

Recuerda agregar la función updateOnlineCount(); encima de la línea $(document).ready():

1	function updateOnlineCount() {
2	$('#chat_widget_counter').html($('.chat_widget_member').length);
3	}

Una explicación de lo que acabamos de agregar.

La función pusher.connection.bind nos permite vincular una función de devolución de llamada cada vez que cambia el estado de la conexión de Pusher. Hay muchos estados posibles, como initialized, connecting, unavailable, failed, and disconnected. No los usaremos en este tutorial, pero puedes leer más sobre ellos en la documentación de Pusher.

La función channel_name.bind nos permite vincular una función a un evento específico que podría suceder dentro del canal. De forma predeterminada, los canales de presencia tienen eventos propios a los que podemos vincular funciones, como el evento pusher:subscription_succeeded que usamos anteriormente. Puedes leer más sobre ellos en la documentación de Eventos de presencia de clientes.

Probemos la aplicación ahora y veamos qué sucede. Para hacerlo, abre dos pestañas de tu aplicación e inicia sesión dos veces. Deberías ver algo como esto:

Primera prueba

Cuando cierras una pestaña, el segundo cliente también se cierra, lo que activa nuestro evento pusher:member_removed y elimina al cliente de la lista en línea:

Segunda prueba

Ahora que está funcionando, finalmente podemos implementar la funcionalidad principal de nuestra aplicación - el chat en vivo.

Implementando la funcionalidad de chat en vivo

Comencemos vinculando una función al evento de envío de nuestro formulario de chat:

$('#chat_widget_form').submit(function() {
  var chat_widget_input = $('#chat_widget_input'),
  		chat_widget_button = $('#chat_widget_button'),
  		chat_widget_loader = $('#chat_widget_loader'),

  		message = chat_widget_input.val(); //get the value from the text input
	
	chat_widget_button.hide(); //hide the chat button
	chat_widget_loader.show(); //show the chat loader gif

	ajaxCall('send_message.php', { message : message }, function(msg) { 
		//make an ajax call to send_message.php
		chat_widget_input.val(''); //clear the text input
		chat_widget_loader.hide(); //hide the loader gif
		chat_widget_button.show(); //show the chat button

		newMessageCallback(msg.data); //display the message with the newMessageCallback function
	});

	return false;
});

La función newMessageCallback:

function newMessageCallback(data) {
	if( has_chat == false ) { //if the user doesn't have chat messages in the div yet
		$('#chat_widget_messages').html(''); //remove the contents i.e. 'chat messages go here'
		has_chat = true; //and set it so it won't go inside this if-statement again
	}
	
	$('#chat_widget_messages').append(data.message + '<br />');
}

Luego, necesitaremos crear send_message.php para recibir nuestra llamada AJAX desde arriba y activar el evento new_message:

<?php
//Start the session again so we can access the username
session_start();

//include the pusher publisher library
include_once 'Pusher.php';

$pusher = new Pusher(
	'12c4f4771a7f75100398', //APP KEY
	'51399f661b4e0ff15af6', //APP SECRET
	'8896' //APP ID
);

//get the message posted by our ajax call
$message = $_POST['message'];

//trim and filter it
$message = trim(filter_var($message, FILTER_SANITIZE_STRING, FILTER_FLAG_NO_ENCODE_QUOTES));

//wrap it with the user's name when we display
$message = "<strong>&lt;{$_SESSION['username']}&gt;</strong> {$message}";

//trigger the 'new_message' event in our channel, 'presence-nettuts'
$pusher->trigger(
	'presence-nettuts', //the channel
	'new_message', //the event
	array('message' => $message) //the data to send
);

//echo the success array for the ajax call
echo json_encode(array(
	'message' => $message,
	'success' => true
));
exit();
?>

Probablemente te estés preguntando por qué abstraemos newMessageCallback en su propia función. Bueno, tendremos que volver a llamarlo cuando recibamos un evento new_message de Pusher. El siguiente código vincula una función a un evento, llamado new_message, que se activará cada vez que un usuario envíe un mensaje. Agrega este código después del bloque de código nettuts_channel.bind('pusher:member_removed'):

1	nettuts_channel.bind('new_message', function(data) {
2	newMessageCallback(data);
3	});

La variable data en la función de enlace anterior serán los datos que envía el servidor en la llamada $pusher->trigger(), que deben contener los datos del mensaje.

Probando

Probemos nuestra aplicación nuevamente con dos navegadores, no con pestañas. (O pruébalo con un amigo si lo has subido a alguna parte).

¡Hola amigo!

¡Felicidades! Has creado con éxito una aplicación de trabajo utilizando Pusher.

Conclusión

Ahí lo tienes, una aplicación de trabajo en tiempo real impulsada por Pusher. No dudes en visitar la demostración de chat en vivo que configuré aquí.

Hay mucho más de lo que no hablé en este tutorial, como depurar tus aplicaciones, excluir a los destinatarios de los eventos y desencadenar eventos del lado del cliente, pero puedes aprenderlos simplemente leyendo la documentación de Pusher. Incluso puedes ver su exhibición de sitios web y aplicaciones que usan Pusher para trabajar en tiempo real.

Este tutorial solo rasguña la superficie de Pusher y WebSockets en general. Con este tipo de tecnología, lo que puedes hacer solo está limitado por lo que imaginas construir.

¿Has intentado crear algo con Pusher o planeas hacerlo pronto? ¡Házmelo saber en los comentarios!

Nota: Pusher ha solicitado que restablezcamos las Credenciales de API utilizadas por la cuenta de demostración en este tutorial como precaución para que no se abuse de ella. Les pido disculpas a ustedes y espero que puedan obtener la suya propia :) ¡Gracias!