Cómo enviar múltiples SMS desde Javascript
La forma más sencilla de enviar múltiples SMS desde JavaScript es utilizar la API de SMS HTTP/Rest 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 múltiples SMS a móviles
El ejemplo de código JavaScript para SMS a continuación demuestra cómo puedes enviar múltiples mensajes SMS utilizando la API de SMS HTTP Rest 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.
SendMultipleSms.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 múltiples 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="SendMultipleSms.css">
</head>
<body style="height: 100vh; width: 100vw; padding: 0; margin: 0;">
<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="btnAdd">
<b>AÑADIR</b>
</button>
<div class="card messages-container">
<ul class="list-group log" id="message_container">
<li class="list-group-item"><b>Mensajes:</b></li>
</ul>
</div>
<button class="btn btn-primary" id="btnSend">
<b>ENVIAR</b>
</button>
</div>
<div class="card log-container">
<ul class="list-group log" id="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 messages = new Array();
var btnSend = document.getElementById("btnSend");
var btnAdd = document.getElementById("btnAdd");
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);
btnAdd.addEventListener("click", function() {
if (document.getElementById("ToAddress").value != '' && document.getElementById("Text").value != '') {
var msg = new Message();
msg.ToAddress = document.getElementById("ToAddress").value;
msg.Text = document.getElementById("Text").value;
document.getElementById("ToAddress").value = '';
document.getElementById("Text").value = '';
messages.push(msg);
document.getElementById('message_container').innerHTML += `<li class="list-group-item">${msg}</li>`;
}
});
btnSend.addEventListener("click", async function() {
let result = await api.Send(messages);
messages = new Array();
document.getElementById('message_container').innerHTML = `<li class="list-group-item"><b>Mensajes:</b></li>`;
document.getElementById('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 mediante una conexión inalámbrica o a través de Internet.
Descargar SendMultipleSms.js
El código fuente explicado en este artículo se puede descargar, usar y modificar gratuitamente.
Descargar: SendMultipleSms.js.zip (5.62Kb)
¿Qué contiene el archivo SendMultipleSms.js.zip?
El archivo SendMultipleSms.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 SendMultipleSms 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 (Pasos sencillos)
Para enviar SMS desde JavaScript:
- Instala un usuario de API HTTP
- Habilita "Registrar eventos de comunicación" en la pestaña Avanzado
- Configura WampServer
- Descarga y extrae el archivo SendMultipleSms.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/SendMultipleSms.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 puede instalarse 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 de SMS en JavaScript, 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 encabezado de 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: 1028
Content-Type: text/plain;charset=UTF-8
Accept: */*
Authorization: Basic aHR0cF91c2VyOnF3ZTEyMw==
Host: 127.0.0.1:9509
User-Agent: node-XMLHttpRequest
{
"messages": [
{
"message_id":"647a34a9-a852-f5e5-8a14-0619b6ddad1d",
"to_address":"+36201111111",
"text":"Hola mundo 1",
"create_date":"2021-07-30T11:57:10",
"vaild_date":"2021-08-06T11:57:10",
"time_to_send":"2021-07-30T11:57:10",
"submit_report_requested":true,
"delivery_report_requested":true,
"view_report_requested":true
},
{
"message_id":"d918770b-c87b-8ba5-9a4a-b01e4d0f71d0",
"to_address":"+36202222222",
"text":"Hola mundo 2",
"create_date":"2021-07-30T11:57:21",
"vaild_date":"2021-08-06T11:57:21",
"time_to_send":"2021-07-30T11:57:21",
"submit_report_requested":true,
"delivery_report_requested":true,
"view_report_requested":true
},
{
"message_id":"9c1375ae-9295-44d9-b79a-1b661f724741",
"to_address":"+36203333333",
"text":"Hola mundo 3",
"create_date":"2021-07-30T11:57:34",
"vaild_date":"2021-08-06T11:57:34",
"time_to_send":"2021-07-30T11:57:34",
"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 la solicitud de envío de SMS fue exitosa 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:51:13 GMT
Server: 10/10.3.123
Transfer-Encoding: chunked
{
"http_code": 200,
"response_code": "SUCCESS",
"response_msg": "Mensajes en cola para entrega.",
"data": {
"total_count": 3,
"success_count": 3,
"failed_count": 0,
"messages": [
{
"message_id": "647a34a9-a852-f5e5-8a14-0619b6ddad1d",
"from_station": "%",
"to_address": "+36201111111",
"text": "Hola mundo 1",
"create_date": "2021-07-30 11:57:10",
"valid_until": "2021-08-06 11:57:10",
"time_to_send": "2021-07-30 11:57:10",
"submit_report_requested": true,
"delivery_report_requested": true,
"view_report_requested": false,
"tags": [
{
"name": "Type",
"value": "SMS:TEXT"
}
],
"status": "SUCCESS"
},
{
"message_id": "d918770b-c87b-8ba5-9a4a-b01e4d0f71d0",
"from_station": "%",
"to_address": "+36202222222",
"to_station": "%",
"text": "Hola mundo 2",
"create_date": "2021-07-30 11:57:21",
"valid_until": "2021-08-06 11:57:21",
"time_to_send": "2021-07-30 11:57:21",
"submit_report_requested": true,
"delivery_report_requested": true,
"view_report_requested": false,
"tags": [
{
"name": "Type",
"value": "SMS:TEXT"
}
],
"status": "SUCCESS"
},
{
"message_id": "9c1375ae-9295-44d9-b79a-1b661f724741",
"from_station": "%",
"to_address": "+36203333333",
"to_station": "%",
"text": "Hola mundo 3",
"create_date": "2021-07-30 11:57:34",
"valid_until": "2021-08-06 11:57:34",
"time_to_send": "2021-07-30 11:57:34",
"submit_report_requested": true,
"delivery_report_requested": true,
"view_report_requested": false,
"tags": [
{
"name": "Type",
"value": "SMS:TEXT"
}
],
"status": "SUCCESS"
}
]
}
}
Cómo enviar múltiples SMS desde JavaScript usando la API de SMS en JavaScript (Tutorial en video)
Este video te muestra cómo descargar el archivo SendMultipleSms.js.zip desde esta página. Si ves el video, notarás que el contenido del SendMultipleSms.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/SendMultipleSms.js en el navegador web.
Ejemplo de SMS en JavaScript: SendMultipleSms.js
El código de ejemplo a continuación es parte del archivo PHP SendMultipleSms.php.
Además de eso, verás otros dos archivos llamados SendMultipleSms.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 SendMultipleSms.php contiene el código JavaScript, y algunos encabezados que nos permitirán enviar solicitudes HTTP sin errores CORS.
- El SendMultipleSms.css contiene la hoja de estilo para la página web.
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.
Conclusión
Esta guía ofrece toda la información esencial sobre cómo enviar múltiples mensajes SMS desde JavaScript utilizando el usuario HTTP de Ozeki SMS Gateway. Ahora puedes usar la API de SMS mostrada para tu aplicación JavaScript y configurar una conexión de usuario HTTP en Ozeki SMS Gateway. La solución creada será confiable y de alta velocidad. Este servicio puede hacer que el envío de mensajes sea más eficiente porque te permite entregar información valiosa a más de un compañero de trabajo a la vez.
Encontrarás muchos más artículos para ayudarte a configurar un sistema de mensajería en el sitio web de Ozeki. Asegúrate de seguir leyendo para descubrir cómo puedes usar la API de SMS en JavaScript para otros propósitos, comienza con Cómo programar un SMS en JavaScript.
Descarga Ozeki SMS Gateway ahora. ¡Pon en práctica lo que has aprendido!
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