Jak přijímat SMS v Javascriptu

Nejjednodušší způsob, jak přijímat SMS z JavaScriptu, je použít vestavěné HTTP/Rest SMS API Ozeki SMS Gateway. Když použijete toto API, budete přijímat SMS zprávy odesláním HTTP GET požadavku na SMS bránu. HTTP GET požadavek vrátí odpověď HTTP 200 OK na váš požadavek a zprávy uvnitř vybrané složky.

jak přijímat sms v javascriptu
Obrázek 1 - Jak přijímat SMS v Javascriptu

JavaScript kód pro přijímání SMS do mobilu

Ukázka JavaScript kódu pro SMS níže ukazuje, jak můžete přijímat SMS zprávy 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ů.

ReceiveSms.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>Přijímání 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="ReceiveSms.css">
    </head>
    <body>

        <div class="form-container">
            <button class="btn btn-primary" id="btnDownloadIncoming">
                <b>Stáhnout příchozí</b>
            </button>
        </div>

        <div class="card log-container">
            <ul class="log" id="container">
                <li class="list-group-item"><b>Logy:</b></li>
            </ul> 
        </div>

        <script type="module">
            import { Configuration, MessageApi } from "./Ozeki.Libs.Rest.js";

            var btnDownloadIncoming = document.getElementById("btnDownloadIncoming");

            var configuration = new Configuration();
            configuration.Username = 'http_user';
            configuration.Password = 'qwe123';
            configuration.ApiUrl = 'http://192.168.0.14:9509/api';

            var api = new MessageApi(configuration);

            btnDownloadIncoming.addEventListener("click", async function() {
                
                let result = await api.DownloadIncoming();

                document.getElementById('container').innerHTML += `<li class="list-group-item">${result}</li>`;
                
                for (let i = 0; i < result.MessageCount; i++)
                {
                    document.getElementById('container').innerHTML += `<li class="list-group-item">${result.Messages[i]}</li>`;
                }
            });
            
        </script>
    </body>
</html>

Jak používat příklad JavaScript SMS:

Tento příklad JavaScript SMS lze použít v jakékoli webové aplikaci. Pro použití je nutné přidat Ozeki.Libs.Rest.js do vašeho projektu. Po přidání do projektu musíte vložit import {MessageApi, Configuration} from './Ozeki.Libs.Rest.js'; do hlavičkové části vašeho JavaScript zdrojového kódu. 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 ReceiveSms.js

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

Co je v souboru ReceiveSms.js.zip?

Soubor ReceiveSms.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. Najdete zde také projekt ReceiveSms, který obsahuje ukázkový kód, který vám ukáže jak odeslat SMS. Tento ukázkový kód je uveden níže.

adresář pro přijímání sms v javascriptu
Obrázek 2 - Co je uvnitř ReceiveSms.js.zip

Jak přijímat SMS z JavaScriptu (Jednoduché pokyny)

Pro přijímání SMS z JavaScriptu:

  1. Nainstalujte uživatele HTTP API
  2. Povolte Logování komunikačních událostí na kartě Pokročilé
  3. Nastavte WampServer
  4. Stáhněte a rozbalte soubor ReceiveSms.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/ReceiveSms.php do vašeho prohlížeče
  8. Po otevření webové stránky můžete odeslat SMS kliknutím na tlačítko Stáhnout příchozí
  9. 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 příjem SMS z JavaScriptu

Pro odesílá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 toho počítače. 

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

HTTP autentizace pro příjem 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 v 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ý v base64: aHR0cF91c2VyOnF3ZTEyMw==. Pro odeslání

Hlavička HTTP požadavku pro příjem 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, která obsahuje uživatelské jméno a heslo http_user. 

GET /api?action=receivemsg&folder=inbox HTTP/1.1
Connection: Keep-Alive
Authorization: Basic aHR0cF91c2VyOnF3ZTEyMw==
Host: 127.0.0.1:9509

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 JSONu, která vám poskytne užitečné detaily o odeslání zprávy. 

HTTP/1.1 200 OK
User-Agent: OZEKI 10.3.116 (www.myozeki.com)
Content-Type: application/json; charset=utf8
Last-Modified: Mon, 07 Jun 2021 14:10:25 GMT
Server: 10/10.3.116
Transfer-Encoding: chunked

