Kako poslati SMS iz JavaScripta
Najjednostavniji način za slanje SMS-a iz JavaScripta je korištenje ugrađenog HTTP/Rest SMS API-ja Ozeki SMS Gatewaya. Kada koristite ovaj API, slanje SMS poruka vršite putem HTTP Post zahtjeva prema SMS gatewayu. HTTP Post zahtjev će sadržavati poruku formatiranu u json formatu. SMS gateway će poslati ovaj SMS na telefonski broj primatelja i vratit će HTTP 200 OK odgovor na vaš zahtjev.
JavaScript kod za slanje SMS-a na mobilni telefon
JavaScript SMS primjer koda u nastavku pokazuje kako možete poslati SMS koristeći http rest SMS API Ozeki SMS Gatewaya s JavaScript Ozeki.Libs.Rest bibliotekom. Ova biblioteka vam je dostupna besplatno i možete je koristiti i mijenjati u bilo kojem od vaših projekata.
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>Pošalji SMS s Ozeki SMS Gatewayom</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>Na adresu:</b>
<input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
<b>Tekst:</b>
<input class="form-control" type="text" id="Text" placeholder="Pozdrav svijete!">
<button class="btn btn-primary" id="btnSend">
<b>POŠALJI</b>
</button>
</div>
<div class="log-container">
<ul class="card log" id="log-container">
<li class="list-group-item"><b>Dnevnik:</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>
Kako koristiti JavaScript SMS primjer:
Ovaj JavaScript SMS primjer može se koristiti u bilo kojoj web aplikaciji. Za korištenje morate dodati Ozeki.Libs.Rest.js u svoj projekt. Nakon što je dodan u vaš projekt, morate staviti import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; directivu u zaglavlje vašeg JavaScript izvornog koda. To će vam omogućiti korištenje klasa koje pruža Ozeki.Libs.Rest biblioteka. Možete koristiti klasu Message za kreiranje SMS-a. Možete koristiti klasu MessageApi za slanje SMS-a prema SMS gatewayu. SMS gateway će proslijediti vašu poruku mobilnoj mreži bilo putem bežične veze ili putem interneta.
Preuzmite SendSms.js
Izvorni kod objašnjen u ovom članku može se besplatno preuzeti, koristiti i mijenjati.
Preuzimanje: SendSms.js.zip (5.3Kb)
Što se nalazi u SendSms.js.zip datoteci?
SendSms.js.zip datoteka sadrži Ozeki.Libs.Rest biblioteku, koja vam daje sve potrebne alate za slanje i primanje SMS poruka. Također ćete pronaći SendSms projekt u zip datoteci, koji sadrži primjer koda koji pokazuje kako poslati SMS. Ovaj primjer koda je naveden u nastavku.
Kako poslati SMS iz JavaScripta (Jednostavne smjernice)
Za slanje SMS-a iz JavaScripta:
- Instalirajte HTTP API korisnika
- Omogućite bilježenje komunikacijskih događaja na kartici Napredno
- Preuzmite i instalirajte WampServer
- Preuzmite zatim raspakirajte SendSms.js.zip datoteku
- Stavite sadržaj zip datoteke u \www\ mapu wampservera: C:\wamp64\www
- Pokrenite Ozeki SMS Gateway aplikaciju
- Otvorite web stranicu upisivanjem http://localhost/SendSms.php u vaš preglednik
- Nakon što ste otvorili web stranicu, možete poslati SMS klikom na gumb Pošalji
- Provjerite dnevnik kako biste vidjeli je li SMS poslan
Da biste mogli slati SMS iz JavaScripta, prvo morate instalirati Ozeki SMS Gateway. SMS gateway se može instalirati na istom računalu gdje razvijate svoj JavaScript kod u Visual studiju. Nakon instalacije, sljedeći korak je povezivanje Ozeki SMS Gatewaya s mobilnom mrežom. Možete poslati testni SMS iz Ozeki GUI-a kako biste potvrdili da vaša mobilna mrežna veza radi. Posljednji korak za pripremu vašeg okruženja je kreiranje HTTP SMS API korisničkog računa. Kreirajte korisnika s korisničkim imenom "http_user" i lozinkom "qwe123" kako bi primjer radio bez izmjena.
Nakon što je okruženje postavljeno, možete pokrenuti svoj JavaScript kod.
HTTP API URL za slanje SMS-a iz JavaScripta
Da biste poslali SMS iz JavaScripta, vaš JavaScript će morati poslati HTTP zahtjev SMS gatewayu. API URL je prikazan u nastavku. Imajte na umu da IP adresa (127.0.0.1) treba biti zamijenjena IP adresom vašeg SMS gatewaya. Ako je Ozeki SMS Gateway instaliran na istom računalu gdje se pokreće JavaScript SMS aplikacija, ovo može biti 127.0.0.1. Ako je instaliran na drugom računalu, treba biti IP adresa tog računala.
http://127.0.0.1:9509/api?action=rest
HTTP autentifikacija za slanje SMS-a iz JavaScripta
Da biste autentificirali JavaScript SMS klijent, morate poslati korisničko ime i lozinku u base64 kodiranom stringu na poslužitelj u HTTP zahtjevu. Korišteni format je: base64(korisničko_ime+":"+lozinka). U JavaScriptu možete koristiti sljedeći kod za ovu enkodaciju:
// Base64 enkoder možete pronaći u datoteci Ozeki.Libs.Rest.js
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;
Na primjer, ako enkodirate korisničko ime 'http_user' i lozinku 'qwe123', dobit ćete sljedeći base64 kodirani string: aHR0cF91c2VyOnF3ZTEyMw==. Za slanje
HTTP zaglavlje zahtjeva za slanje SMS-a iz JavaScripta
Da biste poslali SMS poruke, morate uključiti sljedeće retke kao zaglavlja u HTTP zahtjevu. Imajte na umu da uključujemo content type i Authorization zaglavlje.
Content-Type: application/json Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
HTTP zahtjev za slanje SMS-a iz JavaScripta
Da biste poslali SMS, vaša JavaScript aplikacija će poslati HTTP zahtjev sličan onome u nastavku. Imajte na umu da ovaj zahtjev sadrži dio HTTP zaglavlja i dio HTTP tijela. HTTP tijelo je JSON kodirani podatkovni string. Sadrži broj primatelja i tekst poruke.
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 odgovor primljen od JavaScript SMS primjera
Nakon što SMS gateway primi ovaj zahtjev, generirat će HTTP odgovor. HTTP odgovor će sadržavati statusni kod, kako bi naznačio je li zahtjev za slanje SMS-a bio uspješan ili ne. Također će vratiti JSON kodiranu strukturu koja vam pruža korisne detalje o slanju poruke.
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"
}
]
}
}
Povežite svoj SMS gateway s mobilnom mrežom i kreirajte HTTP API korisnički račun
Pretpostavljamo da ste već instalirali Ozeki SMS Gateway, i da ste ga povezali s mobilnom mrežom. Kako biste mogli slati SMS na mobilni telefon iz JavaScripta, morate postaviti HTTP API korisnički račun u Ozeki SMS Gatewayu.
Kreirajte novog korisnika (Video tutorial)
Ovaj video prikazuje kako postaviti novi HTTP API korisnički račun. Počet će s početnom stranicom Ozeki SMS Gatewaya i završit će s karticom Events novog korisnika. Video će vam pokazati kako kreirati i konfigurirati vašeg novog korisnika. Sjajna stvar u vezi ovog videa je da traje samo 30 sekundi, ali sadrži sve informacije koje su vam potrebne za kreiranje novog HTTP API korisnika.
Kako poslati SMS iz JavaScripta koristeći JavaScript SMS API (Video tutorial)
Ovaj video pokazuje kako preuzeti datoteku SendSms.js.zip s ove stranice. Ako pogledate video, primijetit ćete da su sadržaji SendSms.cs zip datoteke smješteni u \www\ mapu WampServera. Također ćete vidjeti da pokrećemo WampServer dvostrukim klikom na njegovu ikonu, a nakon toga upisujemo http://localhost:8080/SendSms.js u web preglednik.
JavaScript SMS primjer: SendSms.js
Primjer koda u nastavku dio je SendSms.php PHP datoteke. Osim toga, vidjet ćete još dvije datoteke pod nazivom SendSms.css i Ozeki.Libs.Rest.js.
- Datoteka Ozeki.Libs.Rest.js sadrži sve potrebne alate za slanje, brisanje, označavanje i primanje SMS poruka.
- SendSms.php sadrži JavaScript kod i neke zaglavlja koja će nam omogućiti slanje HTTP zahtjeva bez CORS grešaka.
- SendSms.css sadrži stilsku tablicu.
Kako provjeriti je li SMS prihvaćen od strane HTTP korisnika (Video tutorial)
Nakon što je SMS poslan, dobro je provjeriti svoj SMS pristupnik kako biste vidjeli što je primio. Dnevnik možete provjeriti otvaranjem detalja HTTP korisnika iz upravljačke konzole Ozeki SMS pristupnika. Sljedeći video pokazuje što trebate tražiti. Video će započeti s otvorenim kodom i završiti s detaljima poslane poruke. Naučit ćete kako pokrenuti projekt, kako projekt izgleda tijekom rada i kako izgleda datoteka dnevnika nakon toga. Video traje samo 42 sekunde i lako ga je razumjeti. Nećete imati problema s praćenjem.
Kako provjeriti je li SMS poslan na mobilnu mrežu
Posljednji korak u provjeri postupka je pogledati dnevnike veze s mobilnom mrežom. Možda ćete morati uključiti bilježenje u konfiguraciji veze prije slanja poruke kako biste vidjeli dnevnike. Ako je bilježenje uključeno, vidjet ćete telefonski broj i tekst poruke koju ste poslali.
Testirajte je li zahtjev prihvaćen (Video tutorial)
U sljedećem videu vidjet ćete kako provjeriti je li SMPP klijent uspješno poslao vašu poruku. Naučit ćete kako otvoriti karticu događaja SMPP korisnika i što trebate tražiti. Video traje samo 18 sekundi, ali će biti vrlo koristan.
SMS primljen na telefonu (Video tutorial)
U sljedećem videu vidjet ćete kako izgleda dolazna poruka poslana s Ozeki SMS pristupnika. Počet će s početnim ekranom android telefona i završiti s otvorenom porukom. Traje samo 18 sekundi i možete vidjeti cijeli proces primanja poruke.
Sažetak
Gore navedeni vodič objasnio je korake slanja SMS-a iz JavaScripta. Kao što se vidjelo, Ozeki vam daje sve potrebne alate za isporuku poruka, pa ako su koraci pažljivo slijedeni, slanje poruka iz JavaScripta više nije problem. Ozeki SMS pristupnik igra ogromnu ulogu u isporuci, bez ovog programa ne biste mogli doći do mobilnih korisnika. Važno je napomenuti da Ozeki SMS pristupnik radi u bilo kojoj zemlji, tako da se poruke mogu slati internacionalno s ovim rješenjem.
Nemojte završiti čitanje ovdje, pregledajte Ozekijevu stranicu s tutorialima i naučite o primanju SMS-a u JavaScriptu.
Sljedeća stvar koju trebate učiniti je preuzeti Ozeki SMS pristupnik i neka počne rad!
More information
- Javascript slanje SMS-a s HTTP rest API-jem (primjer koda)
- Javascript slanje višestrukih SMS-ova s HTTP rest API-jem (primjer koda)
- Javascript zakazivanje SMS-a s HTTP rest API-jem (primjer koda)
- Javascript primanje SMS-a s HTTP rest API-jem (primjer koda)
- Javascript brisanje SMS-a s HTTP rest API-jem (primjer koda)
- Kako preuzeti najnoviju JavaScript SMS API biblioteku s Githuba