Kako poslati više SMS poruka iz JavaScripta
Najjednostavniji način za slanje više SMS poruka 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 ovu SMS poruku na telefonski broj primatelja i vratit će HTTP 200 OK odgovor na vaš zahtjev.
JavaScript kod za slanje više SMS poruka na mobilni telefon
U nastavku je prikazan JavaScript SMS kod koji demonstrira kako možete poslati više SMS poruka koristeći http rest SMS API Ozeki SMS Gatewaya uz korištenje JavaScript Ozeki.Libs.Rest biblioteke. Ova biblioteka vam je dostupna besplatno, a možete je koristiti i mijenjati u bilo kojem od vaših projekata.
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>Pošalji više SMS poruka 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="SendMultipleSms.css">
</head>
<body style="height: 100vh; width: 100vw; padding: 0; margin: 0;">
<div class="form-group form-container">
<b>ToAddress:</b>
<input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
<b>Text:</b>
<input class="form-control" type="text" id="Text" placeholder="Hello world!">
<button class="btn btn-primary" id="btnAdd">
<b>ADD</b>
</button>
<div class="card messages-container">
<ul class="list-group log" id="message_container">
<li class="list-group-item"><b>Messages:</b></li>
</ul>
</div>
<button class="btn btn-primary" id="btnSend">
<b>SEND</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>Messages:</b></li>`;
document.getElementById('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 dodavanja u projekt, morate staviti import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; 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 poruke. Klasu MessageApi možete koristiti za slanje SMS poruke prema SMS gatewayu. SMS gateway će proslijediti vašu poruku mobilnoj mreži putem bežične veze ili interneta.
Preuzmite SendMultipleSms.js
Izvorni kod objašnjen u ovom članku može se besplatno preuzeti, koristiti i mijenjati.
Preuzimanje: SendMultipleSms.js.zip (5.62Kb)
Datoteka SendMultipleSms.js.zip sadrži biblioteku Ozeki.Libs.Rest, koja vam pruža sve alate potrebne za slanje i primanje SMS poruka. U zip datoteci ćete također pronaći projekt SendMultipleSms, koji sadrži primjer koda koji pokazuje kako poslati SMS. Ovaj primjer koda je naveden ispod.
Kako poslati SMS iz JavaScripta (Jednostavne upute)
Za slanje SMS-a iz JavaScripta:
- Instalirajte HTTP API korisnika
- Omogućite bilježenje komunikacijskih događaja na kartici Napredno
- Postavite WampServer
- Preuzmite i raspakirajte datoteku SendMultipleSms.js.zip
- Stavite sadržaj zip datoteke u mapu \www\ wampservera: C:\wamp64\www
- Pokrenite aplikaciju Ozeki SMS Gateway
- Otvorite web stranicu upisivanjem http://localhost/SendMultipleSms.php u preglednik
- Nakon što ste otvorili web stranicu, možete poslati SMS klikom na gumb Pošalji
- Provjerite zapisnike kako biste vidjeli je li SMS poslan
Instalirajte Ozeki SMS Gateway i stvorite HTTP API korisnika
Da biste mogli slati SMS iz JavaScripta, prvo morate instalirati Ozeki SMS Gateway. SMS gateway se može instalirati na istom računalu na kojem 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 sučelja kako biste potvrdili da vaša mobilna mrežna veza radi. Konačni korak za pripremu vašeg okruženja je stvaranje HTTP SMS API korisničkog računa. Stvorite 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
Za slanje SMS-a iz JavaScripta, vaš JavaScript će morati poslati HTTP zahtjev SMS gatewayu. API URL je prikazan ispod. 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 na kojem 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
Za autentifikaciju JavaScript SMS klijenta, 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 kodiranje:
// Base64 enkoder možete pronaći u datoteci Ozeki.Libs.Rest.js
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;
Na primjer, ako kodirate 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
Za slanje SMS poruka, morate uključiti sljedeće retke kao zaglavlja u HTTP zahtjev. 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
Za slanje SMS-a, vaša JavaScript aplikacija će poslati HTTP zahtjev sličan onome ispod. 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: 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
}
]
}
Nakon što SMS pristupnik primi ovaj zahtjev, generirat će HTTP odgovor. HTTP odgovor sadržavat će 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 pojedinosti 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:51:13 GMT
Server: 10/10.3.123
Transfer-Encoding: chunked
{
"http_code": 200,
"response_code": "SUCCESS",
"response_msg": "Poruke su u redu za isporuku.",
"data": {
"total_count": 3,
"success_count": 3,
"failed_count": 0,
"messages": [
{
"message_id": "647a34a9-a852-f5e5-8a14-0619b6ddad1d",
"from_station": "%",
"to_address": "+36201111111",
"text": "Pozdrav svijete 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": "Pozdrav svijete 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": "Pozdrav svijete 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"
}
]
}
}
Kako poslati više SMS poruka iz JavaScripta koristeći JavaScript SMS API (Video tutorial)
Ovaj video vam pokazuje kako preuzeti datoteku SendMultipleSms.js.zip s ove stranice. Ako pogledate video, primijetit ćete da su sadržaji SendMultipleSms.cs zip datoteke smješteni u mapu \www\ WampServera. Također ćete vidjeti da pokrećemo WampServer dvostrukim klikom na njegovu ikonu, a nakon toga upisujemo http://localhost:8080/SendMultipleSms.js u web preglednik.
JavaScript SMS primjer: SendMultipleSms.js
Primjer koda u nastavku dio je datoteke SendMultipleSms.php.
Osim toga, vidjet ćete još dvije datoteke pod nazivom SendMultipleSms.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.
- SendMultipleSms.php sadrži JavaScript kod i neke zaglavlja koja će nam omogućiti slanje HTTP zahtjeva bez CORS grešaka.
- SendMultipleSms.css sadrži stilsku datoteku za web stranicu.
Kako provjeriti je li SMS prihvaćen od strane HTTP korisnika (Video tutorial)
Nakon što je SMS poslan, dobro je provjeriti vaš 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 vam 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.
Zaključak
Ovaj vodič nudi sve bitne informacije o tome kako poslati više SMS poruka iz JavaScripta koristeći HTTP korisnika Ozeki SMS pristupnika. Sada možete koristiti prikazani SMS API za svoju JavaScript aplikaciju i postaviti HTTP korisničku vezu u Ozeki SMS pristupniku. Stvoreno rješenje bit će pouzdano i brzo. Ova usluga može učiniti vaše slanje poruka učinkovitijim jer vam omogućuje dostavu vrijednih informacija više od jednog suradnika odjednom.
Na Ozeki web stranici možete pronaći mnogo više članaka koji će vam pomoći u postavljanju sustava za slanje poruka. Svakako nastavite čitati kako biste saznali kako možete koristiti JavaScript SMS API za druge svrhe, počevši s Kako zakazati SMS u JavaScriptu.
Preuzmite Ozeki SMS pristupnik sada. Stavite u praksu ono što ste naučili!
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