Hogyan kapjunk SMS-t Javascriptben

A legegyszerűbb módja az SMS fogadásának JavaScriptből az Ozeki SMS Gateway beépített HTTP/Rest SMS API-jának használata. Amikor ezt az API-t használod, SMS üzeneteket fogadsz HTTP GET kérések küldésével az SMS gateway felé. A HTTP GET kérés HTTP 200 OK választ fog visszaadni a kérésedre, valamint az üzeneteket a kiválasztott mappából.

hogyan kapjunk sms-t javascriptben
1. ábra - Hogyan kapjunk SMS-t Javascriptben

JavaScript kód SMS fogadására mobilra

Az alábbi JavaScript SMS kódminta bemutatja, hogyan fogadhatsz SMS üzeneteket az Ozeki SMS Gateway http rest sms api-jával, a JavaScript Ozeki.Libs.Rest könyvtár segítségével. Ez a könyvtár ingyenesen elérhető számodra, és bármely projektben felhasználhatod és módosíthatod.

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>SMS fogadás Ozeki SMS Gateway-vel</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>Beérkező letöltése</b>
            </button>
        </div>

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

A JavaScript SMS példa használata:

Ez a JavaScript SMS példa bármely webalkalmazásban használható. A használathoz hozzá kell adnod az Ozeki.Libs.Rest.js fájlt a projektedhez. Miután hozzáadtad a projektedhez, az import {MessageApi, Configuration} from './Ozeki.Libs.Rest.js'; utasítást be kell illesztened a JavaScript forráskódod fejléc részébe. Ez lehetővé teszi az osztályok használatát az Ozeki.Libs.Rest könyvtárból. A Message osztály segítségével létrehozhatod az SMS-t. A MessageApi osztály segítségével elküldheted az SMS-t az SMS gateway felé. Az SMS gateway továbbítja az üzenetedet a mobilhálózatba vezeték nélküli kapcsolaton vagy az interneten keresztül.

ReceiveSms.js letöltése

A cikkben ismertetett forráskód letölthető, felhasználható és módosítható ingyenesen.
Letöltés: ReceiveSms.js.zip (5.28Kb)

Mi található a ReceiveSms.js.zip fájlban?

A ReceiveSms.js.zip fájl tartalmazza az Ozeki.Libs.Rest könyvtárat, amely minden szükséges eszközt biztosít az SMS üzenetek küldéséhez és fogadásához. A zip fájlban megtalálod a ReceiveSms projektet is, amely tartalmazza a példakódot, amely bemutatja, hogyan küldj SMS-t. Ez a példakód az alábbiakban látható.

receive sms js könyvtár
2. ábra - Mi található a ReceiveSms.js.zip fájlban

Hogyan fogadjunk SMS-t JavaScriptből (Egyszerű útmutató)

SMS fogadása JavaScriptből:

  1. Telepíts egy HTTP API felhasználót
  2. Engedélyezd a Kommunikációs események naplózását a Speciális lapon
  3. Állítsd be a WampServer-t
  4. Töltsd le, majd csomagold ki a ReceiveSms.js.zip fájlt
  5. Helyezd a zip fájl tartalmát a wampserver \www\ mappájába: C:\wamp64\www
  6. Indítsd el az Ozeki SMS Gateway alkalmazást
  7. Nyisd meg a weboldalt a http://localhost/ReceiveSms.php cím beírásával a böngésződbe
  8. Miután megnyitottad a weboldalt, SMS-t küldhetsz a Beérkező letöltése gombra kattintva
  9. Ellenőrizd a naplókat, hogy az SMS elküldődött-e

Ozeki SMS Gateway telepítése és HTTP API felhasználó létrehozása

Ahhoz, hogy SMS-t tudj küldeni JavaScriptből, először telepítened kell az Ozeki SMS Gateway-t. Az SMS gateway telepíthető ugyanarra a számítógépre, ahol a JavaScript kódodat fejleszted Visual Studio-ban. A telepítés után a következő lépés az, hogy csatlakoztassad az Ozeki SMS Gateway-t a mobilhálózathoz. létrehozz egy HTTP sms api felhasználói fiókot. Hozz létre egy felhasználót "http_user" felhasználónévvel és "qwe123" jelszóval, hogy a példa módosítás nélkül működjön.

Miután a környezet beállításra került, futtathatod a JavaScript kódodat.

HTTP API URL SMS fogadásához JavaScriptből

Ahhoz, hogy SMS-t küldj JavaScriptből, a JavaScriptednek HTTP kérést kell küldenie az SMS gateway felé. Az API URL az alábbiakban látható. Figyelj arra, hogy az IP cím (127.0.0.1) helyére az SMS gatewayed IP címét kell beírnod. Ha az Ozeki SMS Gateway ugyanarra a számítógépre van telepítve, ahol a JavaScript SMS alkalmazás fut, ez lehet 127.0.0.1. Ha másik számítógépre van telepítve, annak IP címét kell megadnod. 

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

