Jak odeslat SMS z JavaScriptu

Nejjednodušší způsob, jak odeslat 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 odesláním HTTP Post požadavku na SMS bránu. HTTP Post požadavek bude obsahovat zprávu ve formátu JSON. SMS brána odešle tuto SMS příjemci a vrátí HTTP 200 OK odpověď na váš požadavek.

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

Níže uvedený ukázkový kód JavaScriptu pro SMS demonstruje, jak můžete odesílat SMS 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ů.

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>Odeslat 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="SendSms.css">
    </head>
    <body>

        <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="btnSend">
                <b>ODESLAT</b>
            </button>
        </div>

        <div class="log-container">
            <ul class="card log" id="log-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 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>

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í musíte přidat Ozeki.Libs.Rest.js do vašeho projektu. Poté, co je přidána 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. Můžete použít třídu Message k vytvoření SMS. Můžete použít třídu MessageApi k odeslání SMS na SMS bránu. SMS brána přepošle vaši zprávu do mobilní sítě buď přes bezdrátové připojení nebo přes internet.

Stáhnout SendSms.js

Zdrojový kód vysvětlený v tomto článku lze stáhnout, používat a upravovat zdarma.
Stáhnout: SendSms.js.zip (5.3Kb)

Co je v souboru SendSms.js.zip?

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

odeslat sms js adresář — Obrázek 2 - Co je uvnitř SendSms.js.zip

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

Pro odeslání SMS z JavaScriptu:

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

Nainstalujte Ozeki SMS Gateway a vytvořte 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 vytvoření uživatele HTTP SMS API. Vytvořte uživatele s uživatelským jménem "http_user" a heslem "qwe123", aby příklad 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 odesílání SMS z JavaScriptu musí váš JavaScript 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 řetězci zakódovaném do base64 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í řetězec zakódovaný do base64: aHR0cF91c2VyOnF3ZTEyMw==. Pro odeslání

Hlavička HTTP požadavku pro odesílá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 odesílá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 zakódovaný v JSON. Obsahuje číslo příjemce a text zprávy.

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
		}
	]
}

HTTP odpověď přijatá JavaScriptovým SMS příkladem

Jakmile SMS brána obdrží tento požadavek, vygeneruje HTTP odpověď. HTTP odpověď bude obsahovat stavový kód, který indikuje, zda byl požadavek na odeslání SMS úspěšný nebo ne. Také vrátí strukturu zakódovanou v JSON, 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: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"
	    }
	  ]
	}
}

Připojte svou SMS bránu k mobilní síti a vytvořte uživatelský účet HTTP API

Předpokládáme, že jste již nainstalovali Ozeki SMS Gateway, a že jste ji připojili k mobilní síti. Abyste mohli odesílat SMS na mobilní telefon z JavaScriptu, musíte nastavit uživatelský účet HTTP API v Ozeki SMS Gateway.

Vytvoření nového uživatele (Video návod)

Toto video vám ukáže, jak nastavit nový uživatelský účet HTTP API. Začíná domovskou stránkou Ozeki SMS Gateway a končí záložkou Události nového uživatele. Video vám ukáže, jak vytvořit a nakonfigurovat vašeho nového uživatele. Skvělé na tomto videu je, že trvá pouze 30 sekund, ale obsahuje všechny informace, které potřebujete k vytvoření nového uživatele HTTP API.

Video 1 - Jak nastavit uživatelský účet HTTP API (Video návod)

Jak odeslat SMS z JavaScriptu pomocí JavaScript SMS API (Video návod)

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

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

JavaScript SMS příklad: SendSms.js

Níže uvedený příklad kódu je součástí souboru SendSms.php. Kromě toho uvidíte další dva soubory s názvem SendSms.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.
SendSms.php obsahuje javascriptový kód a některé hlavičky, které nám umožní odesílat HTTP požadavky bez chyb CORS.
SendSms.css obsahuje styly.

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

Po odeslání SMS je dobré zkontrolovat svou SMS bránu, abyste viděli, co přijala. Protokol můžete zkontrolovat otevřením podrobností 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čí podrobnostmi o odeslané zprávě. Naučíte se, jak projekt spustit, jak projekt vypadá během běhu a jak vypadá soubor protokolu po odeslání. Video je dlouhé pouze 42 sekund a je snadno srozumitelné. Nebudete mít problém jej sledovat.

Video 3 - Odesílání SMS pomocí výše uvedeného JavaScriptového kódu (Video návod)

Jak ověřit, že SMS byla odeslána do mobilní sítě

Posledním krokem při ověřování postupu je podívat se na protokoly připojení k mobilní síti. Možná budete muset před odesláním zprávy zapnout protokolování v konfiguraci připojení, abyste viděli protokoly. Pokud je protokolování povoleno, uvidíte telefonní číslo a text odeslané zprávy.

Test, zda byl požadavek přijat (Video návod)

V následujícím videu uvidíte, jak zjistit, zda byl SMPP klient úspěšný při odesílání vaší zprávy. Naučíte se, jak otevřít kartu událostí SMPP uživatele a na co se zaměřit. Video je dlouhé pouze 18 sekund, ale bude velmi užitečné.

Video 4 - Jak otestovat, zda byl požadavek přijat SMPP klientem (Video návod)

SMS přijatá na telefonu (Video návod)

V následujícím videu uvidíte, jak vypadá příchozí zpráva odeslaná z Ozeki SMS Gateway. Začne domovskou obrazovkou android telefonu a skončí otevřenou zprávou. Je dlouhé pouze 18 sekund a můžete vidět celý proces přijetí zprávy.

Video 5 - SMS zpráva přijatá na mobilním telefonu (Video návod)

Shrnutí

Výše uvedený průvodce vysvětlil kroky pro odesílání SMS z JavaScriptu. Jak bylo vidět, Ozeki vám poskytuje všechny nástroje potřebné pro doručování zpráv, takže pokud byly kroky pečlivě dodrženy, odesílání zpráv z JavaScriptu již není problém. Ozeki SMS Gateway hraje obrovskou roli v doručování, bez tohoto programu byste se k mobilním uživatelům nedostali. Je důležité si uvědomit, že Ozeki SMS Gateway funguje v jakékoli zemi, takže zprávy lze s tímto řešením odesílat mezinárodně.

Nezastavujte se zde, projděte si stránku s návody Ozeki a naučte se o přijímání SMS v JavaScriptu.

Vaším dalším krokem je stáhnout Ozeki SMS Gateway a začít pracovat!