Ako prijímať SMS v Javascripte

Najjednoduchší spôsob, ako prijímať SMS z JavaScriptu, je použiť vstavanú HTTP/Rest SMS API Ozeki SMS Gateway. Keď použijete toto API, budete prijímať SMS správy odoslaním HTTP GET požiadavky na SMS bránu. HTTP GET požiadavka vráti HTTP 200 OK odpoveď na vašu požiadavku a správy vo vybranom priečinku.

ako prijímať sms v javascripte
Obrázok 1 - Ako prijímať SMS v Javascripte

JavaScript kód na prijímanie SMS na mobil

Ukážka JavaScript kódu pre SMS nižšie demonštruje, ako môžete prijímať SMS správy 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.

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>Prijímať 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>Stiahnuť prichádzajúce</b>
            </button>
        </div>

        <div class="card log-container">
            <ul class="log" id="container">
                <li class="list-group-item"><b>Záznamy:</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>

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, 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. Môžete použiť triedu Message na vytvorenie SMS. Môžete použiť triedu MessageApi 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ť ReceiveSms.js

Zdrojový kód vysvetlený v tomto článku môže byť stiahnutý, použitý a upravený bezplatne.
Stiahnuť: ReceiveSms.js.zip (5.28Kb)

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

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

prijímať sms js adresár
Obrázok 2 - Čo je vo vnútri ReceiveSms.js.zip

Ako prijímať SMS z JavaScriptu (Jednoduché pokyny)

Na prijímanie SMS z JavaScriptu:

  1. Nainštalujte používateľa HTTP API
  2. Povoľte Log komunikáciu na karte Pokročilé
  3. Nastavte WampServer
  4. Stiahnite a rozbaľte súbor ReceiveSms.js.zip
  5. Vložte obsah súboru zip do priečinka \www\ wampserveru: C:\wamp64\www
  6. Spustite aplikáciu Ozeki SMS Gateway
  7. Otvorte webovú stránku zadaním http://localhost/ReceiveSms.php do vášho prehliadača
  8. Po otvorení webovej stránky môžete odoslať SMS kliknutím na tlačidlo Stiahnuť prichádzajúce
  9. Skontrolujte záznamy, či bola SMS odoslaná

Nainštalujte Ozeki SMS Gateway a vytvorte používateľa HTTP API

Ak chcete posielať SMS z JavaScriptu, musíte najprv nainštalovať Ozeki SMS Gateway. SMS bránu je možné nainštalovať na rovnaký počítač, kde vyvíjate svoj JavaScript kód vo Visual Studio. Po inštalácii je ďalším krokom pripojenie Ozeki SMS Gateway k mobilnej sieti. Môžete odoslať testovaciu SMS z Ozeki GUI, aby ste overili, že vaše pripojenie k mobilnej sieti funguje. Posledným krokom pri príprave vášho prostredia je vytvorenie používateľa 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 JavaScript kód.

URL HTTP API na prijímanie 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

HTTP autentifikácia na prijímanie 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: 

// Kódovanie Base64 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 prijímanie SMS z JavaScriptu

Na odosielanie 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ú nižšie uvedenej. Upozorňujeme, že táto požiadavka obsahuje časť HTTP hlavičky, ktorá obsahuje používateľské meno 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 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. Vráti tiež štruktúru zakódovanú do JSON, ktorá vám poskytne užitočné informácie o odoslaní sprá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"
				}
			]
		}
	]
}

Ako vymazať SMS z JavaScriptu pomocou JavaScriptovej SMS API (Video tutoriál)

Toto video vám ukáže, ako stiahnuť súbor ReceiveSms.js.zip z tejto stránky. Ak si pozriete video, všimnete si, že obsah ReceiveSms.js zipu je umiestnený do priečinka \www\ WampServeru. Uvidíte tiež, že sme spustili WampServer dvojklikom na jeho ikonu a potom sme do webového prehliadača zadali http://localhost:8080/ReceiveSms.php.

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

Príklad SMS v JavaScripte: ReceiveSms.js

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

ako prijímať SMS pomocou javascriptu
Obrázok 3 - ReceiveSms.php

Ako skontrolovať, či SMS prijal HTTP používateľ (Video tutoriál)

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

Video 2 - Ako skontrolovať, či SMS prijal HTTP používateľ (Video tutoriál)

Zhrnutie

Tento článok vám ukazuje, ako prijímať SMS správy z vašej JavaScriptovej aplikácie pomocou vstavaného HTTP REST SMS API Ozeki SMS Gateway. Ak ste pozorne sledovali tento návod, teraz môžete použiť daný program na presmerovanie prijatých SMS správ do vášho úložiska pomocou HTTP používateľa v Ozeki SMS Gateway. Toto úložisko je možné používať a upravovať bezplatne, takže ho môžete využiť v ktoromkoľvek z vašich projektov.

Pokračujte v čítaní článkov na webovej stránke Ozeki, rozširujte svoje vedomosti. Pokračujte v návode s názvom Ako vymazať SMS v JavaScripte a naučte sa používať SMS API na iné účely.

Poďme do práce, začnite sťahovať Ozeki SMS Gateway ešte dnes!

More information