HTTP hitelesítés SMS fogadásához JavaScriptből

A JavaScript SMS kliens hitelesítéséhez a felhasználónevet és a jelszót base64 kódolt sztringként kell elküldened a szervernek egy HTTP kérésben. A használt formátum: base64(felhasználónév+":"+jelszó). JavaScriptben a következő kódot használhatod a kódoláshoz: 

// A Base64 kódoló az Ozeki.Libs.Rest.js fájlban található 
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;

Például ha a 'http_user' felhasználónevet és a 'qwe123' jelszót kódolod, a következő base64 kódolt sztringet kapod: aHR0cF91c2VyOnF3ZTEyMw==.

HTTP kérés fejléc SMS fogadásához JavaScriptből

Az SMS üzenetek küldéséhez a következő sorokat kell belefoglalnod fejléc részként az HTTP kérésbe. Figyelj arra, hogy tartalomtípust és egy Authorization fejlécet is tartalmazunk. 

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

HTTP kérés SMS küldéséhez JavaScriptből

Az SMS beküldéséhez a JavaScript alkalmazásod egy olyan HTTP kérést fog küldeni, mint az alábbi. Figyelj arra, hogy ez a kérés tartalmaz egy HTTP fejléc részt, amely tartalmazza a http_user felhasználónevét és jelszavát. 

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

HTTP válasz, amit a JavaScript SMS példa kap

Amint az SMS gateway megkapja ezt a kérést, generál egy HTTP választ. A HTTP válasz tartalmaz egy státuszkódot, amely jelzi, hogy az SMS beküldési kérés sikeres volt-e vagy sem. Emellett egy JSON kódolt struktúrát is visszaad, ami hasznos részleteket nyújt az üzenet beküldéséről. 

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

Hogyan töröljünk SMS-t JavaScriptből a JavaScript SMS API segítségével (Videó útmutató)

Ez a videó bemutatja, hogyan töltheted le a ReceiveSms.js.zip fájlt erről az oldalról. Ha megnézed a videót, észreveszed, hogy a ReceiveSms.js zip tartalma elhelyezésre kerül a WampServer \www\ mappájába. Azt is látni fogod, hogy mi elindítjuk a WampServer-t a dupla kattintással az ikonjára, majd ezután beírjuk a http://localhost:8080/ReceiveSms.php címet a böngészőbe.

1. videó - Hogyan töltsd le és futtasd a példaprojektet (Videó útmutató)

JavaScript SMS példa: ReceiveSms.js

Az alábbi példakód a ReceiveSms.php PHP fájl része. Ezen kívül két másik fájlt is találsz, a ReceiveSms.css és a Ozeki.Libs.Rest.js fájlokat.

  • Az Ozeki.Libs.Rest.js fájl tartalmazza az összes szükséges eszközt az SMS üzenetek küldéséhez, törléséhez, megjelöléséhez és fogadásához.
  • A ReceiveSms.php tartalmazza a javascript kódot, és néhány fejlécet, amely lehetővé teszi számunkra a HTTP kérések küldését CORS hibák nélkül.
  • A ReceiveSms.css tartalmazza a weboldal stíluslapját.

hogyan fogadjunk sms-t javascript használatával
3. ábra - ReceiveSms.php

Hogyan ellenőrizzük, hogy az SMS-t elfogadta-e a HTTP felhasználó (Videó útmutató)

Miután az SMS beküldésre került, jó ötlet ellenőrizni az SMS gatewayedet, hogy lássuk, mit kapott. A naplót megtekintheted az Ozeki SMS Gateway kezelőfelületén az HTTP felhasználó részleteinek megnyitásával. A következő videó bemutatja, hogy mire kell figyelni. A videó a megnyitott kóddal kezdődik és a küldött üzenet részleteivel ér véget. Megtanulod, hogyan indítsd el a projektet, hogyan néz ki a projekt futás közben és hogyan néz ki a naplófájl utána. A videó mindössze 42 másodperc hosszú és könnyen érthető. Nem lesz gondod a követésével.

2. videó - Hogyan ellenőrizd, hogy az SMS-t elfogadta-e a HTTP felhasználó (Videó útmutató)

Összefoglalás

Ez a cikk bemutatja, hogyan fogadhatsz SMS üzeneteket a JavaScript alkalmazásodból az Ozeki SMS Gateway beépített HTTP REST SMS API-jának segítségével. Ha figyelmesen követted ezt az útmutatót, most már képes vagy a megadott program segítségével átirányítani a fogadott SMS üzeneteket a tárolóba az Ozeki SMS Gateway HTTP felhasználójának segítségével. Ez a tárház ingyenesen használható és módosítható, így bármely projektben felhasználhatod.

Olvass további cikkeket az Ozeki weboldalán, bővítsd tudásodat. Folytasd a Hogyan töröljünk egy SMS-t Javascriptben című útmutatóval, és tanulj meg SMS API-t más célokra is használni.

Lássunk munkához, kezdd el letölteni az Ozeki SMS Gateway-t most!

More information