Cum să trimiți SMS din Javascript
Cea mai simplă metodă de a trimite SMS din JavaScript este utilizarea API-ului HTTP/Rest SMS încorporat al Ozeki SMS Gateway. Când utilizați acest API, veți trimite mesaje SMS prin efectuarea unei cereri HTTP Post către gateway-ul SMS. Cererea HTTP Post va conține un mesaj formatat în format json. Gateway-ul SMS va trimite acest SMS către telefonul destinatar și va returna un răspuns HTTP 200 OK la cererea dumneavoastră.
Exemplul de cod JavaScript pentru SMS de mai jos demonstrează cum puteți trimite SMS folosind API-ul http rest sms al Ozeki SMS Gateway cu ajutorul bibliotecii JavaScript Ozeki.Libs.Rest. Această bibliotecă vă este oferită gratuit și o puteți utiliza și modifica în oricare dintre proiectele dumneavoastră.
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>Trimite SMS cu 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>Destinatar:</b>
<input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
<b>Text:</b>
<input class="form-control" type="text" id="Text" placeholder="Salut lume!">
<button class="btn btn-primary" id="btnSend">
<b>TRIMITE</b>
</button>
</div>
<div class="log-container">
<ul class="card log" id="log-container">
<li class="list-group-item"><b>Jurnal:</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>
Cum să utilizați exemplul de SMS în JavaScript:
Acest exemplu de SMS în JavaScript poate fi utilizat în orice aplicație web. Pentru a-l utiliza, trebuie să adăugați Ozeki.Libs.Rest.js în proiectul dumneavoastră. După ce a fost adăugat în proiect, trebuie să introduceți directiva import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; în secțiunea de antet a codului sursă JavaScript. Acest lucru vă va permite să utilizați clasele furnizate de biblioteca Ozeki.Libs.Rest. Puteți utiliza clasa Message pentru a crea SMS-ul. Puteți utiliza clasa MessageApi pentru a trimite SMS-ul către gateway-ul SMS. Gateway-ul SMS va transmite mesajul dumneavoastră către rețeaua mobilă fie printr-o conexiune fără fir, fie prin Internet.
Descarcă SendSms.js
Codul sursă explicat în acest articol poate fi descărcat, utilizat și modificat gratuit.
Descarcă: SendSms.js.zip (5.3Kb)
Fișierul SendSms.js.zip conține biblioteca Ozeki.Libs.Rest, care vă oferă toate instrumentele necesare pentru a trimite și primi mesaje SMS. De asemenea, veți găsi proiectul SendSms în arhivă, care conține codul exemplu pentru a vă arăta cum să trimiteți un SMS. Acest cod exemplu este listat mai jos.
Pentru a trimite SMS din JavaScript:
- Instalați un utilizator HTTP API
- Activați Log communication events în fila Advanced
- Descărcați și instalați WampServer
- Descărcați apoi extrageți fișierul SendSms.js.zip
- Puneți conținutul fișierului zip în folderul \www\ al wampserver: C:\wamp64\www
- Lansați aplicația Ozeki SMS Gateway
- Deschideți site-ul web tastând http://localhost/SendSms.php în browser-ul dumneavoastră
- După ce ați deschis site-ul web, puteți trimite un SMS făcând clic pe butonul Trimite
- Verificați jurnalul pentru a vedea dacă SMS-ul a fost trimis
Instalați Ozeki SMS Gateway și creați un utilizator HTTP API
Pentru a putea trimite SMS din JavaScript, mai întâi trebuie să instalați Ozeki SMS Gateway. Gateway-ul SMS poate fi instalat pe același computer unde dezvoltați codul JavaScript în Visual Studio. După instalare, următorul pas este să conectați Ozeki SMS Gateway la rețeaua mobilă. Puteți creați un utilizator HTTP API pentru SMS. Creați un utilizator cu numele "http_user" și parola "qwe123" pentru ca exemplul să funcționeze fără modificări.
După ce mediul este configurat, puteți rula codul JavaScript.
URL-ul API HTTP pentru a trimite SMS din JavaScript
Pentru a trimite SMS din JavaScript, codul JavaScript va trebui să facă o cerere HTTP către gateway-ul SMS. URL-ul API este afișat mai jos. Rețineți că adresa IP (127.0.0.1) ar trebui să fie înlocuită cu adresa IP a gateway-ului SMS. Dacă Ozeki SMS Gateway este instalat pe același computer unde rulează aplicația JavaScript pentru SMS, aceasta poate fi 127.0.0.1. Dacă este instalat pe un computer diferit, ar trebui să fie adresa IP a acelui computer.
http://127.0.0.1:9509/api?action=rest
Autentificarea HTTP pentru a trimite SMS din JavaScript
Pentru a autentifica clientul JavaScript pentru SMS, trebuie să trimiteți numele de utilizator și parola într-un șir codat base64 către server într-o cerere HTTP. Formatul folosit este: base64(nume_utilizator+":"+parolă). În JavaScript puteți folosi următorul cod pentru a face această codare:
// Puteți găsi codificatorul Base64 în fișierul Ozeki.Libs.Rest.js
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;
De exemplu, dacă codificați numele de utilizator 'http_user' și parola 'qwe123', veți obține următorul șir codat base64: aHR0cF91c2VyOnF3ZTEyMw==. Pentru a trimite
Antetul cererii HTTP pentru a trimite SMS din JavaScript
Pentru a trimite mesajele SMS, trebuie să includeți următoarele linii ca antete în cererea HTTP. Rețineți că includem un antet pentru tipul de conținut și unul pentru autorizare.
Content-Type: application/json Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Cererea HTTP pentru a trimite SMS din JavaScript
Pentru a trimite SMS, aplicația JavaScript va trimite o cerere HTTP similară cu cea de mai jos. Rețineți că această cerere conține o parte pentru antetul HTTP și o parte pentru corpul HTTP. Corpul HTTP este un șir de date codat JSON. Acesta conține numărul destinatarului și textul mesajului.
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
}
]
}
Răspunsul HTTP primit de exemplul JavaScript pentru SMS
Odată ce gateway-ul SMS primește această cerere, va genera un răspuns HTTP. Răspunsul HTTP va conține un cod de stare, pentru a indica dacă cererea de trimitere a SMS-ului a fost reușită sau nu. De asemenea, va returna o structură codată JSON pentru a vă oferi detalii utile despre trimiterea mesajului.
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"
}
]
}
}
Conectați-vă gateway-ul SMS la rețeaua mobilă și creați un cont de utilizator HTTP API
Presupunem că ați instalat deja Ozeki SMS Gateway și ați conectat la rețeaua mobilă. Pentru a putea trimite SMS către un telefon mobil din JavaScript, trebuie să configurați un cont de utilizator HTTP API în Ozeki SMS Gateway.
Creați un utilizator nou (Tutorial video)
Acest videoclip vă prezintă cum să configurați un cont nou de utilizator HTTP API. Acesta va începe cu pagina de start a Ozeki SMS Gateway și se va încheia cu fila Evenimente a noului utilizator. Videoclipul vă va arăta cum să creați și să configurați noul utilizator. Marele lucru la acest videoclip este că durează doar 30 de secunde, dar conține toate informațiile necesare pentru a crea un nou utilizator HTTP API.
Cum să trimiți SMS din JavaScript folosind API-ul SMS JavaScript (Tutorial video)
Acest videoclip vă arată cum să descărcați fișierul SendSms.js.zip de pe această pagină. Dacă urmăriți videoclipul, veți observa că conținutul arhivei SendSms.cs este plasat în folderul \www\ al WampServer. De asemenea, veți vedea că pornim WampServer dând dublu clic pe pictograma sa, iar după aceasta introducem http://localhost:8080/SendSms.js în browserul web.
Exemplu SMS în JavaScript: SendSms.js
Codul exemplu de mai jos face parte din fișierul PHP SendSms.php.
În plus, veți vedea alte două fișiere numite SendSms.css și Ozeki.Libs.Rest.js.
- Fișierul Ozeki.Libs.Rest.js conține toate instrumentele necesare pentru a trimite, șterge, marca și primi mesaje SMS.
- SendSms.php conține codul JavaScript și câteva antete care ne vor permite să trimitem cereri HTTP fără erori CORS.
- SendSms.css conține fișierul de stiluri.
După ce SMS-ul a fost trimis, este bine să verificați gateway-ul SMS, pentru a vedea ce a primit. Puteți verifica jurnalul deschizând detaliile utilizatorului HTTP din consola de management Ozeki SMS Gateway. Următorul videoclip vă arată ce să căutați. Videoclipul va începe cu codul deschis și se va încheia cu detaliile mesajului trimis. Veți învăța cum să lansați proiectul, cum arată proiectul în timpul rulării și cum arată fișierul jurnal după aceasta. Videoclipul durează doar 42 de secunde și este ușor de înțeles. Nu veți avea probleme în a-l urmări.
Cum să verificați dacă SMS-ul a fost trimis în rețeaua mobilă
Pasul final în verificarea procedurii este să verificați jurnalele conexiunii la rețeaua mobilă. Poate fi necesar să activați înregistrarea în configurația conexiunii înainte de a trimite mesajul pentru a vedea jurnalele. Dacă înregistrarea este activată, veți vedea numărul de telefon și textul mesajului trimis.
Testați dacă cererea a fost acceptată (Tutorial video)În următorul videoclip, veți vedea cum să verificați dacă clientul SMPP a reușit să trimită mesajul dvs. Veți învăța cum să deschideți fila de evenimente a utilizatorului SMPP și ce să căutați. Videoclipul durează doar 18 secunde, dar va fi foarte util.
SMS primit pe telefon (Tutorial video)
În următorul videoclip, veți vedea cum arată un mesaj primit care a fost trimis de la Ozeki SMS Gateway. Acesta va începe cu ecranul principal al unui telefon Android și se va încheia cu mesajul deschis. Durează doar 18 secunde și puteți vedea întregul proces de primire a unui mesaj.
Rezumat
Ghidul de mai sus a explicat pașii pentru trimiterea SMS-urilor din JavaScript. După cum s-a putut observa, Ozeki vă oferă toate instrumentele necesare pentru livrarea mesajelor, așa că, dacă pașii au fost urmați cu atenție, trimiterea mesajelor din JavaScript nu mai este o problemă. Ozeki SMS Gateway joacă un rol enorm în livrare, fără acest program nu ați putea ajunge la utilizatorii mobili. Este important de menționat că Ozeki SMS Gateway funcționează în orice țară, astfel încât mesajele pot fi trimise internațional cu această soluție.
Nu încheiați citirea aici, navigați pe pagina de tutoriale Ozeki și aflați despre primirea SMS-urilor în JavaScript.
Următorul lucru pe care trebuie să-l faceți este să descărcați Ozeki SMS Gateway și să începeți lucrul!
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