Mensajería en todas partes con Node.js

Vonage Mensajes API Sandbox es ideal para probar canales de comunicación que tu organización aún no tiene. Una vez que veas lo útil que puede ser el chat de WhatsApp, Viber y Facebook Messenger, es posible que te sientas inspirado para comenzar a agregarlo a la producción.

Existen ligeras diferencias entre el sandbox y la API de Messages de Vonage. También existen pequeñas diferencias entre los canales individuales. En este ejemplo, crearás un servidor para enviar mensajes desde cualquier canal, desde el sandbox o desde producción. También puedes remezclar el código en Glitch para empezar a probar cosas en el sandbox y luego pasar a producción más rápidamente.

Requisitos previos

No necesitas mucho más que Node.js y el Nexmo Node SDK para este código. Sin embargo, necesitarás una aplicación correctamente configurada para que funcione. Vamos a ir a través de que en detalle, así que por ahora, crear un nuevo directorio del proyecto y asegúrese de que tiene:

• Node y npm

• La versión beta del SDK Nexmo Node.js

• Express.js

• body-parser

• dotenv

Desde la línea de comandos, puede ejecutar npm init para preparar tu proyecto. A continuación, puede instalar los paquetes con:

> npm install nexmo@beta express body-parser dotenv -s

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Póngase en marcha

Antes de comenzar a codificar, ve a tu Panel de desarrollador de Vonage. Primero, crea una nueva aplicación y asegúrate de asignarle uno de tus números de teléfono. Este es un buen momento para crear un archivo .env en el directorio de tu proyecto. Puedes crear algunas variables y pegar tu nuevo ID de aplicación y clave privada directamente en el archivo:

Puede encontrar su API_KEY y API_SECRET en la página Primeros pasos de su panel de control. El SMS_NUM es el número que asignó a su aplicación. WHATSAPP_NUM, VIBER_ID, Y FB_ID pueden encontrarse en el Mensajes API Sandbox en los comandos cURL de ejemplo para los respectivos canales. Este ejemplo asume que estás usando el sandbox para los tres y que aún no tienes tus propias cuentas.

Ahora cree un archivo server.js para que puedas empezar a programar. El código de este ejemplo utiliza la configuración predeterminada del servidor Express de Glitch, que es bastante sencilla. Necesitarás Express y el middleware body-parser, y configurarás tu servidor para servir páginas estáticas desde el directorio /public directorio. Puedes añadir algunos puntos finales para servir una página de destino estática y proporcionar puntos finales de webhook para tu aplicación. Al final del archivo puedes iniciar el servidor:

const express = require("express");
const app = express();
const bodyParser = require('body-parser');

app.use(express.static('public'));
app.use(bodyParser.json());

// https://expressjs.com/en/starter/basic-routing.html
app.get("/", (request, response) => {
  response.sendFile(__dirname + "/views/index.html");
});

app.post('/answer', function(req, res) {
  // this is where contacts could send you new communication info
  res.status(204).end();
});

// this endpoint receives information about events in the app
app.post('/event', function(req, res) {
  res.status(204).end();
});

// TODO: Add some messaging logic here!

// listen for requests :)
const listener = app.listen(process.env.PORT, () => {
  console.log("Your app is listening on port " + listener.address().port);
});

Crear dos clientes

Debido a que no puedes enviar mensajes SMS desde la API del Sandbox de mensajes de Vonage, necesitarás dos clientes si tu aplicación permite la comunicación a través de SMS y otros canales de mensajería. Puedes agregar ambos debajo de tu /event función de escucha:

// create Nexmo clients
const Nexmo = require('nexmo');

// this client uses your real SMS, WhatsApp, Viber, and Messenger accounts
const nexmo = new Nexmo({
  apiKey: process.env.API_KEY,
  apiSecret: process.env.API_SECRET,
  applicationId: process.env.APP_ID,
  privateKey: process.env.PRIVATE_KEY 
});
// this client uses the Message API Sandbox, for testing only
const sandbox = new Nexmo({
  apiKey: process.env.API_KEY,
  apiSecret: process.env.API_SECRET,
  applicationId: process.env.APP_ID,
  privateKey: process.env.PRIVATE_KEY 
}, {
  apiHost: 'messages-sandbox.nexmo.com'
});

// add channels to this array to use a production account
// in this example, only SMS is a "real" channel, the rest use the sandbox
const prodChannels = ['SMS'];

Primero necesitarás el paquete nexmo para utilizar el SDK. Después puedes crear dos clientes casi idénticos. La única diferencia entre ellos es que el cliente sandbox utiliza una clave específica de Messages Sandbox apiHost específica: messages-sandbox.nexmo.com.

Para cambiar canales de sandbox a producción en un solo lugar, puedes almacenar los canales de producción en un array. Comprobaremos esta matriz en el siguiente paso para determinar qué cliente debemos utilizar.

Gestionar las solicitudes del cliente

