Hogyan küldjünk több SMS-t JavaScriptből

A legegyszerűbb módja több SMS küldésének 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 küldhetsz HTTP POST kérések kiadásával az SMS gateway felé. A HTTP POST kérés egy JSON formátumban formázott üzenetet fog tartalmazni. Az SMS gateway továbbítja ezt az SMS-t a címzett telefonszámára, és egy HTTP 200 OK választ küld vissza a kérésedre.

hogyan küldjünk több sms-t javascriptből
1. ábra - Hogyan küldjünk több SMS-t JavaScriptből

JavaScript kód több SMS mobilra küldéséhez

Az alábbi JavaScript SMS kód minta bemutatja, hogyan küldhetsz több SMS üzenetet 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 használhatod és módosíthatod.

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>Több SMS küldése Ozeki SMS Gateway segítségé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="SendMultipleSms.css">
    </head>
    <body style="height: 100vh; width: 100vw; padding: 0; margin: 0;">

        <div class="form-group form-container">
            <b>Címzett:</b>
            <input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
            <b>Szöveg:</b>
            <input class="form-control" type="text" id="Text" placeholder="Hello world!">
            <button class="btn btn-primary" id="btnAdd">
                <b>HOZZÁAD</b>
            </button>
            <div class="card messages-container">
                <ul class="list-group log" id="message_container">
                    <li class="list-group-item"><b>Üzenetek:</b></li>
                </ul> 
            </div>
            <button class="btn btn-primary" id="btnSend">
                    <b>KÜLDÉS</b>
            </button>
        </div>

        <div class="card log-container">
            <ul class="list-group log" id="container">
                <li class="list-group-item"><b>Naplók:</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>Üzenetek:</b></li>`;
                
                document.getElementById('container').innerHTML += `<li class="list-group-item">${result}</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álatához hozzá kell adnod az Ozeki.Libs.Rest.js fájlt a projektedhez. Miután hozzáadtad a projektedhez, az import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; direktívát be kell illesztened a JavaScript forráskódod fejléc részébe. Ez lehetővé teszi, hogy használd az Ozeki.Libs.Rest könyvtár által biztosított osztályokat. 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 gatewaynek. Az SMS gateway továbbítja az üzenetedet a mobilhálózatnak vezeték nélküli kapcsolaton vagy az interneten keresztül.

SendMultipleSms.js letöltése

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

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

A SendMultipleSms.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 SendMultipleSms 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ó.

sms küldése js könyvtár
2. ábra - Mi található a SendMultipleSms.js.zip fájlban

Hogyan küldjünk SMS-t JavaScriptből (Egyszerű útmutató)

SMS küldése JavaScriptből:

  1. Telepíts egy HTTP API felhasználót
  2. Kapcsold be a "Log communication events" opciót az Advanced fülön
  3. Állítsd be a WampServer-t
  4. Töltsd le, majd csomagold ki a SendMultipleSms.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/SendMultipleSms.php cím beírásával a böngésződbe
  8. Miután megnyitottad a weboldalt, SMS-t küldhetsz a Küldés 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 Ozeki SMS Gateway csatlakoztatása a mobilhálózathoz. Küldhetsz egy teszt SMS-t az Ozeki GUI-ból annak ellenőrzésére, hogy a mobilhálózati kapcsolatod működik-e. A környezet előkészítésének utolsó lépése egy HTTP SMS API felhasználói fiók létrehozása. 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 beállítottad a környezetet, futtathatod a JavaScript kódodat.

HTTP API URL SMS küldéséhez JavaScriptből

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

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

HTTP hitelesítés SMS küldéséhez JavaScriptből

A JavaScript SMS kliens hitelesítéséhez a felhasználónevet és a jelszót base64 kódolású 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ódolású sztringet kapod: aHR0cF91c2VyOnF3ZTEyMw==. Az SMS küldéséhez

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

Az SMS üzenetek küldéséhez a következő sorokat kell tartalmaznia a HTTP kérés fejlécének. Figyelj arra, hogy tartalmazunk egy content type és egy Authorization fejlécet. 

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 rá, hogy ez a kérés tartalmaz egy HTTP fejléc részt és egy HTTP törzs részt. A HTTP törzs egy JSON kódolású adatsztring. Tartalmazza a címzett számát és az üzenet szövegét. 

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 válasz, amelyet 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. Egy JSON kódolású 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.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": "Messages queued for delivery.",
	"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"
	    }
	  ]
	}
}

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

Ez a videó bemutatja, hogyan töltheted le a SendMultipleSms.js.zip fájlt erről az oldalról. Ha megnézed a videót, észre fogod venni, hogy a SendMultipleSms.cs zip tartalma elhelyezésre kerül a WampServer \www\ mappájába. Azt is látni fogod, hogy kétszer kattintunk a WampServer ikonjára, majd a http://localhost:8080/SendMultipleSms.js címet írjuk be a böngészőbe.

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

JavaScript SMS példa: SendMultipleSms.js

Az alábbi példakód a SendMultipleSms.php PHP fájl része. Ezen kívül találsz még két másik fájlt, a SendMultipleSms.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 SendMultipleSms.php tartalmazza a javascript kódot, és néhány fejlécet, amely lehetővé teszi a HTTP kérések küldését CORS hibák nélkül.
  • A SendMultipleSms.css tartalmazza a weboldal stíluslapját.

3. ábra - SendMultipleSms.php

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

Miután elküldted az SMS-t, jó ötlet ellenőrizni az SMS gatewayt, hogy lássad, mit kapott meg. A naplót az Ozeki SMS Gateway kezelőfelületén az HTTP felhasználó részleteinek megnyitásával ellenőrizheted. A következő videó bemutatja, hogy mire kell figyelni. A videó a megnyitott kóddal kezdődik, és az elkü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 küldj SMS-t a fenti JavaScript kóddal (Videó útmutató)

Összegzés

Ez az útmutató minden lényeges információt tartalmaz arról, hogyan küldj több SMS üzenetet JavaScriptből az Ozeki SMS Gateway HTTP felhasználójának használatával. Most már használhatod a bemutatott SMS API-t JavaScript alkalmazásodhoz, és beállíthatsz egy HTTP felhasználói kapcsolatot az Ozeki SMS Gateway-ben. A létrehozott megoldás megbízható és nagy sebességű lesz. Ez a szolgáltatás hatékonyabbá teheti az üzenetküldést, mivel lehetővé teszi, hogy értékes információkat küldj egyszerre több munkatársadnak.

Sok további cikket találsz az Ozeki weboldalán, amelyek segítenek egy üzenetküldő rendszer beállításában. Ne felejtsd el tovább olvasni, hogy megtudd, hogyan használhatod a JavaScript SMS API-t más célokra is, kezdve a Hogyan ütemezz SMS-t JavaScriptben című cikkel.

Töltsd le most az Ozeki SMS Gateway-t. Tedd gyakorlatba, amit tanultál!

More information