Kako prejeti SMS v Javascriptu

Najenostavnejši način za prejemanje SMS-ov iz JavaScripta je uporaba vgrajenega HTTP/Rest SMS API-ja Ozeki SMS Gateway. Ko uporabljate ta API, boste prejeli SMS sporočila z izdajo HTTP GET zahteve do SMS prehoda. HTTP GET zahteva bo vrnila HTTP 200 OK odgovor na vašo zahtevo in sporočila znotraj izbrane mape.

kako prejeti sms v javascriptu
Slika 1 - Kako prejeti SMS v Javascriptu

JavaScript koda za prejemanje SMS-ov na mobilno napravo

Spodnji JavaScript vzorec kode za SMS prikazuje, kako lahko prejemate SMS sporočila z uporabo http rest sms api-ja Ozeki SMS Gateway z uporabo JavaScript knjižnice 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.

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>Prejemanje SMS 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="ReceiveSms.css">
    </head>
    <body>

        <div class="form-container">
            <button class="btn btn-primary" id="btnDownloadIncoming">
                <b>Prejemi dohodne</b>
            </button>
        </div>

        <div class="card log-container">
            <ul class="log" id="container">
                <li class="list-group-item"><b>Dnevniki:</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 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. Po dodajanju v vaš projekt morate vstaviti import {MessageApi, Configuration} from './Ozeki.Libs.Rest.js'; navodilo v glavni del vaše JavaScript izvorne kode. To vam bo omogočilo uporabo razredov, ki jih ponuja knjižnica Ozeki.Libs.Rest. Uporabite lahko razred Message za ustvarjanje SMS-ja. Uporabite lahko razred MessageApi za pošiljanje SMS-ja do SMS prehoda. SMS prehod bo vaše sporočilo posredoval v mobilno omrežje prek brezžične povezave ali prek interneta.

Prenesite ReceiveSms.js

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

Kaj je v datoteki ReceiveSms.js.zip?

Datoteka ReceiveSms.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 ReceiveSms, ki vsebuje primer kode, ki vam pokaže, kako poslati SMS. Ta primer kode je naveden spodaj.

prejemi sms js mapa
Slika 2 - Kaj je v ReceiveSms.js.zip

Kako prejeti SMS iz JavaScripta (Preproste smernice)

Za prejemanje SMS-ov 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 ReceiveSms.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/ReceiveSms.php
  8. Ko odprete spletno stran, lahko pošljete SMS s klikom na gumb Prejemi dohodne
  9. Preverite dnevnike, da vidite, ali je bil SMS poslan

Namestite Ozeki SMS Gateway in ustvarite uporabnika HTTP API

Za pošiljanje SMS sporočil 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 ustvarjanje uporabniškega računa HTTP SMS API. Ustvarite uporabnika z uporabniškim imenom "http_user" in geslom "qwe123", da bo primer deloval brez sprememb.

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

URL HTTP API za prejemanje SMS iz JavaScripta

Za pošiljanje SMS sporočil iz JavaScripta mora vaša JavaScript koda poslati HTTP zahtevek k 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, lahko to ostane 127.0.0.1. Če je nameščen na drugem računalniku, morate uporabiti IP naslov tega računalnika. 

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

HTTP avtentikacija za prejemanje SMS iz JavaScripta

Za avtentikacijo JavaScript SMS odjemalca morate poslati uporabniško ime in geslo v obliki base64 kodiranega niza na strežnik v HTTP zahtevku. Uporabljen format je: base64(username+":"+password). V JavaScriptu lahko uporabite naslednjo kodo za to kodiranje: 

// Base64 kodirnik 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 base64 kodiran niz: aHR0cF91c2VyOnF3ZTEyMw==. Za pošiljanje

Glava HTTP zahtevka za prejemanje SMS iz JavaScripta

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

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

HTTP zahtevek za pošiljanje SMS iz JavaScripta

Za oddajo SMS sporočila bo vaša JavaScript aplikacija poslala HTTP zahtevek, podoben spodnjemu. Upoštevajte, da ta zahtevek vsebuje del glave HTTP, ki vključuje uporabniško ime in geslo uporabnika http_user. 

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

HTTP odziv, ki ga prejme JavaScript SMS primer

Ko SMS gateway prejme ta zahtevek, bo ustvaril HTTP odziv. HTTP odziv bo vseboval statusno kodo, ki označuje, 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.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": "Pozdravljen, svet 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": "Pozdravljen, svet 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": "Pozdravljen, svet 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 z uporabo JavaScript SMS API (Video vadnica)

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

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

Primer SMS v JavaScriptu: ReceiveSms.js

Spodnja primer kode je del datoteke ReceiveSms.php. Poleg tega boste videli še dve drugi datoteki, imenovani ReceiveSms.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.
  • ReceiveSms.php vsebuje kodo JavaScript, in nekatere glave, ki nam bodo omogočile pošiljanje HTTP zahtev brez napak CORS.
  • ReceiveSms.css vsebuje slogovno datoteko za spletno stran.

kako prejemati sms z javascriptom
Slika 3 - ReceiveSms.php

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

Po oddaji SMS-a je dobro preveriti vaš SMS prehod, da vidite, kaj je prejel. Dnevnik lahko preverite tako, da odprete podrobnosti HTTP uporabnika v upravljalski 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 preveriti, ali je SMS sprejel HTTP uporabnik (Video vadnica)

Povzetek

Ta članek vam pokaže, kako prejemati SMS sporočila iz vaše JavaScript aplikacije z uporabo vgrajenega HTTP REST SMS API-ja Ozeki SMS Gateway. Če ste pozorno sledili tem navodilom, lahko zdaj uporabljate dani program za preusmerjanje prejetih SMS sporočil v vašo shrambo s pomočjo HTTP uporabnika v Ozeki SMS Gateway. Ta repozitorij je mogoče brezplačno uporabljati in spreminjati, zato ga lahko uporabite v katerem koli od svojih projektov.

Nadaljujte z branjem člankov na spletnem mestu Ozeki, širite svoje znanje. Nadaljujte z vodnikom z naslovom Kako izbrisati SMS v JavaScriptu, in se naučite uporabljati SMS API za druge namene.

Pridimo k delu, začnite s prenosom Ozeki SMS Gateway zdaj!

More information