Cum să trimiți mai multe SMS-uri din Javascript

Cea mai simplă metodă de a trimite mai multe SMS-uri din JavaScript este utilizarea API-ului HTTP/Rest SMS încorporat al Ozeki SMS Gateway. Când folosești acest API, vei 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 ta.

cum să trimiți mai multe sms-uri din javascript
Figura 1 - Cum să trimiți mai multe SMS-uri din Javascript

Cod JavaScript pentru a trimite mai multe SMS-uri pe mobil

Exemplul de cod JavaScript pentru SMS de mai jos demonstrează cum poți trimite mai multe mesaje SMS folosind API-ul http rest sms al Ozeki SMS Gateway cu ajutorul bibliotecii JavaScript Ozeki.Libs.Rest. Această bibliotecă este oferită gratuit și o poți folosi și modifica în oricare dintre proiectele tale.

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>Trimite mai multe 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="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>

Cum să folosești exemplul JavaScript pentru SMS:

Acest exemplu JavaScript pentru SMS poate fi folosit în orice aplicație web. Pentru a-l utiliza, trebuie să adaugi Ozeki.Libs.Rest.js în proiectul tău. După ce este adăugat în proiect, trebuie să introduci directiva import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; în secțiunea de antet a codului sursă JavaScript. Acest lucru îți va permite să folosești clasele furnizate de biblioteca Ozeki.Libs.Rest. Poți folosi clasa Message pentru a crea SMS-ul. Poți folosi clasa MessageApi pentru a trimite SMS-ul către gateway-ul SMS. Gateway-ul SMS va transmite mesajul tău către rețeaua mobilă fie printr-o conexiune fără fir, fie prin Internet.

Descarcă SendMultipleSms.js

Codul sursă explicat în acest articol poate fi descărcat, folosit și modificat gratuit.
Descarcă: SendMultipleSms.js.zip (5.62Kb)

Ce conține fișierul SendMultipleSms.js.zip?

Fișierul SendMultipleSms.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 SendMultipleSms î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.

send sms js directory
Figura 2 - Ce conține SendMultipleSms.js.zip

Cum să trimiți SMS din JavaScript (Ghid simplu)

Pentru a trimite SMS din JavaScript:

  1. Instalați un utilizator HTTP API
  2. Activați Log communication events în fila Advanced
  3. Configurați WampServer
  4. Descărcați, apoi extrageți fișierul SendMultipleSms.js.zip
  5. Puneți conținutul fișierului zip în folderul \www\ al wampserver: C:\wamp64\www
  6. Lansați aplicația Ozeki SMS Gateway
  7. Deschideți site-ul tastând http://localhost/SendMultipleSms.php în browser
  8. După ce ați deschis site-ul, puteți trimite un SMS făcând clic pe butonul Send
  9. Verificați jurnalele 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 cont de utilizator HTTP SMS API. Creați un utilizator cu numele de utilizator "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 API HTTP pentru a trimite SMS din JavaScript

Pentru a trimite SMS din JavaScript, codul JavaScript va trebui să trimită 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 dvs. SMS. Dacă Ozeki SMS Gateway este instalat pe același computer unde rulează aplicația JavaScript 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
Autentificare HTTP pentru a trimite SMS din JavaScript

Pentru a autentifica clientul JavaScript 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ă codificare: 

// 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

Antet cerere 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 Content-Type și un antet Authorization. 

Content-Type: application/json
Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Cerere 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 de antet HTTP și o parte de corp 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: 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
		}
	]
}

Odată ce gateway-ul SMS primește această solicitare, va genera un răspuns HTTP. Răspunsul HTTP va conține un cod de stare, pentru a indica dacă trimiterea SMS a fost reușită sau nu. De asemenea, va returna o structură codificată în 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:51:13 GMT
Server: 10/10.3.123
Transfer-Encoding: chunked

{
	"http_code": 200,
	"response_code": "SUCCESS",
	"response_msg": "Messages queued for delivery.",
	"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"
	    }
	  ]
	}
}
Cum să trimiți mai multe SMS-uri din JavaScript folosind API-ul SMS JavaScript (Tutorial video)

Acest videoclip vă arată cum să descărcați fișierul SendMultipleSms.js.zip de pe această pagină. Dacă urmăriți videoclipul, veți observa că conținutul arhivei SendMultipleSms.cs este plasat în folderul \www\ al WampServer. De asemenea, veți vedea că pornim WampServer dând dublu clic pe iconița sa, iar apoi introducem http://localhost:8080/SendMultipleSms.js în browserul web.

Video 1 - Cum să descărcați și să rulați proiectul exemplu (Tutorial video)

Exemplu JavaScript SMS: SendMultipleSms.js

Codul exemplu de mai jos face parte din fișierul PHP SendMultipleSms.php. Pe lângă acesta, veți vedea alte două fișiere numite SendMultipleSms.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.
  • SendMultipleSms.php conține codul JavaScript, precum și câteva anteturi care ne vor permite să trimitem solicitări HTTP fără erori CORS.
  • SendMultipleSms.css conține fișierul de stil pentru pagina web.

Figura 3 - SendMultipleSms.php

Cum să verificați dacă SMS-ul a fost acceptat de utilizatorul HTTP (Tutorial video)

După ce SMS-ul a fost trimis, este o idee bună 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ă aceea. Videoclipul durează doar 42 de secunde și este ușor de înțeles. Nu veți avea probleme să-l urmăriți.

Video 2 - Cum să trimiteți SMS cu codul JavaScript de mai sus (Tutorial video)

Concluzie

Acest ghid oferă toate informațiile esențiale despre cum să trimiteți mai multe mesaje SMS din JavaScript folosind utilizatorul HTTP al Ozeki SMS Gateway. Acum puteți folosi API-ul SMS prezentat pentru aplicația dvs. JavaScript și pentru a configura o conexiune de utilizator HTTP în Ozeki SMS Gateway. Soluția creată va fi fiabilă și de mare viteză. Acest serviciu poate face trimiterea mesajelor dvs. mai eficientă, deoarece vă permite să livrați informații valoroase mai multor colegi simultan.

Găsiți multe alte articole care vă ajută să configurați un sistem de mesagerie pe site-ul Ozeki. Asigurați-vă că continuați să citiți pentru a afla cum puteți utiliza API-ul SMS JavaScript în alte scopuri, începând cu Cum să programați un SMS în JavaScript.

Descărcați acum Ozeki SMS Gateway. Puneți în practică ceea ce ați învățat!

More information