Ako poslať viacero SMS z JavaScriptu

Najjednoduchší spôsob, ako poslať viacero SMS z JavaScriptu, je použiť vstavané HTTP/Rest SMS API Ozeki SMS Gateway. Keď použijete toto API, budete posielať SMS správy vydaní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 na príjemcove telefónne číslo a vráti HTTP 200 OK odpoveď na vašu požiadavku.

ako poslať viacero sms z javascriptu
Obrázok 1 - Ako poslať viacero SMS z JavaScriptu

JavaScript kód na odoslanie viacerých SMS na mobil

Ukážka JavaScript kódu pre SMS nižšie demonštruje, ako môžete poslať viacero SMS správ pomocou http rest sms api Ozeki SMS Gateway s použitím 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.

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>Poslať viacero 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="SendMultipleSms.css">
    </head>
    <body style="height: 100vh; width: 100vw; padding: 0; margin: 0;">

        <div class="form-group form-container">
            <b>Príjemca:</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="btnAdd">
                <b>PRIDAŤ</b>
            </button>
            <div class="card messages-container">
                <ul class="list-group log" id="message_container">
                    <li class="list-group-item"><b>Správy:</b></li>
                </ul> 
            </div>
            <button class="btn btn-primary" id="btnSend">
                    <b>ODOSLAŤ</b>
            </button>
        </div>

        <div class="card log-container">
            <ul class="list-group log" id="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 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>Správy:</b></li>`;
                
                document.getElementById('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ť SendMultipleSms.js

Zdrojový kód vysvetlený v tomto článku je možné stiahnuť, použiť a upravovať bezplatne.
Stiahnuť: SendMultipleSms.js.zip (5.62Kb)

Čo obsahuje súbor SendMultipleSms.js.zip?

Súbor SendMultipleSms.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. V zip súbore nájdete aj projekt SendMultipleSms, ktorý obsahuje ukážkový kód, ktorý vám ukáže, ako odoslať SMS. Tento ukážkový kód je uvedený nižšie.

send sms js directory
Obrázok 2 - Čo je vo vnútri SendMultipleSms.js.zip

Ako odoslať SMS z JavaScriptu (Jednoduchý návod)

Na odoslanie SMS z JavaScriptu:

  1. Nainštalujte používateľa HTTP API
  2. Povoľte zaznamenávanie komunikačných udalostí na karte Pokročilé
  3. Nastavte WampServer
  4. Stiahnite si a rozbaľte súbor SendMultipleSms.js.zip
  5. Vložte obsah zip súboru do priečinka \www\ wampserveru: C:\wamp64\www
  6. Spustite aplikáciu Ozeki SMS Gateway
  7. Otvorte webovú stránku zadaním http://localhost/SendMultipleSms.php do vášho prehliadača
  8. Po otvorení webovej stránky môžete odoslať SMS kliknutím na tlačidlo Odoslať
  9. Skontrolujte záznamy, či bola SMS odoslaná
Nainštalujte Ozeki SMS Gateway a vytvorte 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 rovnakom počítači, kde vyvíjate svoj JavaScriptový kód v aplikácii Visual Studio. Po inštalácii je ďalším krokom pripojenie Ozeki SMS Gateway k mobilnej sieti. Môžete odoslať testovaciu SMS z grafického rozhrania Ozeki, aby ste overili, že vaše pripojenie k mobilnej sieti funguje. Posledným krokom pri príprave vášho prostredia je vytvorenie používateľského účtu 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 JavaScriptový kód.

URL adresa HTTP API na odosielanie SMS z JavaScriptu

Na odosielanie SMS z JavaScriptu bude váš JavaScript musieť 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
Autentizácia HTTP na odosielanie SMS z JavaScriptu

Na overenie 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: 

// Base64 kódovač 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 odoslanie SMS z JavaScriptu

Na odoslanie SMS správ musíte do HTTP požiadavky zahrnúť nasledujúce riadky ako hlavičky. Upozorňujeme, že obsahujeme hlavičku typu obsahu a autorizačnú hlavičku. 

Content-Type: application/json
Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
HTTP požiadavka na odoslanie SMS z JavaScriptu

Na odoslanie SMS vaša JavaScriptová aplikácia odošle HTTP požiadavku podobnú tej, ktorá je uvedená nižšie. 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: 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
		}
	]
}

HTTP odpoveď prijatá JavaScriptovou SMS ukážkou

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. Taktiež vráti štruktúru zakódovanú v JSON, ktorá 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:51:13 GMT
Server: 10/10.3.123
Transfer-Encoding: chunked

{
	"http_code": 200,
	"response_code": "SUCCESS",
	"response_msg": "Správy zaradené do fronty na odoslanie.",
	"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"
	    }
	  ]
	}
}
Ako odoslať viacero SMS z JavaScriptu pomocou JavaScriptovej SMS API (Video návod)

Toto video vám ukáže, ako si stiahnuť súbor SendMultipleSms.js.zip z tejto stránky. Ak si video pozriete, všimnete si, že obsah súboru SendMultipleSms.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/SendMultipleSms.js.

Video 1 - Ako stiahnuť a spustiť príkladový projekt (Video návod)

JavaScriptová SMS ukážka: SendMultipleSms.js

Príklad kódu nižšie je súčasťou PHP súboru SendMultipleSms.php. Okrem toho uvidíte ďalšie dva súbory s názvom SendMultipleSms.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.
  • SendMultipleSms.php obsahuje javascriptový kód a niektoré hlavičky, ktoré nám umožnia odosielať HTTP požiadavky bez chýb CORS.
  • SendMultipleSms.css obsahuje štýly pre webovú stránku.

Obrázok 3 - SendMultipleSms.php

Ako skontrolovať, že SMS bola prijatá HTTP používateľom (Video návod)

Po odoslaní SMS je dobré skontrolovať vašu SMS bránu, aby ste videli, čo prijala. Log môžete skontrolovať otvorením detailov HTTP používateľa v konzole na správu Ozeki SMS brány. Nasledujúce video vám ukáže, čo hľadať. Video začína otvoreným kódom a končí detailami odoslanej správy. Naučíte sa, ako spustiť projekt, ako projekt vyzerá počas behu a ako vyzerá log súbor po odoslaní. Video je dlhé len 42 sekúnd a je ľahko zrozumiteľné. Nebudete mať problém s jeho sledovaním.

Video 2 - Ako odoslať SMS pomocou vyššie uvedeného JavaScriptového kódu (Video návod)

Záver

Tento návod poskytuje všetky základné informácie o tom, ako odoslať viacero SMS správ z JavaScriptu pomocou HTTP používateľa Ozeki SMS brány. Teraz môžete použiť zobrazenú SMS API pre vašu JavaScriptovú aplikáciu a nastaviť HTTP používateľské pripojenie v Ozeki SMS bráne. Vytvorené riešenie bude spoľahlivé a vysokorýchlostné. Táto služba môže urobiť vaše odosielanie správ efektívnejším, pretože vám umožňuje doručiť dôležité informácie viacerým kolegom naraz.

Na webovej stránke Ozeki nájdete mnoho ďalších článkov, ktoré vám pomôžu nastaviť systém na odosielanie správ. Určite si prečítajte aj ďalšie články, aby ste zistili, ako môžete použiť Ako naplánovať SMS v JavaScripte.

Stiahnite si Ozeki SMS bránu teraz. Uvediete do praxe to, čo ste sa naučili!

More information