Jak odbierać SMS w JavaScript
Najprostszym sposobem na odbieranie SMS-ów w JavaScript jest użycie wbudowanego interfejsu HTTP/Rest SMS API bramki SMS Ozeki. Korzystając z tego API, możesz odbierać wiadomości SMS poprzez wysłanie żądania HTTP GET do bramki SMS. Żądanie HTTP GET zwróci odpowiedź HTTP 200 OK oraz wiadomości znajdujące się w wybranym folderze.
Kod JavaScript do odbierania SMS-ów na telefon
Poniższy przykładowy kod JavaScript do obsługi SMS demonstruje, jak można odbierać wiadomości SMS przy użyciu interfejsu HTTP REST SMS API bramki SMS Ozeki z wykorzystaniem biblioteki JavaScript Ozeki.Libs.Rest. Ta biblioteka jest dostarczana bezpłatnie i można ją używać oraz modyfikować w dowolnym projekcie.
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>Odbieranie SMS z bramką SMS Ozeki</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>Pobierz przychodzące</b>
</button>
</div>
<div class="card log-container">
<ul class="log" id="container">
<li class="list-group-item"><b>Logi:</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>
Jak używać przykładu JavaScript do obsługi SMS:
Ten przykład JavaScript do obsługi SMS może być używany w dowolnej aplikacji internetowej. Aby go użyć, musisz dodać plik Ozeki.Libs.Rest.js do swojego projektu. Po dodaniu go do projektu, należy umieścić dyrektywę import {MessageApi, Configuration} from './Ozeki.Libs.Rest.js'; w sekcji nagłówka swojego kodu źródłowego JavaScript. Pozwoli to na korzystanie z klas dostarczonych przez bibliotekę Ozeki.Libs.Rest. Możesz użyć klasy Message do tworzenia SMS-ów. Możesz użyć klasy MessageApi do wysłania SMS-a do bramki SMS. Bramka SMS przekaże Twoją wiadomość do sieci komórkowej poprzez połączenie bezprzewodowe lub przez Internet.
Pobierz ReceiveSms.js
Kod źródłowy omówiony w tym artykule można pobrać, używać i modyfikować bezpłatnie.
Pobierz: ReceiveSms.js.zip (5.28Kb)
Co znajduje się w pliku ReceiveSms.js.zip?
Plik ReceiveSms.js.zip zawiera bibliotekę Ozeki.Libs.Rest, która dostarcza wszystkie narzędzia niezbędne do wysyłania i odbierania wiadomości SMS. Znajdziesz tam również projekt ReceiveSms, który zawiera przykładowy kod pokazujący, jak wysłać SMS. Ten przykładowy kod jest wymieniony poniżej.
Jak odbierać SMS-y z JavaScript (Proste wskazówki)
Aby odbierać SMS-y z JavaScript:
- Zainstaluj użytkownika HTTP API
- Włącz opcję Logowanie zdarzeń komunikacyjnych w zakładce Zaawansowane
- Skonfiguruj WampServer
- Pobierz, a następnie rozpakuj plik ReceiveSms.js.zip
- Umieść zawartość pliku zip w folderze \www\ wampServera: C:\wamp64\www
- Uruchom aplikację Ozeki SMS Gateway
- Otwórz stronę internetową, wpisując http://localhost/ReceiveSms.php w przeglądarce
- Po otwarciu strony możesz wysłać SMS, klikając przycisk Pobierz przychodzące
- Sprawdź logi, aby zobaczyć, czy SMS został wysłany
Zainstaluj Ozeki SMS Gateway i utwórz użytkownika HTTP API
Aby móc wysyłać SMS-y z JavaScript, najpierw musisz zainstalować Ozeki SMS Gateway. Bramka SMS może być zainstalowana na tym samym komputerze, na którym tworzysz swój kod JavaScript w Visual Studio. Po instalacji kolejnym krokiem jest podłączenie Ozeki SMS Gateway do sieci komórkowej. Możesz utworzenie użytkownika HTTP SMS API. Utwórz użytkownika z nazwą "http_user" i hasłem "qwe123", aby przykład działał bez modyfikacji.
Po skonfigurowaniu środowiska możesz uruchomić swój kod JavaScript.
URL API HTTP do odbierania SMS-ów z JavaScript
Aby wysyłać SMS-y z JavaScript, Twój kod JavaScript będzie musiał wysłać żądanie HTTP do bramki SMS. URL API jest pokazany poniżej. Pamiętaj, że adres IP (127.0.0.1) należy zastąpić adresem IP Twojej bramki SMS. Jeśli Ozeki SMS Gateway jest zainstalowany na tym samym komputerze, na którym działa aplikacja SMS w JavaScript, może to być 127.0.0.1. Jeśli jest zainstalowany na innym komputerze, powinien to być adres IP tego komputera.
http://127.0.0.1:9509/api?action=rest
Uwierzytelnianie HTTP do odbierania SMS-ów z JavaScript
Aby uwierzytelnić klienta SMS w JavaScript, należy wysłać nazwę użytkownika i hasło w zakodowanym ciągu base64 do serwera w żądaniu HTTP. Używany format to: base64(nazwa_użytkownika+":"+hasło). W JavaScript możesz użyć następującego kodu do wykonania tego kodowania:
// Enkoder Base64 można znaleźć w pliku Ozeki.Libs.Rest.js
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;
Na przykład, jeśli zakodujesz nazwę użytkownika 'http_user' i hasło 'qwe123', otrzymasz następujący zakodowany ciąg base64: aHR0cF91c2VyOnF3ZTEyMw==. Aby wysłać
Nagłówek żądania HTTP do odbierania SMS-ów z JavaScript
Aby wysyłać wiadomości SMS, należy uwzględnić następujące linie jako nagłówki w żądaniu HTTP. Zwróć uwagę, że zawieramy nagłówek Content-Type i Authorization.
Content-Type: application/json Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Żądanie HTTP do wysyłania SMS-ów z JavaScript
Aby przesłać SMS, Twoja aplikacja JavaScript wyśle żądanie HTTP podobne do poniższego. Zwróć uwagę, że to żądanie zawiera część nagłówka HTTP, która zawiera nazwę użytkownika i hasło http_user.
GET /api?action=receivemsg&folder=inbox HTTP/1.1 Connection: Keep-Alive Authorization: Basic aHR0cF91c2VyOnF3ZTEyMw== Host: 127.0.0.1:9509
Odpowiedź HTTP otrzymana przez przykład SMS w JavaScript
Gdy bramka SMS otrzyma to żądanie, wygeneruje odpowiedź HTTP. Odpowiedź HTTP będzie zawierać kod statusu, aby wskazać, czy żądanie wysłania SMS zakończyło się sukcesem, czy nie. Zwróci również strukturę zakodowaną w JSON, aby dostarczyć przydatne informacje o przesłaniu wiadomości.
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": "Hello, World 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": "Hello, World 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": "Hello, World 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"
}
]
}
]
}
Ten film pokazuje, jak pobrać plik ReceiveSms.js.zip z tej strony. Jeśli obejrzysz film, zauważysz, że zawartość pliku zip ReceiveSms.js jest umieszczana w folderze \www\ serwera WampServer. Zobaczysz również, że uruchamiamy WampServer, klikając dwukrotnie jego ikonę, a następnie wpisując http://localhost:8080/ReceiveSms.php w przeglądarce internetowej.
Przykład SMS w JavaScript: ReceiveSms.js
Poniższy przykładowy kod jest częścią pliku PHP ReceiveSms.php. Oprócz tego zobaczysz dwa inne pliki o nazwach ReceiveSms.css i Ozeki.Libs.Rest.js.
- Plik Ozeki.Libs.Rest.js zawiera wszystkie niezbędne narzędzia do wysyłania, usuwania, oznaczania i odbierania wiadomości SMS.
- ReceiveSms.php zawiera kod JavaScript oraz niektóre nagłówki, które pozwolą nam wysyłać żądania HTTP bez błędów CORS.
- ReceiveSms.css zawiera arkusz stylów dla strony internetowej.
Jak sprawdzić, czy SMS został zaakceptowany przez użytkownika HTTP (Samouczek wideo)
Po wysłaniu SMS-a warto sprawdzić w bramce SMS, co otrzymała. Możesz sprawdzić log, otwierając szczegóły użytkownika HTTP w konsoli zarządzania Ozeki SMS Gateway. Poniższy film pokazuje, na co zwrócić uwagę. Film rozpoczyna się od otwartego kodu i kończy na szczegółach wysłanej wiadomości. Dowiesz się, jak uruchomić projekt, jak wygląda projekt podczas działania i jak wygląda plik dziennika po jego zakończeniu. Film trwa tylko 42 sekundy i jest łatwy do zrozumienia. Nie będziesz miał problemu z jego śledzeniem.
Podsumowanie
Ten artykuł pokazuje, jak odbierać wiadomości SMS z aplikacji JavaScript przy użyciu wbudowanego interfejsu API REST SMS Ozeki SMS Gateway. Jeśli uważnie śledziłeś ten przewodnik, teraz możesz użyć podanego programu, aby przekierować odebrane wiadomości SMS do swojego magazynu za pomocą użytkownika HTTP w Ozeki SMS Gateway. To repozytorium może być używane i modyfikowane bezpłatnie, więc możesz wykorzystać je w dowolnym projekcie.
Czytaj dalej artykuły na stronie Ozeki, poszerzaj swoją wiedzę. Kontynuuj przewodnik zatytułowany Jak usunąć SMS w JavaScript i naucz się używać interfejsu API SMS do innych celów.
Do dzieła, zacznij pobierać Ozeki SMS Gateway już teraz!
More information
- Wysyłanie SMS w JavaScript z użyciem REST API (przykład kodu)
- Wysyłanie wielu SMS w JavaScript z użyciem REST API (przykład kodu)
- Planowanie SMS w JavaScript z użyciem REST API (przykład kodu)
- Odbieranie SMS w JavaScript z użyciem REST API (przykład kodu)
- Usuwanie SMS w JavaScript z użyciem REST API (przykład kodu)
- Jak pobrać najnowszą bibliotekę API SMS JavaScript z Githuba