Kako primiti SMS u Javascriptu

Najjednostavniji način za primanje SMS poruka iz JavaScripta je korištenje ugrađenog HTTP/Rest SMS API-ja Ozeki SMS Gatewaya. Kada koristite ovaj API, primit ćete SMS poruke slanjem HTTP GET zahtjeva prema SMS gatewayu. HTTP GET zahtjev će vratiti HTTP 200 OK odgovor na vaš zahtjev, zajedno s porukama unutar odabrane mape.

kako primiti sms u javascriptu
Slika 1 - Kako primiti SMS u Javascriptu

JavaScript kod za primanje SMS-a na mobitel

JavaScript SMS primjer koda u nastavku pokazuje kako možete primati SMS poruke koristeći http rest SMS API Ozeki SMS Gatewaya uz pomoć JavaScript Ozeki.Libs.Rest biblioteke. Ova biblioteka vam je dostupna besplatno, a možete je koristiti i mijenjati u bilo kojem od vaših projekata.

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>Primanje SMS-a s Ozeki SMS Gatewayom</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>Preuzmi dolazne</b>
            </button>
        </div>

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

Kako koristiti JavaScript SMS primjer:

Ovaj JavaScript SMS primjer može se koristiti u bilo kojoj web aplikaciji. Da biste ga koristili, morate dodati Ozeki.Libs.Rest.js u svoj projekt. Nakon što ga dodate u projekt, morate staviti import {MessageApi, Configuration} from './Ozeki.Libs.Rest.js'; u zaglavlje vašeg JavaScript izvornog koda. To će vam omogućiti korištenje klasa koje pruža Ozeki.Libs.Rest biblioteka. Možete koristiti klasu Message za kreiranje SMS-a. Možete koristiti klasu MessageApi za slanje SMS-a prema SMS gatewayu. SMS gateway će proslijediti vašu poruku mobilnoj mreži bilo putem bežične veze ili putem interneta.

Preuzmite ReceiveSms.js

Izvorni kod objašnjen u ovom članku može se besplatno preuzeti, koristiti i mijenjati.
Preuzimanje: ReceiveSms.js.zip (5.28Kb)

Što se nalazi u ReceiveSms.js.zip datoteci?

ReceiveSms.js.zip datoteka sadrži Ozeki.Libs.Rest biblioteku, koja vam daje sve potrebne alate za slanje i primanje SMS poruka. Također ćete pronaći ReceiveSms projekt u zip datoteci, koji sadrži primjer koda koji pokazuje kako poslati SMS. Ovaj primjer koda je naveden u nastavku.

direktorij za primanje sms js
Slika 2 - Što se nalazi unutar ReceiveSms.js.zip

Kako primiti SMS iz JavaScripta (Jednostavne smjernice)

Za primanje SMS-a iz JavaScripta:

  1. Instalirajte HTTP API korisnika
  2. Omogućite bilježenje komunikacijskih događaja na kartici Napredno
  3. Postavite WampServer
  4. Preuzmite i raspakirajte ReceiveSms.js.zip datoteku
  5. Stavite sadržaj zip datoteke u \www\ mapu wampservera: C:\wamp64\www
  6. Pokrenite Ozeki SMS Gateway aplikaciju
  7. Otvorite web stranicu upisivanjem http://localhost/ReceiveSms.php u vaš preglednik
  8. Nakon što ste otvorili web stranicu, možete poslati SMS klikom na gumb Preuzmi dolazne
  9. Provjerite dnevnike kako biste vidjeli je li SMS poslan
Instalirajte Ozeki SMS Gateway i kreirajte HTTP API korisnika

Da biste mogli slati SMS poruke iz JavaScripta, prvo morate instalirati Ozeki SMS Gateway. SMS gateway se može instalirati na istom računalu gdje razvijate svoj JavaScript kod u Visual studiju. Nakon instalacije, sljedeći korak je povezivanje Ozeki SMS Gatewaya s mobilnom mrežom. Možete poslati testnu SMS poruku iz Ozeki GUI-a kako biste potvrdili da vaša mobilna mrežna veza radi. Posljednji korak za pripremu vašeg okruženja je kreiranje HTTP SMS API korisničkog računa. Kreirajte korisnika s korisničkim imenom "http_user" i lozinkom "qwe123" kako bi primjer radio bez izmjena.

Nakon što je okruženje postavljeno, možete pokrenuti svoj JavaScript kod.

HTTP API URL za primanje SMS poruka iz JavaScripta

Za slanje SMS poruka iz JavaScripta, vaš JavaScript će morati poslati HTTP zahtjev SMS gatewayu. API URL je prikazan u nastavku. Imajte na umu da IP adresa (127.0.0.1) treba biti zamijenjena IP adresom vašeg SMS gatewaya. Ako je Ozeki SMS Gateway instaliran na istom računalu gdje se pokreće JavaScript SMS aplikacija, ovo može biti 127.0.0.1. Ako je instaliran na drugom računalu, treba biti IP adresa tog računala. 

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

