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

A legegyszerűbb módja az 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 tartalmaz. 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.

JavaScript kód SMS küldésére mobiltelefonra

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

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

        <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="btnSend">
                <b>KÜLDÉS</b>
            </button>
        </div>

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

A JavaScript SMS példa használata:

Ez a JavaScript SMS példa bármilyen 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 kell elhelyezned a JavaScript forráskódod fejléc részébe. Ez lehetővé teszi az Ozeki.Libs.Rest könyvtár által nyújtott osztályok használatát. 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.

SendSms.js letöltése

Az ebben a cikkben ismertetett forráskód letölthető, használható és módosítható ingyenesen.
Letöltés: SendSms.js.zip (5.3Kb)

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

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

send sms js directory — 2. ábra - Mi található a SendSms.js.zip fájlban

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

Az SMS küldése JavaScriptből:

Telepíts egy HTTP API felhasználót
Kapcsold be a "Log communication events" opciót az Advanced fülön
Töltsd le és telepítsd a WampServer programot
Töltsd le, majd csomagold ki a SendSms.js.zip fájlt
Helyezd a zip fájl tartalmát a wampserver \www\ mappájába: C:\wamp64\www
Indítsd el az Ozeki SMS Gateway alkalmazást
Nyisd meg a weboldalt a http://localhost/SendSms.php cím beírásával a böngésződbe
Miután megnyitottad a weboldalt, SMS-t küldhetsz a Küldés gombra kattintva
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 programot. 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. Küldhetsz egy teszt SMS-t az Ozeki GUI-ból, hogy ellenőrizd, működik-e a mobilhálózati kapcsolatod. 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 az SMS küldéséhez JavaScriptből

Ahhoz, hogy SMS-t küldj JavaScriptből, a JavaScriptednek 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 gatewayed 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 lehet 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 az 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ódolt sztringként kell elküldened a szervernek egy HTTP kérésben. A használt formátum: base64(username+":"+password). JavaScriptben a következő kóddal végezheted el ezt a kódolást:

// 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 az 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. Figyeld meg, hogy tartalmazunk egy content type és egy Authorization fejlécet.

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

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

Az SMS beküldéséhez a JavaScript alkalmazásod egy olyan HTTP kérést küld, mint az alábbi. Figyeld meg, 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ódolt 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: 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 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, hogy jelezze, sikeres volt-e az SMS beküldési kérés vagy sem. Ezen kívül egy JSON kódolt struktúrát is visszaad, amely 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: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"
	    }
	  ]
	}
}

Csatlakoztasd az SMS gatewayedet a mobilhálózathoz és hozz létre egy HTTP API felhasználói fiókot

Feltételezzük, hogy már telepítetted az Ozeki SMS Gateway programot, és csatlakoztattad a mobilhálózathoz. Ahhoz, hogy SMS-t tudj küldeni mobiltelefonra JavaScriptből, létre kell hoznod egy HTTP API felhasználói fiókot az Ozeki SMS Gateway-ben.

Új felhasználó létrehozása (Videó útmutató)

Ez a videó bemutatja, hogyan állíthatsz be egy új HTTP API felhasználói fiókot. Az Ozeki SMS Gateway kezdőlapjáról indul, és az új felhasználó Events fülénél ér véget. A videó megmutatja, hogyan hozhatod létre és konfigurálhatod az új felhasználót. A videó nagyszerűsége, hogy mindössze 30 másodperc hosszú, de tartalmazza mindazt az információt, amire szükséged van egy új http api felhasználó létrehozásához.

1. videó - HTTP API felhasználói fiók beállítása (Videó útmutató)

Hogyan küldjünk SMS-t JavaScriptből a JavaScript SMS API használatával (Videó útmutató)

Ez a videó bemutatja, hogyan töltheted le a SendSms.js.zip fájlt erről az oldalról. Ha megnézed a videót, észreveszed, hogy a SendSms.cs zip tartalma a WampServer \www\ mappájába kerül. Azt is látni fogod, hogy a WampServer-t duplán kattintva indítjuk el, majd a http://localhost:8080/SendSms.js címet írjuk be a webböngészőbe.

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

JavaScript SMS példa: SendSms.js

Az alábbi példakód a SendSms.php PHP fájl része. Ezen kívül két másik fájlt is látsz, a SendSms.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-ek küldéséhez, törléséhez, megjelöléséhez és fogadásához.
A SendSms.php tartalmazza a javascript kódot, és néhány fejlécet, amelyek lehetővé teszik a HTTP kérések küldését CORS hibák nélkül.
A SendSms.css tartalmazza a stíluslapot.

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

Az SMS beküldése után érdemes ellenőrizni az SMS gatewayedet, hogy lássad, mit kapott. 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ó megmutatja, mire kell figyelned. A videó a megnyitott kóddal indul, é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.

3. videó - SMS küldése a fenti JavaScript kóddal (Videó útmutató)

Hogyan ellenőrizd, hogy az SMS-t elküldte-e a mobilhálózat

A folyamat ellenőrzésének utolsó lépése, hogy megnézd a mobilhálózati kapcsolat naplóit. Lehet, hogy be kell kapcsolnod a naplózást a kapcsolat beállításaiban, mielőtt elküldöd az üzenetet, hogy lásd a naplókat. Ha a naplózás be van kapcsolva, látni fogod a telefonszámot és az elküldött üzenet szövegét.

Teszteld, hogy a kérést elfogadta-e (Videó útmutató)

A következő videóban látni fogod, hogyan ellenőrizheted, hogy az SMPP kliens sikeresen elküldte-e az üzenetedet. Megtanulod, hogyan nyithatod meg az SMPP felhasználó Events fülét, és mire kell figyelned. A videó mindössze 18 másodperc hosszú, de nagyon hasznos lesz.

4. videó - Hogyan teszteld, hogy a kérést elfogadta-e az SMPP kliens (Videó útmutató)

SMS érkezése a telefonra (Videó útmutató)

A következő videón láthatod, hogyan néz ki egy bejövő üzenet, amelyet az Ozeki SMS Gateway küldött. Egy android telefon kezdőképernyőjével indul, és az üzenet megnyitásával ér véget. Mindössze 18 másodperc hosszú, és láthatod az üzenet fogadásának teljes folyamatát.

5. videó - SMS üzenet érkezése mobiltelefonra (Videó útmutató)

Összefoglalás

A fenti útmutató elmagyarázta az SMS küldésének lépéseit JavaScriptből. Amint látható, az Ozeki minden szükséges eszközt biztosít az üzenetküldéshez, így ha gondosan követed a lépéseket, az üzenetküldés JavaScriptből többé nem lesz probléma. Az Ozeki SMS Gateway óriási szerepet játszik az üzenetküldésben, enélkül a program nélkül nem tudnál elérni a mobilfelhasználókhoz. Fontos megjegyezni, hogy az Ozeki SMS Gateway bármely országban működik, így nemzetközi szinten is küldhetsz üzeneteket ezzel a megoldással.

Ne állj meg itt, böngészd az Ozeki oktatóanyagait, és tanulj többet a SMS fogadásáról JavaScriptben.

A következő lépés, hogy letöltöd az Ozeki SMS Gateway programot, és elkezded a munkát!