Wie man eine SMS in Javascript empfängt
Der einfachste Weg, SMS von JavaScript zu empfangen, ist die Verwendung der integrierten HTTP/Rest-SMS-API von Ozeki SMS Gateway. Wenn Sie diese API verwenden, erhalten Sie SMS-Nachrichten, indem Sie eine HTTP-GET-Anfrage an das SMS-Gateway senden. Die HTTP-GET-Anfrage gibt eine HTTP-200-OK-Antwort auf Ihre Anfrage zurück und die Nachrichten innerhalb des ausgewählten Ordners.
JavaScript-Code zum Empfangen von SMS auf dem Handy
Das folgende JavaScript-SMS-Codebeispiel zeigt, wie Sie SMS-Nachrichten mit der HTTP-Rest-SMS-API von Ozeki SMS Gateway unter Verwendung der JavaScript-Bibliothek Ozeki.Libs.Rest empfangen können. Diese Bibliothek wird Ihnen kostenlos zur Verfügung gestellt, und Sie können sie in Ihren Projekten verwenden und modifizieren.
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>SMS empfangen mit 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>DownloadIncoming</b>
</button>
</div>
<div class="card log-container">
<ul class="log" id="container">
<li class="list-group-item"><b>Logs:</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>
Wie man das JavaScript-SMS-Beispiel verwendet:
Dieses JavaScript-SMS-Beispiel kann in jeder Webanwendung verwendet werden. Um es zu verwenden, müssen Sie die Ozeki.Libs.Rest.js zu Ihrem Projekt hinzufügen. Nachdem sie Ihrem Projekt hinzugefügt wurde, müssen Sie die import {MessageApi, Configuration} from './Ozeki.Libs.Rest.js'; Direktive in den Header-Bereich Ihres JavaScript-Quellcodes einfügen. Dies ermöglicht Ihnen die Verwendung der Klassen, die von der Ozeki.Libs.Rest-Bibliothek bereitgestellt werden. Sie können die Message-Klasse verwenden, um die SMS zu erstellen. Sie können die MessageApi-Klasse verwenden, um die SMS an das SMS-Gateway zu senden. Das SMS-Gateway leitet Ihre Nachricht entweder über eine drahtlose Verbindung oder über das Internet an das Mobilfunknetz weiter.
ReceiveSms.js herunterladen
Der in diesem Artikel erklärte Quellcode kann kostenlos heruntergeladen, verwendet und modifiziert werden.
Download: ReceiveSms.js.zip (5.28Kb)
Was befindet sich in der ReceiveSms.js.zip-Datei?
Die ReceiveSms.js.zip-Datei enthält die Ozeki.Libs.Rest-Bibliothek, die Ihnen alle notwendigen Werkzeuge zum Senden und Empfangen von SMS-Nachrichten bietet. Sie finden auch das ReceiveSms-Projekt in der Zip-Datei, das den Beispielcode enthält, der Ihnen zeigt, wie Sie eine SMS senden können. Dieser Beispielcode ist unten aufgeführt.
Wie man SMS von JavaScript empfängt (Einfache Anleitung)
Um SMS von JavaScript zu empfangen:
- Installieren Sie einen HTTP-API-Benutzer
- Aktivieren Sie "Log communication events" auf der Registerkarte "Advanced"
- Richten Sie WampServer ein
- Laden Sie die ReceiveSms.js.zip-Datei herunter und entpacken Sie sie
- Legen Sie den Inhalt der Zip-Datei in den \www\-Ordner des WampServers: C:\wamp64\www
- Starten Sie die Ozeki SMS Gateway App
- Öffnen Sie die Website, indem Sie http://localhost/ReceiveSms.php in Ihren Browser eingeben
- Nachdem Sie die Website geöffnet haben, können Sie eine SMS senden, indem Sie auf den DownloadIncoming-Button klicken
- Überprüfen Sie die Logs, um zu sehen, ob die SMS gesendet wurde
Ozeki SMS Gateway installieren und einen HTTP API-Benutzer erstellen
Um SMS von JavaScript aus senden zu können, müssen Sie zunächst Ozeki SMS Gateway installieren. Das SMS-Gateway kann auf demselben Computer installiert werden, auf dem Sie Ihren JavaScript-Code in Visual Studio entwickeln. Nach der Installation besteht der nächste Schritt darin, Ozeki SMS Gateway mit dem Mobilfunknetz zu verbinden. Sie können einen HTTP-SMS-API-Benutzer zu erstellen. Erstellen Sie einen Benutzer mit dem Benutzernamen "http_user" und dem Passwort "qwe123", damit das Beispiel ohne Änderungen funktioniert.
Nachdem die Umgebung eingerichtet ist, können Sie Ihren JavaScript-Code ausführen.
HTTP-API-URL zum Empfangen von SMS von JavaScript
Um SMS von JavaScript aus zu senden, muss Ihr JavaScript eine HTTP-Anfrage an das SMS-Gateway senden. Die API-URL wird unten angezeigt. Beachten Sie, dass die IP-Adresse (127.0.0.1) durch die IP-Adresse Ihres SMS-Gateways ersetzt werden sollte. Wenn Ozeki SMS Gateway auf demselben Computer installiert ist, auf dem die JavaScript-SMS-Anwendung läuft, kann dies 127.0.0.1 sein. Wenn es auf einem anderen Computer installiert ist, sollte es die IP-Adresse dieses Computers sein.
http://127.0.0.1:9509/api?action=rest
HTTP-Authentifizierung zum Empfangen von SMS von JavaScript
Um den JavaScript-SMS-Client zu authentifizieren, müssen Sie den Benutzernamen und das Passwort in einer base64-kodierten Zeichenkette in einer HTTP-Anfrage an den Server senden. Das verwendete Format lautet: base64(Benutzername+":"+Passwort). In JavaScript können Sie den folgenden Code für diese Kodierung verwenden:
// Den Base64-Encoder finden Sie in der Datei Ozeki.Libs.Rest.js
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;
Wenn Sie beispielsweise den Benutzernamen 'http_user' und das Passwort 'qwe123' kodieren, erhalten Sie die folgende base64-kodierte Zeichenkette: aHR0cF91c2VyOnF3ZTEyMw==. Zum Senden
HTTP-Anfrageheader zum Empfangen von SMS von JavaScript
Um die SMS-Nachrichten zu senden, müssen Sie die folgenden Zeilen als Header in die HTTP-Anfrage aufnehmen. Beachten Sie, dass wir einen Content-Type-Header und einen Authorization-Header einfügen.
Content-Type: application/json Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
HTTP-Anfrage zum Senden von SMS von JavaScript
Um die SMS zu übermitteln, sendet Ihre JavaScript-Anwendung eine HTTP-Anfrage ähnlich der unten gezeigten. Beachten Sie, dass diese Anfrage einen HTTP-Header-Teil enthält, der den Benutzernamen und das Passwort des http_user enthält.
GET /api?action=receivemsg&folder=inbox HTTP/1.1 Connection: Keep-Alive Authorization: Basic aHR0cF91c2VyOnF3ZTEyMw== Host: 127.0.0.1:9509
HTTP-Antwort, die vom JavaScript-SMS-Beispiel empfangen wird
Sobald das SMS-Gateway diese Anfrage empfängt, wird es eine HTTP-Antwort generieren. Die HTTP-Antwort enthält einen Statuscode, der angibt, ob die SMS-Übermittlungsanfrage erfolgreich war oder nicht. Sie gibt auch eine JSON-kodierte Struktur zurück, die Ihnen nützliche Details über die Übermittlung der Nachricht liefert.
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"
}
]
}
]
}
Dieses Video zeigt Ihnen, wie Sie die Datei ReceiveSms.js.zip von dieser Seite herunterladen können. Wenn Sie das Video ansehen, werden Sie feststellen, dass die Inhalte der ReceiveSms.js-Zip in den Ordner \www\ des WampServers platziert werden. Sie werden auch sehen, dass wir den WampServer starten, indem wir zweimal auf sein Icon klicken, und danach geben wir http://localhost:8080/ReceiveSms.php in den Webbrowser ein.
JavaScript SMS-Beispiel: ReceiveSms.js
Der Beispielcode unten ist Teil der ReceiveSms.php PHP-Datei. Darüber hinaus sehen Sie zwei weitere Dateien namens ReceiveSms.css und Ozeki.Libs.Rest.js.
- Die Ozeki.Libs.Rest.js Datei enthält alle notwendigen Tools, um SMS-Nachrichten zu senden, zu löschen, zu markieren und zu empfangen.
- Die ReceiveSms.php enthält den JavaScript-Code und einige Header, die es uns ermöglichen, HTTP-Anfragen ohne CORS-Fehler zu senden.
- Die ReceiveSms.css enthält das Stylesheet für die Webseite.
Wie man überprüft, ob die SMS vom HTTP-Benutzer akzeptiert wurde (Video-Tutorial)
Nachdem die SMS übermittelt wurde, ist es eine gute Idee, Ihr SMS-Gateway zu überprüfen, um zu sehen, was es empfangen hat. Sie können das Protokoll überprüfen, indem Sie die Details des HTTP-Benutzers in der Ozeki SMS Gateway Management-Konsole öffnen. Das folgende Video zeigt Ihnen, worauf Sie achten müssen. Das Video beginnt mit dem geöffneten Code und endet mit den Details der gesendeten Nachricht. Sie lernen, wie Sie das Projekt starten, wie das Projekt während der Ausführung aussieht und wie die Protokolldatei danach aussieht. Das Video ist nur 42 Sekunden lang und leicht verständlich. Sie werden keine Probleme haben, ihm zu folgen.
Zusammenfassung
Dieser Artikel zeigt Ihnen, wie Sie SMS-Nachrichten von Ihrer JavaScript-Anwendung mit der integrierten HTTP REST SMS API des Ozeki SMS Gateways empfangen können. Wenn Sie dieser Anleitung aufmerksam gefolgt sind, können Sie nun das gegebene Programm verwenden, um die empfangenen SMS-Nachrichten mit Hilfe des HTTP-Benutzers im Ozeki SMS Gateway an Ihren Speicher weiterzuleiten. Dieses Repository kann kostenlos verwendet und modifiziert werden, sodass Sie es in jedem Ihrer Projekte nutzen können.
Lesen Sie weiter Artikel auf der Ozeki-Website, erweitern Sie Ihr Wissen. Fahren Sie mit der Anleitung mit dem Titel Wie man eine SMS in JavaScript löscht fort und lernen Sie, die SMS API für andere Zwecke zu nutzen.
Lassen Sie uns an die Arbeit gehen, laden Sie das Ozeki SMS Gateway jetzt herunter!
More information
- SMS mit der HTTP-REST-API in Javascript senden (Codebeispiel)
- Mehrere SMS mit der HTTP-REST-API in Javascript senden (Codebeispiel)
- Geplante SMS mit der HTTP-REST-API in Javascript senden (Codebeispiel)
- SMS mit der HTTP-REST-API in Javascript empfangen (Codebeispiel)
- SMS mit der HTTP-REST-API in Javascript löschen (Codebeispiel)
- Die neueste JavaScript-SMS-API-Bibliothek von Github herunterladen