Idioma: ES
LuisLlamas Logo
Buscar
⏲️ ~ 3 minutos Iniciación
javascript-pusherjs

Comunicación en tiempo real con JavaScript y PusherJS

PusherJS es una biblioteca de JavaScript que nos permite implementar fácilmente comunicación en tiempo real en nuestras aplicaciones web utilizando WebSockets.

Con PusherJS podemos agregar funcionalidades como notificaciones en tiempo real, actualizaciones en directo y chats en nuestras aplicaciones (mejorando significativamente la experiencia del usuario)

PusherJS se destaca por las siguientes características:

  • Simplicidad: Nos ofrece una API fácil de usar para manejar eventos en tiempo real.
  • Escalabilidad: Permite escalar nuestras aplicaciones sin complicaciones adicionales.
  • Fiabilidad: Garantiza la entrega de mensajes en tiempo real de manera segura y eficiente.
  • Compatibilidad: Soporte para varios lenguajes y plataformas, facilitando la integración con nuestro stack tecnológico.

Es muy interesante para aplicaciones de IoT. Además tiene una capa gratuita muy generosa, que permite hasta 200 mil mensajes diarios. Suficiente todos vuestros proyectos juntos.

Instalación de PusherJS

Para empezar a usar PusherJS en nuestras aplicaciones, primero necesitamos registrarnos en Pusher y obtener nuestras credenciales API. Luego, podemos instalar la biblioteca mediante npm o incluirla directamente en nuestro HTML.

Instalación vía npm

Si estamos utilizando un gestor de paquetes como npm, podemos instalar PusherJS con el siguiente comando:

npm install pusher-js

Inclusión en HTML

También podemos incluir PusherJS directamente en nuestro HTML mediante una etiqueta <script>:

<script src="https://js.pusher.com/7.0/pusher.min.js"></script>

Cómo usar PusherJS

Configuración Inicial

Primero, debemos configurar Pusher con nuestras credenciales API. Aquí hay un ejemplo básico de configuración:

import Pusher from 'pusher-js';

const pusher = new Pusher('YOUR_APP_KEY', {
  cluster: 'YOUR_APP_CLUSTER'
});

Suscripción a canales y escucha de eventos

Podemos suscribirnos a un canal y escuchar eventos de la siguiente manera:

const channel = pusher.subscribe('my-channel');

channel.bind('my-event', function(data) {
  console.log('Received event:', data);
});

En este ejemplo, nos suscribimos al canal my-channel y escuchamos el evento my-event. Cuando se desencadena el evento, se ejecuta la función callback y se imprime la información del evento en la consola.

Enviando eventos desde el servidor

Para enviar eventos desde nuestro servidor, podemos usar las bibliotecas de Pusher para diferentes lenguajes. A continuación, mostramos un ejemplo en Node.js:

const Pusher = require('pusher');

const pusher = new Pusher({
  appId: 'YOUR_APP_ID',
  key: 'YOUR_APP_KEY',
  secret: 'YOUR_APP_SECRET',
  cluster: 'YOUR_APP_CLUSTER'
});

pusher.trigger('my-channel', 'my-event', {
  message: 'Hello, world!'
});

En este ejemplo, configuramos Pusher con nuestras credenciales y enviamos un evento my-event al canal my-channel con un mensaje.

Ejemplo completo

Veamos un ejemplo más completo de cómo implementar notificaciones en tiempo real utilizando PusherJS. Supondremos que estamos construyendo una aplicación de chat.

Frontend (HTML + JavaScript)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chat App</title>
  <script src="https://js.pusher.com/7.0/pusher.min.js"></script>
</head>
<body>
  <div id="messages"></div>
  <input type="text" id="messageInput" placeholder="Type a message...">
  <button onclick="sendMessage()">Send</button>

  <script>
    const pusher = new Pusher('YOUR_APP_KEY', {
      cluster: 'YOUR_APP_CLUSTER'
    });

    const channel = pusher.subscribe('chat-channel');

    channel.bind('new-message', function(data) {
      const messagesDiv = document.getElementById('messages');
      const newMessage = document.createElement('div');
      newMessage.textContent = data.message;
      messagesDiv.appendChild(newMessage);
    });

    function sendMessage() {
      const message = document.getElementById('messageInput').value;
      fetch('/send-message', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message })
      });
    }
  </script>
</body>
</html>

Backend (Node.js)

const express = require('express');
const bodyParser = require('body-parser');
const Pusher = require('pusher');

const app = express();
const pusher = new Pusher({
  appId: 'YOUR_APP_ID',
  key: 'YOUR_APP_KEY',
  secret: 'YOUR_APP_SECRET',
  cluster: 'YOUR_APP_CLUSTER'
});

app.use(bodyParser.json());

app.post('/send-message', (req, res) => {
  const message = req.body.message;
  pusher.trigger('chat-channel', 'new-message', { message });
  res.sendStatus(200);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

En este ejemplo,

  • Tenemos un frontend que envía mensajes al servidor mediante una solicitud POST.
  • El servidor, a su vez, utiliza Pusher para enviar el mensaje al canal chat-channel
  • Este es recibido por todos los clientes suscritos al canal.

En esta página