Como enviar múltiplos SMS a partir de Javascript
A maneira mais simples de enviar múltiplos SMS a partir de JavaScript é usar a API HTTP/Rest de SMS integrada do Ozeki SMS Gateway. Quando você usa esta API, enviará mensagens SMS através de uma requisição HTTP Post para o gateway de SMS. A requisição HTTP Post irá conter uma mensagem formatada em formato json. O gateway de SMS irá enviar este SMS para o telefone do destinatário e retornará uma resposta HTTP 200 OK para a sua requisição.
O exemplo de código JavaScript para SMS abaixo demonstra como você pode enviar múltiplas mensagens SMS usando a API REST de SMS do Ozeki SMS Gateway com a biblioteca JavaScript Ozeki.Libs.Rest. Esta biblioteca é fornecida gratuitamente, e você pode usá-la e modificá-la em qualquer um dos seus projetos.
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últiplos SMS com 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>Destinatário:</b>
<input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
<b>Texto:</b>
<input class="form-control" type="text" id="Text" placeholder="Olá mundo!">
<button class="btn btn-primary" id="btnAdd">
<b>ADICIONAR</b>
</button>
<div class="card messages-container">
<ul class="list-group log" id="message_container">
<li class="list-group-item"><b>Mensagens:</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>Logs:</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>Mensagens:</b></li>`;
document.getElementById('container').innerHTML += `<li class="list-group-item">${result}</li>`;
});
</script>
</body>
</html>
Como usar o exemplo de SMS em JavaScript:
Este exemplo de SMS em JavaScript pode ser usado em qualquer aplicação web. Para usá-lo, você deve adicionar o Ozeki.Libs.Rest.js ao seu projeto. Depois de adicioná-lo ao seu projeto, você deve colocar a diretiva import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; na seção de cabeçalho do seu código-fonte JavaScript. Isso permitirá que você use as classes fornecidas pela biblioteca Ozeki.Libs.Rest. Você pode usar a classe Message para criar o SMS. Você pode usar a classe MessageApi para enviar o SMS para o gateway de SMS. O gateway de SMS encaminhará sua mensagem para a rede móvel através de uma conexão sem fio ou pela Internet.
Baixar SendMultipleSms.js
O código-fonte explicado neste artigo pode ser baixado, usado e modificado gratuitamente.
Download: SendMultipleSms.js.zip (5.62Kb)
O que está no arquivo SendMultipleSms.js.zip?
O arquivo SendMultipleSms.js.zip contém a biblioteca Ozeki.Libs.Rest, que fornece todas as ferramentas necessárias para enviar e receber mensagens SMS. Você também encontrará o projeto SendMultipleSms no zip, que contém o código de exemplo para mostrar como enviar um SMS. Este código de exemplo está listado abaixo.
Para enviar SMS a partir de JavaScript:
- Instale um usuário de API HTTP
- Ative "Log communication events" na aba Advanced
- Configure o WampServer
- Baixe e extraia o arquivo SendMultipleSms.js.zip
- Coloque o conteúdo do arquivo zip na pasta \www\ do wampserver: C:\wamp64\www
- Inicie o aplicativo Ozeki SMS Gateway
- Abra o site digitando http://localhost/SendMultipleSms.php no seu navegador
- Após abrir o site, você pode enviar um SMS clicando no botão Enviar
- Verifique os logs para confirmar se o SMS foi enviado
Para poder enviar SMS a partir de JavaScript, primeiro você precisa instalar o Ozeki SMS Gateway. O gateway SMS pode ser instalado no mesmo computador onde você desenvolve seu código JavaScript no Visual Studio. Após a instalação, o próximo passo é conectar o Ozeki SMS Gateway à rede móvel. Você pode enviar um SMS de teste a partir da interface do Ozeki para verificar se sua conexão com a rede móvel está funcionando. O passo final para preparar seu ambiente é criar um usuário de API HTTP para SMS. Crie um usuário com o nome "http_user" e senha "qwe123" para que o exemplo funcione sem modificações.
Após configurar o ambiente, você pode executar seu código JavaScript.
URL da API HTTP para enviar SMS a partir de JavaScriptPara enviar SMS a partir de JavaScript, seu código JavaScript precisará fazer uma requisição HTTP para o gateway SMS. A URL da API é mostrada abaixo. Observe que o endereço IP (127.0.0.1) deve ser substituído pelo endereço IP do seu gateway SMS. Se o Ozeki SMS Gateway estiver instalado no mesmo computador onde o aplicativo JavaScript está sendo executado, pode ser 127.0.0.1. Se estiver instalado em um computador diferente, deve ser o endereço IP desse computador.
http://127.0.0.1:9509/api?action=rest
Para autenticar o cliente SMS em JavaScript, você precisa enviar o nome de usuário e senha em uma string codificada em base64 para o servidor em uma requisição HTTP. O formato usado é: base64(nome_de_usuário+":"+senha). Em JavaScript, você pode usar o seguinte código para fazer essa codificação:
// Você pode encontrar o codificador Base64 no arquivo Ozeki.Libs.Rest.js
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;
Por exemplo, se você codificar o nome de usuário 'http_user' e a senha 'qwe123', você obterá a seguinte string codificada em base64: aHR0cF91c2VyOnF3ZTEyMw==. Para enviar
Cabeçalho da requisição HTTP para enviar SMS a partir de JavaScriptPara enviar as mensagens SMS, você precisa incluir as seguintes linhas como cabeçalhos na requisição HTTP. Observe que incluímos um cabeçalho de tipo de conteúdo e um cabeçalho de Autorização.
Content-Type: application/json Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Para enviar o SMS, seu aplicativo JavaScript enviará uma requisição HTTP semelhante à mostrada abaixo. Observe que esta requisição contém uma parte de cabeçalho HTTP e uma parte de corpo HTTP. O corpo HTTP é uma string de dados codificada em JSON. Ela contém o número do destinatário e o texto da mensagem.
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":"Hello world 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":"Hello world 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":"Hello world 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
}
]
}
Resposta HTTP recebida pelo exemplo de SMS em JavaScript
Assim que o gateway SMS receber esta solicitação, ele gerará uma resposta HTTP. A resposta HTTP conterá um código de status, para indicar se a solicitação de envio de SMS foi bem-sucedida ou não. Também retornará uma estrutura codificada em JSON para fornecer detalhes úteis sobre o envio da mensagem.
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": "Mensagens enfileiradas 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": "Hello world 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": "Hello world 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": "Hello world 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"
}
]
}
}
Como enviar vários SMS a partir de JavaScript usando a API de SMS em JavaScript (Tutorial em vídeo)
Este vídeo mostra como baixar o arquivo SendMultipleSms.js.zip desta página. Se assistir ao vídeo, você notará que o conteúdo do SendMultipleSms.cs zip é colocado na pasta \www\ do WampServer. Você também verá que nós executamos o WampServer clicando em seu ícone duas vezes e, após isso, digitamos http://localhost:8080/SendMultipleSms.js no navegador da web.
Exemplo de SMS em JavaScript: SendMultipleSms.js
O código de exemplo abaixo faz parte do arquivo PHP SendMultipleSms.php.
Além disso, você verá outros dois arquivos chamados SendMultipleSms.css e Ozeki.Libs.Rest.js.
- O arquivo Ozeki.Libs.Rest.js contém todas as ferramentas necessárias para enviar, excluir, marcar e receber mensagens SMS.
- O SendMultipleSms.php contém o código JavaScript, e alguns cabeçalhos que nos permitirão enviar solicitações HTTP sem erros de CORS.
- O SendMultipleSms.css contém a folha de estilo para a página da web.
Como verificar se o SMS foi aceito pelo usuário HTTP (Tutorial em vídeo)
Após o envio do SMS, é uma boa ideia verificar seu gateway SMS, para ver o que foi recebido. Você pode verificar o log abrindo os detalhes do usuário HTTP no console de gerenciamento do Ozeki SMS Gateway. O vídeo a seguir mostra o que procurar. O vídeo começará com o código aberto e terminará com os detalhes da mensagem enviada. Você aprenderá como iniciar o projeto, como o projeto se parece durante a execução e como o arquivo de log fica depois. O vídeo tem apenas 42 segundos e é fácil de entender. Você não terá problemas para acompanhá-lo.
Conclusão
Este guia oferece todas as informações essenciais sobre como enviar várias mensagens SMS a partir de JavaScript usando o usuário HTTP do Ozeki SMS Gateway. Agora você pode usar a API de SMS mostrada para sua aplicação JavaScript e configurar uma conexão de usuário HTTP no Ozeki SMS Gateway. A solução criada será confiável e de alta velocidade. Este serviço pode tornar o envio de mensagens mais eficiente, pois permite entregar informações valiosas a mais de um colega de trabalho ao mesmo tempo.
Você encontrará muitos outros artigos para ajudá-lo a configurar um sistema de mensagens no site da Ozeki. Certifique-se de continuar lendo para descobrir como você pode usar a API de SMS em JavaScript para outros fins, começando com Como agendar um SMS em JavaScript.
Baixe o Ozeki SMS Gateway agora. Coloque em prática o que você aprendeu!
More information
- Enviar SMS em Javascript com a API HTTP rest (exemplo de código)
- Enviar múltiplos SMS em Javascript com a API HTTP rest (exemplo de código)
- Agendar SMS em Javascript com a API HTTP rest (exemplo de código)
- Receber SMS em Javascript com a API HTTP rest (exemplo de código)
- Excluir SMS em Javascript com a API HTTP rest (exemplo de código)
- Como baixar a biblioteca mais recente da API de SMS em JavaScript do Github