{
	"http_code": 200,
	"response_code": "SUCCESS",
	"response_msg": "",
	"data": {
	"folder": "inbox",
	"limit": "1000",
		"data": [
		{
			"message_id": "b754195d-9bd8-48dc-a45f-cf688c5b32e3",
			"from_connection": "http_user@localhost",
			"from_address": "+36201111111",
			"from_station": "%",
			"to_connection": "http_user@localhost",
			"to_address": "http_user",
			"to_station": "%",
			"text": "Hello, World 1",
			"create_date": "2021-06-08 09:12:24",
			"valid_until": "2021-06-15 09:12:24",
			"time_to_send": "0001-01-01 00:00:00",
			"submit_report_requested": true,
			"delivery_report_requested": true,
			"view_report_requested": true,
			"tags": [
				{
					"name": "Type",
					"value": "SMS:TEXT"
				}
			]
		},
		{
			"message_id": "a6337c23-51bc-43ee-9181-c9838abbe161",
			"from_connection": "http_user@localhost",
			"from_address": "+36202222222",
			"from_station": "%",
			"to_connection": "http_user@localhost",
			"to_address": "http_user",
			"to_station": "%",
			"text": "Hello, World 2",
			"create_date": "2021-06-08 09:12:24",
			"valid_until": "2021-06-15 09:12:24",
			"time_to_send": "0001-01-01 00:00:00",
			"submit_report_requested": true,
			"delivery_report_requested": true,
			"view_report_requested": true,
			"tags": [
				{
					"name": "Type",
					"value": "SMS:TEXT"
				}
			]
		},
		{
			"message_id": "ca14710b-42b9-4abc-b04f-262cc282dd7c",
			"from_connection": "http_user@localhost",
			"from_address": "+36203333333",
			"from_station": "%",
			"to_connection": "http_user@localhost",
			"to_address": "http_user",
			"to_station": "%",
			"text": "Hello, World 3",
			"create_date": "2021-06-08 09:12:24",
			"valid_until": "2021-06-15 09:12:24",
			"time_to_send": "0001-01-01 00:00:00",
			"submit_report_requested": true,
			"delivery_report_requested": true,
			"view_report_requested": true,
			"tags": [
				{
					"name": "Type",
					"value": "SMS:TEXT"
				}
			]
		}
	]
}
Jak smazat SMS z JavaScriptu pomocí JavaScript SMS API (Video návod)

Toto video vám ukáže, jak stáhnout soubor ReceiveSms.js.zip z této stránky. Pokud se podíváte na video, všimnete si, že obsah souboru ReceiveSms.js 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/ReceiveSms.php.

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

JavaScript SMS příklad: ReceiveSms.js

Ukázkový kód níže je součástí souboru ReceiveSms.php. Kromě toho uvidíte další dva soubory s názvem ReceiveSms.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.
  • ReceiveSms.php obsahuje javascriptový kód a některé hlavičky, které nám umožní odesílat HTTP požadavky bez chyb CORS.
  • ReceiveSms.css obsahuje stylopisy pro webovou stránku.

jak přijímat SMS pomocí javascriptu
Obrázek 3 - ReceiveSms.php

Jak zkontrolovat, ž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. Naučíte se, jak projekt spustit, jak vypadá projekt během běhu a jak vypadá soubor protokolu po jeho dokončení. Video je dlouhé pouze 42 sekund a je snadno srozumitelné. Nebudete mít problém jej sledovat.

Video 2 - Jak zkontrolovat, že SMS byla přijata HTTP uživatelem (Video návod)

Shrnutí

Tento článek vám ukazuje, jak přijímat SMS zprávy z vaší JavaScriptové aplikace pomocí vestavěného HTTP REST SMS API Ozeki SMS Gateway. Pokud jste pozorně sledovali tento návod, nyní můžete použít daný program k přesměrování přijatých SMS zpráv do vašeho úložiště s pomocí HTTP uživatele v Ozeki SMS Gateway. Toto úložiště lze používat a upravovat zdarma, takže jej můžete využít v jakémkoli svém projektu.

Čtěte dále články na webu Ozeki, rozšiřujte své znalosti. Pokračujte s návodem s názvem Jak smazat SMS v JavaScriptu a naučte se používat SMS API pro další účely.

Dejte se do práce, začněte stahovat Ozeki SMS Gateway hned teď!

More information