Cómo recibir un SMS en Javascript

La forma más sencilla de recibir SMS desde JavaScript es utilizar la API HTTP/REST de SMS integrada de Ozeki SMS Gateway. Cuando uses esta API, recibirás mensajes SMS mediante una solicitud HTTP GET a la pasarela SMS. La solicitud HTTP GET devolverá una respuesta HTTP 200 OK a tu solicitud, junto con los mensajes dentro de la carpeta seleccionada.

cómo recibir un sms en javascript
Figura 1 - Cómo recibir un SMS en Javascript

Código JavaScript para recibir sms en móvil

El ejemplo de código JavaScript para SMS a continuación demuestra cómo puedes recibir mensajes SMS usando la API REST HTTP de Ozeki SMS Gateway con la biblioteca JavaScript Ozeki.Libs.Rest. Esta biblioteca se proporciona gratuitamente y puedes usarla y modificarla en cualquiera de tus proyectos.

ReceiveSms.php 
<?php
    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');
    header("Access-Control-Allow-Headers: Authorization, Accept, Content-Type");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Recibir SMS con Ozeki SMS Gateway</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <link rel="stylesheet" href="ReceiveSms.css">
    </head>
    <body>

        <div class="form-container">
            <button class="btn btn-primary" id="btnDownloadIncoming">
                <b>DescargarEntrantes</b>
            </button>
        </div>

        <div class="card log-container">
            <ul class="log" id="container">
                <li class="list-group-item"><b>Registros:</b></li>
            </ul> 
        </div>

        <script type="module">
            import { Configuration, MessageApi } from "./Ozeki.Libs.Rest.js";

            var btnDownloadIncoming = document.getElementById("btnDownloadIncoming");

            var configuration = new Configuration();
            configuration.Username = 'http_user';
            configuration.Password = 'qwe123';
            configuration.ApiUrl = 'http://192.168.0.14:9509/api';

            var api = new MessageApi(configuration);

            btnDownloadIncoming.addEventListener("click", async function() {
                
                let result = await api.DownloadIncoming();

                document.getElementById('container').innerHTML += `<li class="list-group-item">${result}</li>`;
                
                for (let i = 0; i < result.MessageCount; i++)
                {
                    document.getElementById('container').innerHTML += `<li class="list-group-item">${result.Messages[i]}</li>`;
                }
            });
            
        </script>
    </body>
</html>

Cómo usar el ejemplo de SMS en JavaScript:

Este ejemplo de SMS en JavaScript puede usarse en cualquier aplicación web. Para usarlo, debes añadir el archivo Ozeki.Libs.Rest.js a tu proyecto. Después de añadirlo, debes incluir la directiva import {MessageApi, Configuration} from './Ozeki.Libs.Rest.js'; en la sección de cabecera de tu código fuente JavaScript. Esto te permitirá usar las clases proporcionadas por la biblioteca Ozeki.Libs.Rest. Puedes usar la clase Message para crear el SMS. Puedes usar la clase MessageApi para enviar el SMS a la pasarela SMS. La pasarela SMS reenviará tu mensaje a la red móvil ya sea mediante una conexión inalámbrica o a través de Internet.

Descargar ReceiveSms.js

El código fuente explicado en este artículo puede descargarse, usarse y modificarse gratuitamente.
Descargar: ReceiveSms.js.zip (5.28Kb)

¿Qué contiene el archivo ReceiveSms.js.zip?

El archivo ReceiveSms.js.zip contiene la biblioteca Ozeki.Libs.Rest, que te proporciona todas las herramientas necesarias para enviar y recibir mensajes SMS. También encontrarás el proyecto ReceiveSms en el zip, que contiene el código de ejemplo para mostrarte cómo enviar un SMS. Este código de ejemplo se muestra a continuación.

directorio de receive sms js
Figura 2 - Qué hay dentro de ReceiveSms.js.zip

Cómo recibir SMS desde JavaScript (Guía sencilla)

Para recibir SMS desde JavaScript:

  1. Instala un usuario de API HTTP
  2. Habilita "Registrar eventos de comunicación" en la pestaña Avanzado
  3. Configura WampServer
  4. Descarga y extrae el archivo ReceiveSms.js.zip
  5. Coloca el contenido del zip en la carpeta \www\ del wampserver: C:\wamp64\www
  6. Inicia la aplicación Ozeki SMS Gateway
  7. Abre el sitio web escribiendo http://localhost/ReceiveSms.php en tu navegador
  8. Después de abrir el sitio web, puedes recibir SMS haciendo clic en el botón DescargarEntrantes
  9. Revisa los registros para ver si el SMS se recibió

