Jak odeslat více SMS z JavaScriptu

Nejjednodušší způsob, jak odeslat více SMS z JavaScriptu, je použít vestavěné HTTP/Rest SMS API Ozeki SMS Gateway. Když použijete toto API, budete odesílat SMS zprávy vydáním HTTP Post požadavku na SMS bránu. HTTP Post požadavek bude obsahovat zprávu formátovanou ve formátu json. SMS brána odešle tuto SMS příjemci a vrátí odpověď HTTP 200 OK na váš požadavek.

jak odeslat více sms z javascriptu
Obrázek 1 - Jak odeslat více SMS z JavaScriptu

JavaScript kód pro odeslání více SMS na mobil

Ukázka kódu JavaScriptu pro SMS níže ukazuje, jak můžete odeslat více SMS zpráv pomocí http rest sms api Ozeki SMS Gateway s využitím knihovny JavaScript Ozeki.Libs.Rest. Tato knihovna je poskytována zdarma a můžete ji používat a upravovat v jakémkoli z vašich projektů.

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>Odeslat více 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>Příjemce:</b>
            <input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
            <b>Text:</b>
            <input class="form-control" type="text" id="Text" placeholder="Ahoj světe!">
            <button class="btn btn-primary" id="btnAdd">
                <b>PŘIDAT</b>
            </button>
            <div class="card messages-container">
                <ul class="list-group log" id="message_container">
                    <li class="list-group-item"><b>Zprávy:</b></li>
                </ul> 
            </div>
            <button class="btn btn-primary" id="btnSend">
                    <b>ODESLAT</b>
            </button>
        </div>

        <div class="card log-container">
            <ul class="list-group log" id="container">
                <li class="list-group-item"><b>Logy:</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>Zprávy:</b></li>`;
                
                document.getElementById('container').innerHTML += `<li class="list-group-item">${result}</li>`;
            });
        </script>
    </body>
</html>

Jak použít ukázku JavaScriptu pro SMS:

Tato ukázka JavaScriptu pro SMS může být použita v jakékoli webové aplikaci. Pro použití je nutné přidat Ozeki.Libs.Rest.js do vašeho projektu. Poté, co je přidán do vašeho projektu, musíte vložit direktivu import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; do hlavičkové části vašeho zdrojového kódu JavaScriptu. To vám umožní používat třídy poskytované knihovnou Ozeki.Libs.Rest. Třídu Message můžete použít k vytvoření SMS. Třídu MessageApi můžete použít k odeslání SMS na SMS bránu. SMS brána přepošle vaši zprávu do mobilní sítě buď prostřednictvím bezdrátového připojení nebo přes internet.

Stáhnout SendMultipleSms.js

Zdrojový kód vysvětlený v tomto článku lze stáhnout, použít a upravit zdarma.
Stáhnout: SendMultipleSms.js.zip (5.62Kb)

Co je v souboru SendMultipleSms.js.zip?

Soubor SendMultipleSms.js.zip obsahuje knihovnu Ozeki.Libs.Rest, která vám poskytuje všechny nástroje potřebné k odesílání a přijímání SMS zpráv. V zipu také najdete projekt SendMultipleSms, který obsahuje ukázkový kód, který vám ukáže, jak odeslat SMS. Tento ukázkový kód je uveden níže.

send sms js directory
Obrázek 2 - Co je uvnitř SendMultipleSms.js.zip

Jak odeslat SMS z JavaScriptu (Jednoduchý návod)

Pro odeslání SMS z JavaScriptu:

  1. Nainstalujte uživatele HTTP API
  2. Povolte Logování komunikačních událostí na záložce Pokročilé
  3. Nastavte WampServer
  4. Stáhněte a rozbalte soubor SendMultipleSms.js.zip
  5. Vložte obsah zip souboru do složky \www\ wampserveru: C:\wamp64\www
  6. Spusťte aplikaci Ozeki SMS Gateway
  7. Otevřete webovou stránku zadáním http://localhost/SendMultipleSms.php do vašeho prohlížeče
  8. Po otevření webové stránky můžete odeslat SMS kliknutím na tlačítko Odeslat
  9. Zkontrolujte logy, zda byla SMS odeslána

Instalace Ozeki SMS Gateway a vytvoření uživatele HTTP API

Abyste mohli odesílat SMS z JavaScriptu, nejprve musíte nainstalovat Ozeki SMS Gateway. SMS bránu lze nainstalovat na stejný počítač, kde vyvíjíte svůj JavaScriptový kód ve Visual studiu. Po instalaci je dalším krokem připojení Ozeki SMS Gateway k mobilní síti. Můžete odeslat testovací SMS z Ozeki GUI a ověřit, že vaše připojení k mobilní síti funguje. Posledním krokem k přípravě vašeho prostředí je vytvoření uživatele HTTP SMS API. Vytvořte uživatele s uživatelským jménem "http_user" a heslem "qwe123", aby ukázkový kód fungoval bez úprav.

Po nastavení prostředí můžete spustit svůj JavaScriptový kód.

URL HTTP API pro odesílání SMS z JavaScriptu

Pro odeslání SMS z JavaScriptu bude váš JavaScript muset odeslat HTTP požadavek na SMS bránu. API URL je uvedeno níže. Poznámka: IP adresa (127.0.0.1) by měla být nahrazena IP adresou vaší SMS brány. Pokud je Ozeki SMS Gateway nainstalována na stejném počítači, kde běží JavaScriptová SMS aplikace, může to být 127.0.0.1. Pokud je nainstalována na jiném počítači, měla by to být IP adresa tohoto počítače. 

http://127.0.0.1:9509/api?action=rest

HTTP autentizace pro odesílání SMS z JavaScriptu

Pro ověření JavaScriptového SMS klienta musíte odeslat uživatelské jméno a heslo v base64 kódovaném řetězci na server v HTTP požadavku. Použitý formát je: base64(username+":"+password). V JavaScriptu můžete pro toto kódování použít následující kód: 

// Base64 enkodér najdete v souboru Ozeki.Libs.Rest.js 
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;

Například, pokud zakódujete uživatelské jméno 'http_user' a heslo 'qwe123', získáte následující base64 kódovaný řetězec: aHR0cF91c2VyOnF3ZTEyMw==. Pro odeslání

Hlavička HTTP požadavku pro odeslání SMS z JavaScriptu

Pro odeslání SMS zpráv musíte do HTTP požadavku zahrnout následující řádky jako hlavičky. Poznámka: Zahrnujeme hlavičku Content-Type a Authorization. 

Content-Type: application/json
Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==

HTTP požadavek pro odeslání SMS z JavaScriptu

Pro odeslání SMS vaše JavaScriptová aplikace odešle HTTP požadavek podobný tomu níže. Poznámka: Tento požadavek obsahuje část HTTP hlavičky a část HTTP těla. HTTP tělo je řetězec dat kódovaný v JSON. Obsahuje číslo příjemce a text zprá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 odpověď přijatá JavaScriptovou SMS ukázkou

Jakmile SMS brána obdrží tento požadavek, vygeneruje HTTP odpověď. HTTP odpověď bude obsahovat stavový kód, který indikuje, zda byl odeslání SMS úspěšné nebo ne. Také vrátí strukturu zakódovanou v JSONu, která vám poskytne užitečné detaily o odeslání zprá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": "Zprávy zařazeny k odeslání.",
	"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"
	    }
	  ]
	}
}

Jak odeslat více SMS z JavaScriptu pomocí JavaScriptové SMS API (Video návod)

Toto video vám ukáže, jak stáhnout soubor SendMultipleSms.js.zip z této stránky. Pokud video sledujete, všimnete si, že obsah SendMultipleSms.cs zipu je umístěn do složky \www\ WampServeru. Uvidíte také, že spouštíme WampServer dvojitým kliknutím na jeho ikonu a poté zadáme http://localhost:8080/SendMultipleSms.js do webového prohlížeče.

Video 1 - Jak stáhnout a spustit ukázkový projekt (Video návod)

JavaScriptová SMS ukázka: SendMultipleSms.js

Ukázkový kód níže je součástí souboru SendMultipleSms.php. Kromě toho uvidíte další dva soubory nazvané SendMultipleSms.css a Ozeki.Libs.Rest.js.

  • Soubor Ozeki.Libs.Rest.js obsahuje všechny potřebné nástroje pro odesílání, mazání, označování a přijímání SMS zpráv.
  • SendMultipleSms.php obsahuje javascriptový kód a některé hlavičky, které nám umožní odesílat HTTP požadavky bez chyb CORS.
  • SendMultipleSms.css obsahuje stylopisy pro webovou stránku.

Obrázek 3 - SendMultipleSms.php

Jak ověřit, že SMS byla přijata HTTP uživatelem (Video návod)

Po odeslání SMS je dobré zkontrolovat vaši SMS bránu, abyste viděli, co přijala. Protokol můžete zkontrolovat otevřením detailů HTTP uživatele v konzoli pro správu Ozeki SMS Gateway. Následující video vám ukáže, na co se zaměřit. Video začne otevřeným kódem a skončí detaily odeslané zprávy. Dozvíte se, jak projekt spustit, jak projekt vypadá během běhu a jak vypadá protokol po odeslání. Video je dlouhé pouze 42 sekund a je snadno srozumitelné. Nebudete mít problém jej sledovat.

Video 2 - Jak odeslat SMS pomocí výše uvedeného JavaScriptového kódu (Video návod)

Závěr

Tento průvodce poskytuje všechny základní informace o tom, jak odeslat více SMS zpráv z JavaScriptu pomocí HTTP uživatele Ozeki SMS Gateway. Nyní můžete použít zobrazené SMS API pro vaši JavaScriptovou aplikaci a nastavit připojení HTTP uživatele v Ozeki SMS Gateway. Vytvořené řešení bude spolehlivé a vysokorychlostní. Tato služba může učinit vaše odesílání zpráv efektivnějším, protože umožňuje doručit důležité informace více kolegům najednou.

Na webu Ozeki najdete mnoho dalších článků, které vám pomohou nastavit systém zasílání zpráv. Nezapomeňte pokračovat ve čtení, abyste zjistili, jak můžete použít JavaScriptové SMS API pro další účely, začněte s Jak naplánovat SMS v JavaScriptu.

Stáhněte si Ozeki SMS Gateway nyní. Uveďte do praxe to, co jste se naučili!

More information