Cómo enviar SMS desde Javascript
La forma más sencilla de enviar SMS desde JavaScript es utilizar la API HTTP/Rest de SMS integrada de Ozeki SMS Gateway. Cuando uses esta API, enviarás mensajes SMS mediante una solicitud HTTP Post al gateway de SMS. La solicitud HTTP Post contendrá un mensaje formateado en formato JSON. El gateway de SMS enviará este SMS al teléfono del destinatario y devolverá una respuesta HTTP 200 OK a tu solicitud.
Código JavaScript para enviar SMS a móviles
El ejemplo de código JavaScript para SMS a continuación demuestra cómo puedes enviar SMS usando la API HTTP REST de SMS 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.
SendSms.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>Enviar 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="SendSms.css">
</head>
<body>
<div class="form-group form-container">
<b>Destinatario:</b>
<input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
<b>Texto:</b>
<input class="form-control" type="text" id="Text" placeholder="¡Hola mundo!">
<button class="btn btn-primary" id="btnSend">
<b>ENVIAR</b>
</button>
</div>
<div class="log-container">
<ul class="card log" id="log-container">
<li class="list-group-item"><b>Registros:</b></li>
</ul>
</div>
<script type="module">
import { Configuration, Message, MessageApi } from "./Ozeki.Libs.Rest.js";
var btnSend = document.getElementById("btnSend");
var configuration = new Configuration();
configuration.Username = 'http_user';
configuration.Password = 'qwe123';
configuration.ApiUrl = 'http://127.0.0.1:9509/api';
var api = new MessageApi(configuration);
btnSend.addEventListener("click", async function() {
var msg = new Message();
msg.ToAddress = document.getElementById("ToAddress").value;
msg.Text = document.getElementById("Text").value;
let result = await api.Send(msg);
document.getElementById('log-container').innerHTML += `<li class="list-group-item">${result}</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 agregar el archivo Ozeki.Libs.Rest.js a tu proyecto. Después de agregarlo, debes incluir la directiva import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; en la sección de encabezado 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 al gateway de SMS. El gateway de SMS reenviará tu mensaje a la red móvil ya sea a través de una conexión inalámbrica o a través de Internet.
Descargar SendSms.js
El código fuente explicado en este artículo se puede descargar, usar y modificar gratuitamente.
Descargar: SendSms.js.zip (5.3Kb)
¿Qué contiene el archivo SendSms.js.zip?
El archivo SendSms.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 SendSms 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.
Cómo enviar SMS desde JavaScript (Guía sencilla)
Para enviar SMS desde JavaScript:
- Instala un usuario de API HTTP
- Habilita "Registrar eventos de comunicación" en la pestaña Avanzado
- Descarga e instala WampServer
- Descarga y extrae el archivo SendSms.js.zip
- Coloca el contenido del zip en la carpeta \www\ del wampserver: C:\wamp64\www
- Inicia la aplicación Ozeki SMS Gateway
- Abre el sitio web escribiendo http://localhost/SendSms.php en tu navegador
- Después de abrir el sitio web, puedes enviar un SMS haciendo clic en el botón Enviar
- Verifica los registros para ver si el SMS se envió
Instalar Ozeki SMS Gateway y crear un usuario de API HTTP
Para poder enviar SMS desde JavaScript, primero necesitas instalar Ozeki SMS Gateway. El gateway de SMS se puede instalar en la misma computadora 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 funcione. El paso final para preparar tu entorno es crear un usuario de API HTTP para SMS. Crea un usuario con el nombre de usuario "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 enviar SMS desde JavaScript
Para enviar SMS desde JavaScript, tu código JavaScript tendrá que hacer una solicitud HTTP al gateway de 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 gateway de SMS. Si Ozeki SMS Gateway está instalado en la misma computadora donde se ejecuta la aplicación JavaScript de SMS, puede ser 127.0.0.1. Si está instalado en una computadora diferente, debe ser la dirección IP de esa computadora.
http://127.0.0.1:9509/api?action=rest
Autenticación HTTP para enviar SMS desde JavaScript
Para autenticar el cliente de SMS en 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(nombre de usuario+":"+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
Encabezado de solicitud HTTP para enviar SMS desde JavaScript
Para enviar los mensajes SMS, necesitas incluir las siguientes líneas como encabezados en la solicitud HTTP. Ten en cuenta que incluimos un tipo de contenido y un encabezado 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 encabezado HTTP y una parte de cuerpo HTTP. El cuerpo HTTP es una cadena de datos codificada en JSON. Contiene el número del destinatario y el texto del mensaje.
POST /api?action=sendmsg HTTP/1.1
Connection: close
Content-Length: 418
Content-Type: text/plain;charset=UTF-8
Accept: */*
Authorization: Basic aHR0cF91c2VyOnF3ZTEyMw==
Host: 127.0.0.1:9509
User-Agent: node-XMLHttpRequest
{
"messages": [
{
"message_id": "ca3be75b-f55d-9237-adee-e425007cd253",
"to_address": "+36201111111",
"text": "Hello world!",
"create_date": "2021-07-30T11:14:56",
"vaild_date": "2021-08-06T11:14:56",
"time_to_send": "2021-07-30T11:14:56",
"submit_report_requested": true,
"delivery_report_requested": true,
"view_report_requested": true
}
]
}
Respuesta HTTP recibida por el ejemplo de SMS en JavaScript
Una vez que el gateway de 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.123 (www.myozeki.com)
Content-Type: application/json; charset=utf8
Last-Modified: Fri, 30 Jul 2021 11:03:09 GMT
Server: 10/10.3.123
Transfer-Encoding: chunked
{
"http_code": 200,
"response_code": "SUCCESS",
"response_msg": "Messages queued for delivery.",
"data": {
"total_count": 1,
"success_count": 1,
"failed_count": 0,
"messages": [
{
"message_id": "ca3be75b-f55d-9237-adee-e425007cd253",
"from_station": "%",
"to_address": "+36201111111",
"to_station": "%",
"text": "Hello world!",
"create_date": "2021-07-30 11:14:56",
"valid_until": "2021-08-06 11:14:56",
"time_to_send": "2021-07-30 11:14:56",
"submit_report_requested": true,
"delivery_report_requested": true,
"view_report_requested": false,
"tags": [
{
"name": "Type",
"value": "SMS:TEXT"
}
],
"status": "SUCCESS"
}
]
}
}
Conecta tu gateway de SMS a la red móvil y crea una cuenta de usuario de API HTTP
Asumimos que ya has instalado Ozeki SMS Gateway, y has conectado a la red móvil. Para poder enviar SMS a un teléfono móvil desde JavaScript, necesitas configurar una cuenta de usuario de API HTTP en Ozeki SMS Gateway.
Crear un nuevo usuario (Tutorial en video)
Este video te muestra cómo configurar una nueva cuenta de usuario de API HTTP. Comenzará con la página de inicio del Ozeki SMS Gateway y terminará con la pestaña de Eventos del nuevo usuario. El video te mostrará cómo crear y configurar tu nuevo usuario. Lo mejor de este video es que solo dura 30 segundos pero contiene toda la información que necesitas para crear un nuevo usuario de API HTTP.
Cómo enviar SMS desde JavaScript usando la API de SMS en JavaScript (Tutorial en video)
Este video te muestra cómo descargar el archivo SendSms.js.zip desde esta página. Si ves el video, notarás que el contenido del SendSms.cs zip se coloca en la carpeta \www\ del WampServer. También verás que ejecutamos el WampServer haciendo clic en su ícono dos veces, y después de esto escribimos http://localhost:8080/SendSms.js en el navegador web.
Ejemplo de SMS en JavaScript: SendSms.js
El código de ejemplo a continuación es parte del archivo PHP SendSms.php.
Además de eso, verás otros dos archivos llamados SendSms.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 SendSms.php contiene el código JavaScript, y algunos encabezados que nos permitirán enviar solicitudes HTTP sin errores CORS.
- El SendSms.css contiene la hoja de estilos.
Cómo verificar que el SMS ha sido aceptado por el usuario HTTP (Tutorial en video)
Después de enviar el SMS, es una buena idea verificar tu gateway de SMS, para ver qué ha recibido. Puedes verificar 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.
Cómo verificar que el SMS ha sido enviado a la red móvil
El paso final para verificar el procedimiento es revisar los registros de la conexión a la red móvil. Es posible que debas activar el registro en la configuración de la conexión antes de enviar el mensaje para ver los registros. Si el registro está habilitado, verás el número de teléfono y el texto del mensaje que has enviado.
Probar si la solicitud fue aceptada (Tutorial en video)
En el siguiente video, verás cómo verificar si el cliente SMPP tuvo éxito al enviar tu mensaje. Aprenderás cómo abrir la pestaña de eventos del usuario SMPP y qué buscar. El video dura solo 18 segundos pero será muy útil.
SMS recibido en el teléfono (Tutorial en video)
En el siguiente video, verás cómo se ve un mensaje entrante que fue enviado desde Ozeki SMS Gateway. Comenzará con la pantalla de inicio de un teléfono Android y terminará con el mensaje abierto. Dura solo 18 segundos y puedes ver todo el proceso de recepción de un mensaje.
Resumen
La guía anterior explicó los pasos para enviar SMS desde JavaScript. Como se pudo ver, Ozeki te proporciona todas las herramientas necesarias en el envío de mensajes, por lo que si se siguieron los pasos cuidadosamente, el envío de mensajes desde JavaScript ya no es un problema. Ozeki SMS Gateway juega un papel enorme en el envío, no podrías llegar a los usuarios móviles sin este programa. Es importante destacar que Ozeki SMS Gateway funciona en cualquier país, por lo que los mensajes se pueden enviar internacionalmente con esta solución.
No termines la lectura aquí, explora la página de tutoriales de Ozeki y aprende sobre recepción de SMS en JavaScript.
¡Tu próximo paso es descargar Ozeki SMS Gateway y comenzar a trabajar!
More information
- Enviar SMS con Javascript usando la API REST HTTP (ejemplo de código)
- Enviar múltiples SMS con Javascript usando la API REST HTTP (ejemplo de código)
- Programar SMS con Javascript usando la API REST HTTP (ejemplo de código)
- Recibir SMS con Javascript usando la API REST HTTP (ejemplo de código)
- Eliminar SMS con Javascript usando la API REST HTTP (ejemplo de código)
- Cómo descargar la última biblioteca de API de SMS en JavaScript desde Github