A continuación, puedes configurar tu servidor para que gestione las peticiones de un formulario en el front-end. Este formulario te permitirá seleccionar un contacto o usuario, el canal por el que enviarles el mensaje y algún texto que enviarles. El código de ejemplo almacena un array de usuarios y sus datos de contacto en el directorio .data/contacts. Deberá proporcionar sus Numbers y Account en el formato :

module.exports = [
  {
    id: 1, 
    name: 'Template McTemplateypants',
    sms: '441234567890',
    viber: '441234567890',
    whatsapp: '441234567890',
    messenger: '1234567890123456'
  }
];

Después de requerir su fichero de datos, puede gestionar las peticiones POST a /send. Obtendrá los archivos contact, methody message del cuerpo de la petición, y usarás el ID del contacto para encontrar el objeto de usuario correspondiente. El cliente por defecto será sandboxy, a continuación, comprobará si method está en su matriz de canales de producción y cambiará el cliente a nexmo en caso afirmativo.

Construirás a y desde en funciones separadas y los pasarás, junto con los objetos messageal método channel.send del cliente. Ese método devolverá un error si hubo algún problema, y algunos datos sobre el mensaje enviado. No olvides enviar una respuesta de vuelta al cliente para cerrar la petición.

Lo último que hay que añadir al servidor son las etiquetas getFrom y getTo . Éstas se encargan de que a y desde estén estructurados correctamente para el canal seleccionado:

const users = require('./.data/contacts');

// handle the form submission from the client
app.post("/send", function(req, res) {
  var contact = req.body.contact;
  var user = users.find(u => u.id == contact);
  var method = req.body.method;
  var message = req.body.message;
  var client = sandbox;
  
  if (prodChannels.includes(method)) {
    client = nexmo;
  }
  
  client.channel.send(getTo(user, method), getFrom(method), {
    content: {
      type: 'text',
      text: message
    }
  }, (e, data) => {
    if (e) {
      console.error(e);
    }
    console.log(data);
  });
  
  res.send({data: 'sent'});
});

function getFrom(method) {
  if (method == 'SMS') {
    return { "type": 'sms', "number": process.env.SMS_NUM };
  }
  if (method == 'WhatsApp') {
    return { "type": 'whatsapp', "number": process.env.WHATSAPP_NUM };
  }
  if (method == 'Viber') {
    return { "type": 'viber_service_msg', "id": process.env.VIBER_ID };
  }
  if (method == 'FB') {
    return { "type": 'messenger', "id": process.env.FB_ID };
  }
}

function getTo(user, method) {
  if (method == 'SMS') {
    return { "type": 'sms', "number": user.sms };
  }
  if (method == 'WhatsApp') {
    return { "type": 'whatsapp', "number": user.whatsapp };
  }
  if (method == 'Viber') {
    return { "type": 'viber_service_msg', "number": user.viber };
  }
  if (method == 'FB') {
    return { "type": 'messenger', "id": user.messenger };
  }
}

Construir una interfaz de usuario

Necesitarás algún tipo de interfaz para enviar tus mensajes. Este ejemplo utiliza un formulario mínimo en el lado del cliente. Los valores del ejemplo están codificados y coinciden con los objetos que el ejemplo tiene en .data/contacts.js. Podrías ir un paso más allá y rellenar las opciones dinámicamente, dependiendo de la cantidad de datos que tengas:

<form>
      <label>Contact:
        <select id="contact">
          <option value="1">Angie</option>
          <option value="2">Benji</option>
          <option value="3">CJ</option>
          <option value="4">Digby</option>
        </select>
      </label>
      <label>Method:
        <select id="method">
          <option>SMS</option>
          <option>WhatsApp</option>
          <option>Viber</option>
          <option value="FB">Facebook Messenger</option>
        </select>
      </label>
      <section>
        <label for="message">Message:</label>
        <textarea id="message"></textarea>
        <button>Send</button>
      </section>
    </form>

El script para enviar el formulario responde al clic de un botón genérico. Obtiene los valores del formulario y construye un cuerpo de petición con ellos, enviándolo a su endpoint /send punto final. Una vez que recibe los datos de vuelta, borra el formulario:

<script>
      const contact = document.querySelector('#contact');
      const method = document.querySelector('#method');
      const message = document.querySelector('#message');

      document.querySelector('button').onclick = function(e) {
        let body = JSON.stringify({
            contact: contact.value,
            method: method.value,
            message: message.value
          });

        fetch('/send', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: body
        })
        .then(response => response.json())
        .then(data => {
          contact.value = '';
          method.value = '';
          message.value = '';
        });
        return false;
      };
    </script>

Enviar algunos mensajes

Con el o los dispositivos de tus cuentas de la lista blanca y números de SMS a mano, puedes intentar enviar algunos mensajes a través de tu formulario. Una vez que hayas verificado que funcionó, puedes adaptar este código para configurar pruebas con el Sandbox de la API de Messages API de Vonage para la lógica de tu aplicación.