Cum să primești un SMS în Javascript

Cea mai simplă metodă de a primi SMS din JavaScript este utilizarea API-ului HTTP/Rest SMS integrat al Ozeki SMS Gateway. Când folosești acest API, vei primi mesaje SMS prin efectuarea unei cereri HTTP GET către gateway-ul SMS. Cererea HTTP GET va returna un răspuns HTTP 200 OK la cererea ta, precum și mesajele din dosarul selectat.

cum să primești un sms în javascript
Figura 1 - Cum să primești un SMS în Javascript

Cod JavaScript pentru a primi SMS pe mobil

Exemplul de cod JavaScript pentru SMS de mai jos demonstrează cum poți primi mesaje SMS folosind API-ul http rest sms al Ozeki SMS Gateway cu ajutorul bibliotecii JavaScript Ozeki.Libs.Rest. Această bibliotecă este oferită gratuit și poți să o folosești și să o modifici în oricare dintre proiectele tale.

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>Primește SMS cu 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>Descarcă Mesaje Primite</b>
            </button>
        </div>

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

Cum să folosești exemplul JavaScript pentru SMS:

Acest exemplu JavaScript pentru SMS poate fi folosit în orice aplicație web. Pentru a-l folosi, trebuie să adaugi Ozeki.Libs.Rest.js în proiectul tău. După ce este adăugat în proiect, trebuie să introduci directiva import {MessageApi, Configuration} from './Ozeki.Libs.Rest.js'; în secțiunea de antet a codului sursă JavaScript. Acest lucru îți va permite să folosești clasele furnizate de biblioteca Ozeki.Libs.Rest. Poți folosi clasa Message pentru a crea SMS-ul. Poți folosi clasa MessageApi pentru a trimite SMS-ul către gateway-ul SMS. Gateway-ul SMS va transmite mesajul tău către rețeaua mobilă fie printr-o conexiune fără fir, fie prin Internet.

Descarcă ReceiveSms.js

Codul sursă explicat în acest articol poate fi descărcat, folosit și modificat gratuit.
Descarcă: ReceiveSms.js.zip (5.28Kb)

Ce conține fișierul ReceiveSms.js.zip?

Fișierul ReceiveSms.js.zip conține biblioteca Ozeki.Libs.Rest, care îți oferă toate instrumentele necesare pentru a trimite și primi mesaje SMS. De asemenea, vei găsi proiectul ReceiveSms în arhivă, care conține codul exemplu pentru a-ți arăta cum să trimiți un SMS. Acest cod exemplu este listat mai jos.

director receive sms js
Figura 2 - Ce conține ReceiveSms.js.zip

Cum să primești SMS din JavaScript (Ghid simplu)

Pentru a primi SMS din JavaScript:

  1. Instalează un utilizator HTTP API
  2. Activează Log communication events în fila Advanced
  3. Configurează WampServer
  4. Descarcă apoi extrage fișierul ReceiveSms.js.zip
  5. Pune conținutul fișierului zip în folderul \www\ al wampserver: C:\wamp64\www
  6. Lansează aplicația Ozeki SMS Gateway
  7. Deschide site-ul tastând http://localhost/ReceiveSms.php în browser-ul tău
  8. După ce ai deschis site-ul, poți trimite un SMS făcând clic pe butonul DownloadIncoming
  9. Verifică jurnalul pentru a vedea dacă SMS-ul a fost trimis

Instalați Ozeki SMS Gateway și creați un utilizator HTTP API

Pentru a putea trimite SMS din JavaScript, mai întâi trebuie să instalați Ozeki SMS Gateway. Gateway-ul SMS poate fi instalat pe același computer unde dezvoltați codul JavaScript în Visual Studio. După instalare, următorul pas este să conectați Ozeki SMS Gateway la rețeaua mobilă. Puteți creați un utilizator HTTP SMS API. Creați un utilizator cu numele de utilizator "http_user" și parola "qwe123" pentru ca exemplul să funcționeze fără modificări.

După ce mediul este configurat, puteți rula codul JavaScript.

URL-ul API HTTP pentru a primi SMS din JavaScript

Pentru a trimite SMS din JavaScript, codul JavaScript va trebui să trimită o cerere HTTP către gateway-ul SMS. URL-ul API este afișat mai jos. Rețineți că adresa IP (127.0.0.1) ar trebui să fie înlocuită cu adresa IP a gateway-ului SMS. Dacă Ozeki SMS Gateway este instalat pe același computer unde rulează aplicația JavaScript SMS, aceasta poate fi 127.0.0.1. Dacă este instalat pe un computer diferit, ar trebui să fie adresa IP a acelui computer. 

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

Autentificarea HTTP pentru a primi SMS din JavaScript

