Kako poslati več SMS sporočil iz JavaScripta

Najenostavnejši način za pošiljanje več SMS sporočil iz JavaScripta je uporaba vgrajenega HTTP/Rest SMS API-ja Ozeki SMS Gateway. Ko uporabljate ta API, boste SMS sporočila poslali z izdajo HTTP Post zahteve do SMS prehoda. HTTP Post zahteva bo vsebovala sporočilo v json formatu. SMS prehod bo poslal to SMS prejemniku in vrnil HTTP 200 OK odgovor na vašo zahtevo.

kako poslati več SMS sporočil iz javascripta
Slika 1 - Kako poslati več SMS sporočil iz JavaScripta

JavaScript koda za pošiljanje več SMS sporočil na mobilne naprave

Spodnji vzorec JavaScript SMS kode prikazuje, kako lahko pošljete več SMS sporočil z uporabo http rest SMS API-ja Ozeki SMS Gateway z uporabo knjižnice JavaScript Ozeki.Libs.Rest. Ta knjižnica vam je na voljo brezplačno in jo lahko uporabljate in spreminjate v katerem koli od vaših projektov.

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>Pošlji več SMS sporočil z 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="SendMultipleSms.css">
    </head>
    <body style="height: 100vh; width: 100vw; padding: 0; margin: 0;">

        <div class="form-group form-container">
            <b>Naslov prejemnika:</b>
            <input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
            <b>Besedilo:</b>
            <input class="form-control" type="text" id="Text" placeholder="Pozdravljen svet!">
            <button class="btn btn-primary" id="btnAdd">
                <b>DODAJ</b>
            </button>
            <div class="card messages-container">
                <ul class="list-group log" id="message_container">
                    <li class="list-group-item"><b>Sporočila:</b></li>
                </ul> 
            </div>
            <button class="btn btn-primary" id="btnSend">
                    <b>POŠLJI</b>
            </button>
        </div>

        <div class="card log-container">
            <ul class="list-group log" id="container">
                <li class="list-group-item"><b>Dnevniki:</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>Sporočila:</b></li>`;
                
                document.getElementById('container').innerHTML += `<li class="list-group-item">${result}</li>`;
            });
        </script>
    </body>
</html>

Kako uporabiti JavaScript SMS primer:

Ta JavaScript SMS primer se lahko uporablja v kateri koli spletni aplikaciji. Za uporabo morate dodati Ozeki.Libs.Rest.js v vaš projekt. Ko je dodan v vaš projekt, morate vstaviti import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; navodilo v glavo vaše JavaScript izvorne kode. To vam bo omogočilo uporabo razredov, ki jih ponuja knjižnica Ozeki.Libs.Rest. Razred Message lahko uporabite za ustvarjanje SMS. Razred MessageApi lahko uporabite za pošiljanje SMS na SMS prehod. SMS prehod bo vaše sporočilo posredoval v mobilno omrežje prek brezžične povezave ali prek interneta.

Prenesite SendMultipleSms.js

Izvorna koda, razložena v tem članku, je na voljo za brezplačen prenos, uporabo in spreminjanje.
Prenos: SendMultipleSms.js.zip (5.62Kb)

Kaj vsebuje datoteka SendMultipleSms.js.zip?

Datoteka SendMultipleSms.js.zip vsebuje knjižnico Ozeki.Libs.Rest, ki vam ponuja vsa orodja, potrebna za pošiljanje in prejemanje SMS sporočil. V zip datoteki boste našli tudi projekt SendMultipleSms, ki vsebuje primer kode, ki vam pokaže, kako poslati SMS. Ta primer kode je naveden spodaj.

send sms js directory
Slika 2 - Kaj vsebuje SendMultipleSms.js.zip

Kako poslati SMS iz JavaScripta (Preprosta navodila)

Za pošiljanje SMS iz JavaScripta:

  1. Namestite uporabnika HTTP API
  2. Omogočite beleženje komunikacijskih dogodkov na zavihku Napredno
  3. Nastavite WampServer
  4. Prenesite in razširite datoteko SendMultipleSms.js.zip
  5. Vsebino zip datoteke postavite v mapo \www\ wampserverja: C:\wamp64\www
  6. Zaženite aplikacijo Ozeki SMS Gateway
  7. Odprite spletno stran tako, da v brskalnik vnesete http://localhost/SendMultipleSms.php
  8. Ko odprete spletno stran, lahko pošljete SMS s klikom na gumb Pošlji
  9. Preverite dnevnike, da vidite, ali je bil SMS poslan
Namestite Ozeki SMS Gateway in ustvarite uporabnika HTTP API

Da lahko pošiljate SMS iz JavaScripta, morate najprej namestiti Ozeki SMS Gateway. SMS gateway lahko namestite na isti računalnik, kjer razvijate svojo JavaScript kodo v Visual Studiu. Po namestitvi je naslednji korak povezovanje Ozeki SMS Gateway z mobilnim omrežjem. Lahko pošljete testni SMS iz Ozeki GUI, da preverite, ali vaša mobilna omrežna povezava deluje. Zadnji korak pri pripravi okolja je ustvarjanje uporabnika HTTP SMS API. Ustvarite uporabnika z uporabniškim imenom "http_user" in geslom "qwe123", da primer deluje brez sprememb.

Ko je okolje pripravljeno, lahko zaženete svojo JavaScript kodo.

URL HTTP API za pošiljanje SMS iz JavaScripta

Za pošiljanje SMS iz JavaScripta mora vaša JavaScript izdati HTTP zahtevek proti SMS gatewayu. API URL je prikazan spodaj. Upoštevajte, da je treba IP naslov (127.0.0.1) zamenjati z IP naslovom vašega SMS gatewaya. Če je Ozeki SMS Gateway nameščen na istem računalniku, kjer teče JavaScript SMS aplikacija, je to lahko 127.0.0.1. Če je nameščen na drugem računalniku, mora biti to IP naslov tega računalnika. 

http://127.0.0.1:9509/api?action=rest
Avtentikacija HTTP za pošiljanje SMS iz JavaScripta

Za avtentikacijo JavaScript SMS odjemalca morate poslati uporabniško ime in geslo v nizu, kodiranem z base64, na strežnik v HTTP zahtevku. Uporabljen format je: base64(uporabniško_ime+":"+geslo). V JavaScriptu lahko za to kodiranje uporabite naslednjo kodo: 

// Kodirnik Base64 najdete v datoteki Ozeki.Libs.Rest.js 
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;

Na primer, če kodirate uporabniško ime 'http_user' in geslo 'qwe123', boste dobili naslednji niz, kodiran z base64: aHR0cF91c2VyOnF3ZTEyMw==. Za pošiljanje

Glava HTTP zahtevka za pošiljanje SMS iz JavaScripta

Za pošiljanje SMS sporočil morate vključiti naslednje vrstice kot glave v HTTP zahtevek. Upoštevajte, da vključujemo vrsto vsebine in glavo za avtorizacijo. 

Content-Type: application/json
Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
HTTP zahtevek za pošiljanje SMS iz JavaScripta

Za oddajo SMS bo vaša JavaScript aplikacija poslala HTTP zahtevek, podoben spodnjemu. Upoštevajte, da ta zahtevek vsebuje del z glavo HTTP in del s telesom HTTP. Telo HTTP je niz podatkov, kodiranih v JSON. Vsebuje prejemnikovo številko in besedilo sporočila. 

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 odziv, prejet v primeru JavaScript SMS

Ko SMS prehod prejme to zahtevo, bo ustvaril HTTP odziv. HTTP odziv bo vseboval statusno kodo, ki bo pokazala, ali je bila zahteva za oddajo SMS uspešna ali ne. Prav tako bo vrnil strukturo, kodirano v JSON, ki vam bo zagotovila koristne podrobnosti o oddaji sporočila. 

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": "Sporočila v čakalni vrsti za dostavo.",
	"data": {
	  "total_count": 3,
	  "success_count": 3,
	  "failed_count": 0,
	  "messages": [
	    {
	      "message_id": "647a34a9-a852-f5e5-8a14-0619b6ddad1d",
	      "from_station": "%",
	      "to_address": "+36201111111",
	      "text": "Pozdravljen svet 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": "Pozdravljen svet 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": "Pozdravljen svet 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"
	    }
	  ]
	}
}
Kako poslati več SMS-jev iz JavaScripta z uporabo JavaScript SMS API-ja (Video vadnica)

Ta video vam pokaže, kako prenesti datoteko SendMultipleSms.js.zip s te strani. Če si ogledate video, boste opazili, da so vsebine datoteke SendMultipleSms.cs zip postavljene v mapo \www\ strežnika WampServer. Videli boste tudi, da zaženemo WampServer z dvoklikom na njegovo ikono, nato pa v brskalnik vpišemo http://localhost:8080/SendMultipleSms.js.

Video 1 - Kako prenesti in zagnati primer projekta (Video vadnica)

Primer JavaScript SMS: SendMultipleSms.js

Spodnji primer kode je del datoteke SendMultipleSms.php. Poleg tega boste videli še dve drugi datoteki, imenovani SendMultipleSms.css in Ozeki.Libs.Rest.js.

  • Datoteka Ozeki.Libs.Rest.js vsebuje vsa potrebna orodja za pošiljanje, brisanje, označevanje in prejemanje SMS sporočil.
  • SendMultipleSms.php vsebuje kodo JavaScript in nekatere glave, ki nam bodo omogočile pošiljanje HTTP zahtev brez napak CORS.
  • SendMultipleSms.css vsebuje slogovno datoteko za spletno stran.

Slika 3 - SendMultipleSms.php

Kako preveriti, ali je SMS sprejel HTTP uporabnik (Video vadnica)

Po oddaji SMS-ja je dobro preveriti vaš SMS prehod, da vidite, kaj je prejel. Dnevnik lahko preverite tako, da odprete podrobnosti HTTP uporabnika v upravljavski konzoli Ozeki SMS Gateway. Naslednji video vam pokaže, kaj morate iskati. Video se bo začel z odprto kodo in končal s podrobnostmi poslanega sporočila. Naučili se boste, kako zagnati projekt, kako izgleda projekt med izvajanjem in kako izgleda dnevniški zapis po tem. Video je dolg le 42 sekund in ga je enostavno razumeti. Ne boste imeli težav s sledenjem.

Video 2 - Kako poslati SMS z JavaScript kodo zgoraj (Video vadnica)

Zaključek

Ta vodič ponuja vsa bistvene informacije o tem, kako poslati več SMS sporočil iz JavaScripta z uporabo HTTP uporabnika Ozeki SMS Gateway. Zdaj lahko uporabite prikazani SMS API za vašo JavaScript aplikacijo in nastavite povezavo HTTP uporabnika v Ozeki SMS Gateway. Ustvarjena rešitev bo zanesljiva in hitra. Ta storitev lahko naredi vaše pošiljanje sporočil učinkovitejše, ker vam omogoča dostavo pomembnih informacij več kot enemu sodelavcu hkrati.

Na spletni strani Ozeki boste našli še veliko več člankov, ki vam bodo pomagali pri nastavitvi sistema za sporočanje. Prepričajte se, da boste še naprej brali, da boste izvedeli, kako lahko uporabite JavaScript SMS API za druge namene, začnite z Kako načrtovati SMS v JavaScriptu.

Prenesite Ozeki SMS Gateway zdaj. Uresničite, kar ste se naučili!

More information