Instalar Ozeki SMS Gateway y crear un usuario de API HTTP

Para poder enviar SMS desde JavaScript, primero necesitas instalar Ozeki SMS Gateway. La pasarela SMS puede instalarse en el mismo equipo donde desarrollas tu código JavaScript en Visual Studio. Después de la instalación, el siguiente paso es conectar Ozeki SMS Gateway a la red móvil. Puedes enviar un SMS de prueba desde la GUI de Ozeki para verificar que tu conexión a la red móvil funciona. El paso final para preparar tu entorno es crear un usuario de API HTTP para SMS. Crea un usuario con el nombre "http_user" y la contraseña "qwe123" para que el ejemplo funcione sin modificaciones.

Una vez configurado el entorno, puedes ejecutar tu código JavaScript.

URL de la API HTTP para recibir SMS desde JavaScript

Para enviar SMS desde JavaScript, tu código JavaScript tendrá que hacer una solicitud HTTP a la pasarela SMS. La URL de la API se muestra a continuación. Ten en cuenta que la dirección IP (127.0.0.1) debe ser reemplazada por la dirección IP de tu pasarela SMS. Si Ozeki SMS Gateway está instalado en el mismo equipo donde se ejecuta la aplicación JavaScript de SMS, puede ser 127.0.0.1. Si está instalado en un equipo diferente, debe ser la dirección IP de ese equipo. 

http://127.0.0.1:9509/api?action=rest

Autenticación HTTP para recibir SMS desde JavaScript

Para autenticar el cliente SMS de JavaScript, necesitas enviar el nombre de usuario y la contraseña en una cadena codificada en base64 al servidor en una solicitud HTTP. El formato utilizado es: base64(nombredeusuario+":"+contraseña). En JavaScript puedes usar el siguiente código para hacer esta codificación: 

// Puedes encontrar el codificador Base64 en el archivo Ozeki.Libs.Rest.js 
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;

Por ejemplo, si codificas el nombre de usuario 'http_user' y la contraseña 'qwe123', obtendrás la siguiente cadena codificada en base64: aHR0cF91c2VyOnF3ZTEyMw==. Para enviar

Cabecera de solicitud HTTP para recibir SMS desde JavaScript

Para enviar los mensajes SMS, necesitas incluir las siguientes líneas como cabeceras en la solicitud HTTP. Ten en cuenta que incluimos un tipo de contenido y una cabecera de Autorización. 

Content-Type: application/json
Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==

Solicitud HTTP para enviar SMS desde JavaScript

Para enviar el SMS, tu aplicación JavaScript enviará una solicitud HTTP similar a la que se muestra a continuación. Ten en cuenta que esta solicitud contiene una parte de cabecera HTTP que incluye el nombre de usuario y la contraseña del http_user. 

GET /api?action=receivemsg&folder=inbox HTTP/1.1
Connection: Keep-Alive
Authorization: Basic aHR0cF91c2VyOnF3ZTEyMw==
Host: 127.0.0.1:9509

Respuesta HTTP recibida por el ejemplo de SMS en JavaScript

Una vez que la pasarela SMS recibe esta solicitud, generará una respuesta HTTP. La respuesta HTTP contendrá un código de estado para indicar si el envío del SMS fue exitoso o no. También devolverá una estructura codificada en JSON para proporcionarte detalles útiles sobre el envío del mensaje. 

HTTP/1.1 200 OK
User-Agent: OZEKI 10.3.116 (www.myozeki.com)
Content-Type: application/json; charset=utf8
Last-Modified: Mon, 07 Jun 2021 14:10:25 GMT
Server: 10/10.3.116
Transfer-Encoding: chunked

