Ako poslať SMS z JavaScriptu
Najjednoduchší spôsob, ako poslať SMS z JavaScriptu, je použiť vstavanú HTTP/Rest SMS API Ozeki SMS Gateway. Keď použijete toto API, budete posielať SMS správy odoslaním HTTP POST požiadavky na SMS bránu. HTTP POST požiadavka bude obsahovať správu formátovanú v json formáte. SMS brána pošle túto SMS príjemcovi a vráti HTTP 200 OK odpoveď na vašu požiadavku.
Ukážka JavaScript kódu na odoslanie SMS nižšie demonštruje, ako môžete poslať SMS pomocou HTTP REST SMS API Ozeki SMS Gateway pomocou knižnice JavaScript Ozeki.Libs.Rest. Táto knižnica je poskytovaná bezplatne a môžete ju používať a upravovať v akomkoľvek z vašich projektov.
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>Poslať SMS s 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>Adresa príjemcu:</b>
<input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
<b>Text:</b>
<input class="form-control" type="text" id="Text" placeholder="Ahoj svet!">
<button class="btn btn-primary" id="btnSend">
<b>ODOSLAŤ</b>
</button>
</div>
<div class="log-container">
<ul class="card log" id="log-container">
<li class="list-group-item"><b>Záznamy:</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>
Ako použiť príklad JavaScript SMS:
Tento príklad JavaScript SMS môže byť použitý v akejkoľvek webovej aplikácii. Na použitie je potrebné pridať Ozeki.Libs.Rest.js do vášho projektu. Po pridaní do projektu musíte vložiť direktívu import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; do hlavičkovej časti vášho JavaScript zdrojového kódu. To vám umožní používať triedy poskytované knižnicou Ozeki.Libs.Rest. Triedu Message môžete použiť na vytvorenie SMS. Triedu MessageApi môžete použiť na odoslanie SMS na SMS bránu. SMS brána prepošle vašu správu do mobilnej siete buď prostredníctvom bezdrôtového pripojenia alebo cez internet.
Stiahnuť SendSms.js
Zdrojový kód vysvetlený v tomto článku môže byť stiahnutý, použitý a upravený bezplatne.
Stiahnuť: SendSms.js.zip (5.3Kb)
Súbor SendSms.js.zip obsahuje knižnicu Ozeki.Libs.Rest, ktorá vám poskytuje všetky potrebné nástroje na odosielanie a prijímanie SMS správ. Nájdete tu aj projekt SendSms, ktorý obsahuje ukážkový kód, ktorý vám ukáže, ako poslať SMS. Tento ukážkový kód je uvedený nižšie.
Na odoslanie SMS z JavaScriptu:
- Nainštalujte používateľa HTTP API
- Povoľte Log komunikáciu na karte Pokročilé
- Stiahnite a nainštalujte WampServer
- Stiahnite a rozbaľte súbor SendSms.js.zip
- Vložte obsah zip súboru do priečinka \www\ wampserveru: C:\wamp64\www
- Spustite aplikáciu Ozeki SMS Gateway
- Otvorte webovú stránku zadáním http://localhost/SendSms.php do vášho prehliadača
- Po otvorení webovej stránky môžete poslať SMS kliknutím na tlačidlo Odoslať
- Skontrolujte záznamy, či bola SMS odoslaná
Inštalácia Ozeki SMS Gateway a vytvorenie používateľa HTTP API
Na odosielanie SMS z JavaScriptu je potrebné najprv nainštalovať Ozeki SMS Gateway. SMS bránu je možné nainštalovať na rovnaký počítač, kde vyvíjate svoj JavaScript kód v Visual Studio. Po inštalácii je ďalším krokom pripojenie Ozeki SMS Gateway k mobilnej sieti. Môžete vytvorenie používateľa HTTP SMS API. Vytvorte používateľa s používateľským menom "http_user" a heslom "qwe123", aby príklad fungoval bez úprav.
Po nastavení prostredia môžete spustiť svoj JavaScript kód.
URL HTTP API na odosielanie SMS z JavaScriptu
Na odosielanie SMS z JavaScriptu musí váš JavaScript odoslať HTTP požiadavku na SMS bránu. API URL je uvedené nižšie. Upozorňujeme, že IP adresa (127.0.0.1) by mala byť nahradená IP adresou vašej SMS brány. Ak je Ozeki SMS Gateway nainštalovaná na rovnakom počítači, kde beží JavaScriptová SMS aplikácia, môže to byť 127.0.0.1. Ak je nainštalovaná na inom počítači, mala by to byť IP adresa toho počítača.
http://127.0.0.1:9509/api?action=rest
Autentifikácia HTTP na odosielanie SMS z JavaScriptu
Na autentifikáciu JavaScriptového SMS klienta musíte odoslať používateľské meno a heslo v reťazci zakódovanom do base64 na server v HTTP požiadavke. Používa sa formát: base64(používateľské meno+":"+heslo). V JavaScripte môžete na toto kódovanie použiť nasledujúci kód:
// Kódovanie Base64 nájdete v súbore Ozeki.Libs.Rest.js
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;
Napríklad, ak zakódujete používateľské meno 'http_user' a heslo 'qwe123', dostanete nasledujúci reťazec zakódovaný do base64: aHR0cF91c2VyOnF3ZTEyMw==. Na odoslanie
Hlavička HTTP požiadavky na odosielanie SMS z JavaScriptu
Na odosielanie SMS správ musíte do HTTP požiadavky zahrnúť nasledujúce riadky ako hlavičky. Upozorňujeme, že obsahujeme hlavičku Content-Type a Authorization.
Content-Type: application/json Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
HTTP požiadavka na odosielanie SMS z JavaScriptu
Na odoslanie SMS vaša JavaScriptová aplikácia odošle HTTP požiadavku podobnú nižšie uvedenej. Upozorňujeme, že táto požiadavka obsahuje časť HTTP hlavičky a časť HTTP tela. HTTP telo je reťazec dát zakódovaný do JSON. Obsahuje číslo príjemcu a text správy.
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
}
]
}
HTTP odpoveď prijatá JavaScriptovým SMS príkladom
Keď SMS brána prijme túto požiadavku, vygeneruje HTTP odpoveď. HTTP odpoveď bude obsahovať stavový kód, ktorý indikuje, či bola požiadavka na odoslanie SMS úspešná alebo nie. Tiež vráti štruktúru zakódovanú do JSON, ktorá vám poskytne užitočné informácie o odoslaní správy.
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"
}
]
}
}
Pripojenie vašej SMS brány k mobilnej sieti a vytvorenie používateľského účtu HTTP API
Predpokladáme, že ste už nainštalovali Ozeki SMS Gateway, a že ste ju pripojili k mobilnej sieti. Aby ste mohli odosielať SMS na mobilný telefón z JavaScriptu, musíte nastaviť používateľský účet HTTP API v Ozeki SMS Gateway.
Vytvorenie nového používateľa (Video návod)
Toto video vám ukáže, ako nastaviť nový používateľský účet HTTP API. Začína na domovskej stránke Ozeki SMS Gateway a končí na karte Udalosti nového používateľa. Video vám ukáže, ako vytvoriť a nakonfigurovať vášho nového používateľa. Skvelé na tomto videu je, že trvá len 30 sekúnd, ale obsahuje všetky informácie, ktoré potrebujete na vytvorenie nového používateľa HTTP API.
Ako poslať SMS z JavaScriptu pomocou JavaScript SMS API (Video tutoriál)
Toto video vám ukáže, ako stiahnuť súbor SendSms.js.zip z tejto stránky. Ak si pozriete video, všimnete si, že obsah súboru SendSms.cs zip je umiestnený do priečinka \www\ servera WampServer. Uvidíte tiež, že sme spustili WampServer dvojklikom na jeho ikonu a potom sme do webového prehliadača zadali http://localhost:8080/SendSms.js.
Príklad SMS v JavaScripte: SendSms.js
Príklad kódu nižšie je súčasťou PHP súboru SendSms.php. Okrem toho uvidíte dva ďalšie súbory s názvom SendSms.css a Ozeki.Libs.Rest.js.
- Súbor Ozeki.Libs.Rest.js obsahuje všetky potrebné nástroje na odosielanie, mazanie, označovanie a prijímanie SMS správ.
- SendSms.php obsahuje javascriptový kód a niektoré hlavičky, ktoré nám umožnia odosielať HTTP požiadavky bez chýb CORS.
- SendSms.css obsahuje štýly.
Po odoslaní SMS je dobré skontrolovať svoju SMS bránu, aby ste videli, čo prijala. Protokol môžete skontrolovať otvorením podrobností HTTP používateľa v konzole na správu Ozeki SMS Gateway. Nasledujúce video vám ukáže, čo hľadať. Video začína otvoreným kódom a končí podrobnosťami odoslanej správy. Dozviete sa, ako spustiť projekt, ako vyzerá projekt počas behu a ako vyzerá súbor protokolu po jeho dokončení. Video je dlhé len 42 sekúnd a je ľahko zrozumiteľné. Nebudete mať problém s jeho sledovaním.
Ako skontrolovať, či bola SMS odoslaná do mobilnej siete
Posledným krokom pri overovaní postupu je pozrieť sa na protokoly pripojenia k mobilnej sieti. Pred odoslaním správy možno budete musieť v konfigurácii pripojenia zapnúť protokolovanie, aby ste videli protokoly. Ak je protokolovanie zapnuté, uvidíte telefónne číslo a text správy, ktorú ste odoslali.
Testovanie, či bola požiadavka prijatá (Video tutoriál)V nasledujúcom videu uvidíte, ako skontrolovať, či bol SMPP klient úspešný pri odosielaní vašej správy. Dozviete sa, ako otvoriť kartu udalostí používateľa SMPP a čo hľadať. Video je dlhé len 18 sekúnd, ale bude veľmi užitočné.
SMS prijatá na telefóne (Video tutoriál)
V nasledujúcom videu uvidíte, ako vyzerá prichádzajúca správa odoslaná z Ozeki SMS Gateway. Začína sa domovskou obrazovkou telefónu s Androidom a končí otvorenou správou. Je dlhé len 18 sekúnd a môžete vidieť celý proces prijatia správy.
Zhrnutie
Vyššie uvedený sprievodca vysvetlil kroky na odoslanie SMS z JavaScriptu. Ako bolo vidieť, Ozeki vám poskytuje všetky potrebné nástroje na doručenie správ, takže ak boli kroky dôsledne dodržané, odosielanie správ z JavaScriptu už nie je problém. Ozeki SMS Gateway zohráva obrovskú úlohu pri doručovaní, bez tohto programu by ste sa nedostali k mobilným používateľom. Je dôležité poznamenať, že Ozeki SMS Gateway funguje v každej krajine, takže správy je možné s týmto riešením odosielať medzinárodne.
Nezastavujte sa tu, prehľadajte stránku s návodmi Ozeki a dozviete sa viac o prijímaní SMS v JavaScripte.
Vašou ďalšou úlohou je stiahnuť si Ozeki SMS Gateway a nechať prácu začať!
More information
- Javascript send SMS with the HTTP rest API (code sample)
- Javascript send multiple SMS with the HTTP rest API (code sample)
- Javascript schedule SMS with the HTTP rest API (code sample)
- Javascript receive SMS with the HTTP rest API (code sample)
- Javascript delete SMS with the HTTP rest API (code sample)
- How to download the latest JavaScript SMS API library from Github