HTTP autentifikacija za primanje SMS poruka iz JavaScripta

Za autentifikaciju JavaScript SMS klijenta, morate poslati korisničko ime i lozinku u base64 kodiranom stringu na poslužitelj u HTTP zahtjevu. Korišteni format je: base64(korisničko_ime+":"+lozinka). U JavaScriptu možete koristiti sljedeći kod za ovu kodiranje: 

// Base64 enkoder možete pronaći u datoteci Ozeki.Libs.Rest.js 
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;

Na primjer, ako kodirate korisničko ime 'http_user' i lozinku 'qwe123', dobit ćete sljedeći base64 kodirani string: aHR0cF91c2VyOnF3ZTEyMw==. Za slanje

HTTP zaglavlje zahtjeva za primanje SMS poruka iz JavaScripta

Za slanje SMS poruka, morate uključiti sljedeće retke kao zaglavlja u HTTP zahtjevu. Imajte na umu da uključujemo content type i Authorization zaglavlje. 

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

HTTP zahtjev za slanje SMS poruka iz JavaScripta

Za slanje SMS poruka, vaša JavaScript aplikacija će poslati HTTP zahtjev sličan onome u nastavku. Imajte na umu da ovaj zahtjev sadrži dio HTTP zaglavlja koji sadrži korisničko ime i lozinku http_usera. 

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

HTTP odgovor primljen od JavaScript SMS primjera

Nakon što SMS gateway primi ovaj zahtjev, generirat će HTTP odgovor. HTTP odgovor će sadržavati statusni kod, kako bi naznačio je li zahtjev za slanje SMS poruke bio uspješan ili ne. Također će vratiti JSON kodiranu strukturu koja vam pruža korisne detalje o slanju poruke. 

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": "Pozdrav, svijete 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": "Pozdrav, svijete 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": "Pozdrav, svijete 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"
				}
			]
		}
	]
}
Kako izbrisati SMS iz JavaScripta koristeći JavaScript SMS API (Video tutorial)

Ovaj video pokazuje kako preuzeti datoteku ReceiveSms.js.zip s ove stranice. Ako pogledate video, primijetit ćete da su sadržaji ReceiveSms.js zip datoteke smješteni u \www\ mapu WampServera. Također ćete vidjeti da pokrećemo WampServer dvostrukim klikom na njegovu ikonu, a nakon toga upisujemo http://localhost:8080/ReceiveSms.php u web preglednik.

Video 1 - Kako preuzeti i pokrenuti primjerni projekt (Video tutorial)

JavaScript SMS primjer: ReceiveSms.js

Primjerni kod u nastavku dio je ReceiveSms.php PHP datoteke. Osim toga, vidjet ćete još dvije datoteke pod nazivom ReceiveSms.css i Ozeki.Libs.Rest.js.

  • Datoteka Ozeki.Libs.Rest.js sadrži sve potrebne alate za slanje, brisanje, označavanje i primanje SMS poruka.
  • ReceiveSms.php sadrži JavaScript kod i neke zaglavlja koja će nam omogućiti slanje HTTP zahtjeva bez CORS grešaka.
  • ReceiveSms.css sadrži stilsku tablicu za web stranicu.

kako primiti sms koristeći javascript
Slika 3 - ReceiveSms.php

Kako provjeriti je li SMS prihvaćen od strane HTTP korisnika (Video tutorial)

Nakon što je SMS poslan, dobro je provjeriti vaš SMS pristupnik kako biste vidjeli što je primio. Dnevnik možete provjeriti otvaranjem detalja HTTP korisnika iz upravljačke konzole Ozeki SMS pristupnika. Sljedeći video pokazuje što trebate tražiti. Video će započeti s otvorenim kodom i završiti s detaljima poslane poruke. Naučit ćete kako pokrenuti projekt, kako projekt izgleda tijekom rada i kako izgleda datoteka dnevnika nakon toga. Video traje samo 42 sekunde i lako ga je razumjeti. Nećete imati problema s praćenjem.

Video 2 - Kako provjeriti je li SMS prihvaćen od strane HTTP korisnika (Video tutorial)

Sažetak

Ovaj članak pokazuje kako primati SMS poruke iz vaše JavaScript aplikacije koristeći ugrađeni HTTP REST SMS API Ozeki SMS pristupnika. Ako ste pažljivo pratili ovaj vodič, sada možete koristiti dati program za preusmjeravanje primljenih SMS poruka u vaše spremište uz pomoć HTTP korisnika u Ozeki SMS pristupniku. Ovo spremište može se koristiti i mijenjati besplatno, tako da ga možete koristiti u bilo kojem od vaših projekata.

Nastavite čitati članke na Ozeki web stranici, proširujte svoje znanje. Nastavite s vodičem pod naslovom Kako izbrisati SMS u JavaScriptu i naučite koristiti SMS API u druge svrhe.

Krenimo na posao, počnite preuzimati Ozeki SMS pristupnik odmah!

More information