{
	"http_code": 200,
	"response_code": "SUCCESS",
	"response_msg": "",
	"data": {
	"folder": "inbox",
	"limit": "1000",
		"data": [
		{
			"message_id": "b754195d-9bd8-48dc-a45f-cf688c5b32e3",
			"from_connection": "http_user@localhost",
			"from_address": "+36201111111",
			"from_station": "%",
			"to_connection": "http_user@localhost",
			"to_address": "http_user",
			"to_station": "%",
			"text": "Hola, Mundo 1",
			"create_date": "2021-06-08 09:12:24",
			"valid_until": "2021-06-15 09:12:24",
			"time_to_send": "0001-01-01 00:00:00",
			"submit_report_requested": true,
			"delivery_report_requested": true,
			"view_report_requested": true,
			"tags": [
				{
					"name": "Type",
					"value": "SMS:TEXT"
				}
			]
		},
		{
			"message_id": "a6337c23-51bc-43ee-9181-c9838abbe161",
			"from_connection": "http_user@localhost",
			"from_address": "+36202222222",
			"from_station": "%",
			"to_connection": "http_user@localhost",
			"to_address": "http_user",
			"to_station": "%",
			"text": "Hola, Mundo 2",
			"create_date": "2021-06-08 09:12:24",
			"valid_until": "2021-06-15 09:12:24",
			"time_to_send": "0001-01-01 00:00:00",
			"submit_report_requested": true,
			"delivery_report_requested": true,
			"view_report_requested": true,
			"tags": [
				{
					"name": "Type",
					"value": "SMS:TEXT"
				}
			]
		},
		{
			"message_id": "ca14710b-42b9-4abc-b04f-262cc282dd7c",
			"from_connection": "http_user@localhost",
			"from_address": "+36203333333",
			"from_station": "%",
			"to_connection": "http_user@localhost",
			"to_address": "http_user",
			"to_station": "%",
			"text": "Hola, Mundo 3",
			"create_date": "2021-06-08 09:12:24",
			"valid_until": "2021-06-15 09:12:24",
			"time_to_send": "0001-01-01 00:00:00",
			"submit_report_requested": true,
			"delivery_report_requested": true,
			"view_report_requested": true,
			"tags": [
				{
					"name": "Type",
					"value": "SMS:TEXT"
				}
			]
		}
	]
}

Cómo eliminar SMS desde JavaScript usando la API de SMS en JavaScript (Tutorial en video)

Este video te muestra cómo descargar el archivo ReceiveSms.js.zip desde esta página. Si ves el video, notarás que el contenido del zip ReceiveSms.js se coloca en la carpeta \www\ del WampServer. También verás que ejecutamos el WampServer haciendo clic en su icono dos veces, y después escribimos http://localhost:8080/ReceiveSms.php en el navegador web.

Ejemplo de SMS en JavaScript: ReceiveSms.js

El código de ejemplo a continuación es parte del archivo PHP ReceiveSms.php. Además de eso, verás otros dos archivos llamados ReceiveSms.css y Ozeki.Libs.Rest.js.

  • El archivo Ozeki.Libs.Rest.js contiene todas las herramientas necesarias para enviar, eliminar, marcar y recibir mensajes SMS.
  • El ReceiveSms.php contiene el código JavaScript, y algunas cabeceras que nos permitirán enviar solicitudes HTTP sin errores CORS.
  • El ReceiveSms.css contiene la hoja de estilos para la página web.

cómo recibir sms usando javascript
Figura 3 - ReceiveSms.php

Cómo verificar que el SMS ha sido aceptado por el usuario HTTP (Tutorial en video)

Después de enviar el SMS, es buena idea verificar tu pasarela SMS, para ver qué ha recibido. Puedes revisar el registro abriendo los detalles del usuario HTTP desde la consola de administración de Ozeki SMS Gateway. El siguiente video te muestra qué buscar. El video comenzará con el código abierto y terminará con los detalles del mensaje enviado. Aprenderás cómo lanzar el proyecto, cómo se ve el proyecto durante su ejecución y cómo se ve el archivo de registro después. El video dura solo 42 segundos y es fácil de entender. No tendrás problemas para seguirlo.

Video 2 - Cómo verificar que el SMS ha sido aceptado por el usuario HTTP (Tutorial en video)

Resumen

Este artículo te muestra cómo recibir mensajes SMS desde tu aplicación JavaScript usando la API REST HTTP de SMS integrada en Ozeki SMS Gateway. Si has seguido esta guía atentamente, ahora puedes usar el programa proporcionado para redirigir los mensajes SMS recibidos a tu almacenamiento con la ayuda del usuario HTTP en Ozeki SMS Gateway. Este repositorio puede usarse y modificarse gratuitamente, por lo que puedes utilizarlo en cualquiera de tus proyectos.

Sigue leyendo artículos en el sitio web de Ozeki, amplía tus conocimientos. Continúa con la guía titulada Cómo eliminar un SMS en Javascript, y aprende a usar la API de SMS para otros propósitos.

¡Manos a la obra, comienza a descargar Ozeki SMS Gateway ahora!

More information