Ejemplo básico de Pusher + PHP + AJAX

¡Hola! En esta ocasión quiero realizar un ejemplo básico de Pusher usando PHP en el backend y jQuery en el frontend. El ejemplo consiste en crear un sencillo formulario para enviar una notificación o mensaje a otra página.

Vista previa del ejemplo:

¿Cómo integrar Pusher?

Lo primero que necesitamos, obviamente, es una cuenta de Pusher. Se puede crear desde el siguiente enlace: https://pusher.com/signup

Una vez logueados debemos crear una app. Son tres sencillos pasos: asignarle un nombre, elegir desde qué servidor transmitir la información, y seleccionar nuestro stack:

Front-end: jQuery – Back-end: PHP

Y después obtener las claves de la app:

Estructura de archivos

De esta manera organizaremos los archivos que necesitaremos para este ejemplo.

assets
    L js
       L jquery-3.2.1.min.js
vendor
    L Pusher.php
enviar-mensaje.php
index.php
nueva-notificacion.php

Estoy usando jQuery (v3.2.1) para usar AJAX más fácilmente.

Pusher.php

Lo primero para empezar a desarrollar es asegurarnos que tenemos el archivo/la librería que conecta con Pusher. Este archivo se encuentra en el repositorio “pusher-http-php“. En mi caso, está guardado dentro de ./vendor en la raíz del proyecto.

nueva-notificacion.php

Este archivo es el que contiene el formulario para ingresar el texto que será mostrado más adelante en la otra página. Es sencillamente un HTML5 con un input, un botón y una llamada al archivo que enviará la notificación.

<html>
<head>
<meta charset="UTF-8">
<title>Enviar notificación - MMV</title>
</head>
<body ondragstart="return false;">

<div class="contenedor-general">
    <h3>Notificación:</h3>
    <input type="text" id="texto-notificacion">
    <button id="enviar-notificaciones">Enviar</button>
</div>

<script src="assets/js/jquery-3.2.1.min.js"></script>
<script>
//Llamamos al archivo para enviar la notificación cuando se haga click en el botón
$("#enviar-notificaciones").click(function() {
    var texto_notificacion = $("#texto-notificacion").val();
    $.ajax({
        url: "enviar-mensaje.php",
        type: "POST",
        data: {"notificacion":texto_notificacion}
    }).done(function(debug_data) {
        console.log(debug_data);
    });
});
</script>
</body>
</html>
enviar-mensaje.php

Con este fichero vamos a obtener el texto enviado por el archivo anterior via AJAX, setear la configuración de Pusher, definimos la info que queremos enviar, que será recibida por el canal o canales especificados:

<?php
//Obtenemos la notificación
$text_notificacion = $_POST["notificacion"];

//Anti-XSS y otras comprobaciones
//No incluido para la brevedad del código

require_once("vendor/Pusher.php");

//Desde la v2.2.0
$Pusher_Opciones = array(
    //"scheme" => "http",
    //"host" => "tudominio.com", //"The HOST option overrides the CLUSTER option!"
    //"port" => 80,
    //"timeout" => 30,
    //
	"encrypted" => false,
    //"cluster" => "mt1",
    //"curl_options" => array(
        //CURLOPT_IPRESOLVE => CURL_IPRESOLVE_V4
    //)
);

//Instanciamos un nuevo objeto con las credenciales de Pusher
$_Pusher = new Pusher(
	'abc123456', //APP KEY
	'654321xyz', //APP SECRET
	'000420', //APP ID
	$Pusher_Opciones //CONFIGURACIÓN
);

//Crear timestamp
date_default_timezone_set("America/Argentina/Buenos_Aires");
$timestamp = time();

//Información que enviamos al front de "index.php"
$Mi_Info = array(
    "notificacion" => $text_notificacion,
    "timestamp" => $timestamp
);

//Enviar la información al canal "mis-notificaciones" para que ejecute "recibir-notificacion"
$_Pusher->trigger("mis-notificaciones", "recibir-notificacion", $Mi_Info);
index.php

Por último vamos a obtener la información desde el WebService que crea Pusher cuando incluimos el archivo JS, y hacer un append() al contenedor de notificaciones.

<html>
<head>
<meta charset="UTF-8">
<title>Pusher - MMV</title>
</head>
<body ondragstart="return false;">

<div id="contenedor-notificaciones">
    <ul></ul>
</div>

<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="https://js.pusher.com/4.0/pusher.min.js"></script>
<script>
//console.log() para debuggear Pusher
//No incluir en ambientes de producción
Pusher.logToConsole = true;

//Creamos el objeto Pusher
//Pasamos como parámetro principal nuestro APP ID
var pusher = new Pusher('abc123456', {
  encrypted: false
});

//Escuchamos el canal "mis-notificaciones"
var channel = pusher.subscribe("mis-notificaciones");
channel.bind('recibir-notificacion', function(data) {
    //Obtenemos la información que recibimos desde "manage-message"
    var notificacion = data.notificacion,
        timestamp = data.timestamp,
        elemento_notificacion = "<li><b>Hora:</b> "+timestamp+"<br><b>Mensaje:</b> "+notificacion+"</li>";
    
	$("#contenedor-notificaciones ul").append(elemento_notificacion);
});
</script>
</body>
</html>

¡Y listo! Ya podemos enviar mensajes entre páginas vía Pusher.

Conclusión:

No quise profundizar más en el desarrollo de Pusher, quería que sea un sencillo ejemplo de cómo integrarlo con PHP y JS.

Espero que el tutorial haya sido de utilidad. Nos leemos, ¡saludos!

Anuncios

3 comments

  1. Esteban · junio 19

    Buenas te cuento que hice el ejercicio y no me funciono

    Me gusta

  2. Geancarlos Collazos · 24 Days Ago

    Me funciono perfectamente, gracias y sigue brindando información para aprender todos en conjunto.

    Saludos

    Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s