Pentru a autentifica clientul JavaScript SMS, trebuie să trimiteți numele de utilizator și parola într-un șir codificat base64 către server într-o cerere HTTP. Formatul utilizat este: base64(nume_utilizator+":"+parolă). În JavaScript puteți folosi următorul cod pentru această codificare: 

// Puteți găsi codificatorul Base64 în fișierul Ozeki.Libs.Rest.js 
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;

De exemplu, dacă codificați numele de utilizator 'http_user' și parola 'qwe123', veți obține următorul șir codificat base64: aHR0cF91c2VyOnF3ZTEyMw==. Pentru a trimite

Antetul cererii HTTP pentru a primi SMS din JavaScript

Pentru a trimite mesajele SMS, trebuie să includeți următoarele linii ca antete în cererea HTTP. Rețineți că includem un antet pentru tipul conținutului și unul pentru autorizare. 

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

Cererea HTTP pentru a trimite SMS din JavaScript

Pentru a trimite SMS, aplicația JavaScript va trimite o cerere HTTP similară cu cea de mai jos. Rețineți că această cerere conține o parte de antet HTTP care include numele de utilizator și parola utilizatorului http_user. 

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

Răspunsul HTTP primit de exemplul JavaScript SMS

Odată ce gateway-ul SMS primește această cerere, va genera un răspuns HTTP. Răspunsul HTTP va conține un cod de stare, pentru a indica dacă cererea de trimitere SMS a fost reușită sau nu. De asemenea, va returna o structură codificată JSON pentru a vă oferi detalii utile despre trimiterea mesajului. 

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": "Bună, Lume 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": "Bună, Lume 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": "Bună, Lume 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"
				}
			]
		}
	]
}

Cum să ștergi SMS-uri din JavaScript folosind API-ul SMS JavaScript (Tutorial video)

Acest videoclip vă arată cum să descărcați fișierul ReceiveSms.js.zip de pe această pagină. Dacă urmăriți videoclipul, veți observa că conținutul arhivei ReceiveSms.js este plasat în folderul \www\ al WampServer-ului. De asemenea, veți vedea că pornim WampServer-ul dând dublu clic pe pictograma sa, iar apoi introducem http://localhost:8080/ReceiveSms.php în browserul web.

Video 1 - Cum să descărcați și să rulați proiectul exemplu (Tutorial video)

Exemplu SMS în JavaScript: ReceiveSms.js

Codul exemplu de mai jos face parte din fișierul PHP ReceiveSms.php. Pe lângă acesta, veți vedea alte două fișiere numite ReceiveSms.css și Ozeki.Libs.Rest.js.

  • Fișierul Ozeki.Libs.Rest.js conține toate instrumentele necesare pentru a trimite, șterge, marca și primi mesaje SMS.
  • ReceiveSms.php conține codul JavaScript și câteva antete care ne vor permite să trimitem cereri HTTP fără erori CORS.
  • ReceiveSms.css conține fișierul de stil pentru pagina web.

how to receive sms using javascript
Figura 3 - ReceiveSms.php

Cum să verifici dacă SMS-ul a fost acceptat de utilizatorul HTTP (Tutorial video)

După ce SMS-ul a fost trimis, este bine să verifici gateway-ul SMS, pentru a vedea ce a primit. Puteți verifica jurnalul deschizând detaliile utilizatorului HTTP din consola de management Ozeki SMS Gateway. Următorul videoclip vă arată ce să căutați. Videoclipul va începe cu codul deschis și se va încheia cu detaliile mesajului trimis. Veți învăța cum să lansați proiectul, cum arată proiectul în timpul rulării și cum arată fișierul jurnal după aceea. Videoclipul durează doar 42 de secunde și este ușor de înțeles. Nu veți avea probleme să-l urmăriți.

Video 2 - Cum să verifici dacă SMS-ul a fost acceptat de utilizatorul HTTP (Tutorial video)

Rezumat

Acest articol vă arată cum să primiți mesaje SMS din aplicația dvs. JavaScript folosind API-ul HTTP REST SMS integrat în Ozeki SMS Gateway. Dacă ați urmărit cu atenție acest ghid, acum puteți folosi programul dat pentru a redirecționa mesajele SMS primite către stocarea dvs. cu ajutorul utilizatorului HTTP din Ozeki SMS Gateway. Acest depozit poate fi utilizat și modificat gratuit, astfel încât îl puteți utiliza în oricare dintre proiectele dvs.

Continuați să citiți articole pe site-ul Ozeki, extindeți-vă cunoștințele. Continuați cu ghidul intitulat Cum să ștergi un SMS în JavaScript și învățați să folosiți API-ul SMS pentru alte scopuri.

Să trecem la treabă, începeți să descărcați Ozeki SMS Gateway acum!

More information