SMS-Versand mit Javascript
Der einfachste Weg, SMS mit JavaScript zu versenden, ist die Verwendung der integrierten HTTP/Rest-SMS-API von Ozeki SMS Gateway. Wenn Sie diese API verwenden, senden Sie SMS-Nachrichten, indem Sie eine HTTP-Post-Anfrage an das SMS-Gateway stellen. Die HTTP-Post-Anfrage enthält eine Nachricht im JSON-Format. Das SMS-Gateway sendet diese SMS an die Empfängertelefonnummer und gibt eine HTTP-200-OK-Antwort auf Ihre Anfrage zurück.
JavaScript-Code zum Senden von SMS an Mobiltelefone
Das folgende JavaScript-SMS-Codebeispiel zeigt, wie Sie SMS mit der HTTP-Rest-SMS-API von Ozeki SMS Gateway unter Verwendung der JavaScript-Bibliothek Ozeki.Libs.Rest senden können. Diese Bibliothek wird Ihnen kostenlos zur Verfügung gestellt und Sie können sie in Ihren Projekten verwenden und modifizieren.
SendSms.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-Versand 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="SendSms.css">
</head>
<body>
<div class="form-group form-container">
<b>Empfänger:</b>
<input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
<b>Text:</b>
<input class="form-control" type="text" id="Text" placeholder="Hallo Welt!">
<button class="btn btn-primary" id="btnSend">
<b>SENDEN</b>
</button>
</div>
<div class="log-container">
<ul class="card log" id="log-container">
<li class="list-group-item"><b>Protokoll:</b></li>
</ul>
</div>
<script type="module">
import { Configuration, Message, MessageApi } from "./Ozeki.Libs.Rest.js";
var btnSend = document.getElementById("btnSend");
var configuration = new Configuration();
configuration.Username = 'http_user';
configuration.Password = 'qwe123';
configuration.ApiUrl = 'http://127.0.0.1:9509/api';
var api = new MessageApi(configuration);
btnSend.addEventListener("click", async function() {
var msg = new Message();
msg.ToAddress = document.getElementById("ToAddress").value;
msg.Text = document.getElementById("Text").value;
let result = await api.Send(msg);
document.getElementById('log-container').innerHTML += `<li class="list-group-item">${result}</li>`;
});
</script>
</body>
</html>
Verwendung des JavaScript-SMS-Beispiels:
Dieses JavaScript-SMS-Beispiel kann in jeder Webanwendung verwendet werden. Um es zu nutzen, müssen Sie die Datei Ozeki.Libs.Rest.js zu Ihrem Projekt hinzufügen. Nachdem sie hinzugefügt wurde, müssen Sie die Direktive import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; in den Kopfbereich Ihres JavaScript-Quellcodes einfügen. Dies ermöglicht Ihnen die Verwendung der Klassen der Ozeki.Libs.Rest-Bibliothek. Sie können die Message-Klasse verwenden, um die SMS zu erstellen. Mit der MessageApi-Klasse können Sie die SMS an das SMS-Gateway senden. Das SMS-Gateway leitet Ihre Nachricht entweder über eine drahtlose Verbindung oder über das Internet an das Mobilfunknetz weiter.
SendSms.js herunterladen
Der in diesem Artikel erklärte Quellcode kann kostenlos heruntergeladen, verwendet und modifiziert werden.
Download: SendSms.js.zip (5,3 KB)
Was befindet sich in der Datei SendSms.js.zip?
Die Datei SendSms.js.zip enthält die Ozeki.Libs.Rest-Bibliothek, die Ihnen alle notwendigen Werkzeuge zum Senden und Empfangen von SMS-Nachrichten bietet. Sie finden auch das SendSms-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.
SMS-Versand mit JavaScript (Einfache Anleitung)
So senden Sie SMS mit JavaScript:
- Installieren Sie einen HTTP-API-Benutzer
- Aktivieren Sie "Log communication events" auf der Registerkarte "Advanced"
- Laden Sie WampServer herunter und installieren Sie es
- Laden Sie die Datei SendSms.js.zip herunter und entpacken Sie sie
- Legen Sie den Inhalt der ZIP-Datei in den Ordner \www\ des WampServers: C:\wamp64\www
- Starten Sie die Ozeki SMS Gateway App
- Öffnen Sie die Website, indem Sie http://localhost/SendSms.php in Ihren Browser eingeben
- Nachdem Sie die Website geöffnet haben, können Sie eine SMS senden, indem Sie auf die Schaltfläche "Senden" klicken
- Überprüfen Sie die Protokolle, um zu sehen, ob die SMS gesendet wurde
Installieren Sie Ozeki SMS Gateway und erstellen Sie einen HTTP API-Benutzer
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 ist der nächste Schritt, Ozeki SMS Gateway mit dem Mobilfunknetz zu verbinden. Sie können Erstellung eines HTTP-SMS-API-Benutzerkontos. 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 Senden von SMS von JavaScript aus
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 Senden von SMS von JavaScript aus
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 Senden von SMS von JavaScript aus
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 aus
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 und einen HTTP-Body-Teil enthält. Der HTTP-Body ist eine JSON-kodierte Datenzeichenkette. Sie enthält die Empfängernummer und den Text der Nachricht.
POST /api?action=sendmsg HTTP/1.1
Connection: close
Content-Length: 418
Content-Type: text/plain;charset=UTF-8
Accept: */*
Authorization: Basic aHR0cF91c2VyOnF3ZTEyMw==
Host: 127.0.0.1:9509
User-Agent: node-XMLHttpRequest
{
"messages": [
{
"message_id": "ca3be75b-f55d-9237-adee-e425007cd253",
"to_address": "+36201111111",
"text": "Hello world!",
"create_date": "2021-07-30T11:14:56",
"vaild_date": "2021-08-06T11:14:56",
"time_to_send": "2021-07-30T11:14:56",
"submit_report_requested": true,
"delivery_report_requested": true,
"view_report_requested": true
}
]
}
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.123 (www.myozeki.com)
Content-Type: application/json; charset=utf8
Last-Modified: Fri, 30 Jul 2021 11:03:09 GMT
Server: 10/10.3.123
Transfer-Encoding: chunked
{
"http_code": 200,
"response_code": "SUCCESS",
"response_msg": "Messages queued for delivery.",
"data": {
"total_count": 1,
"success_count": 1,
"failed_count": 0,
"messages": [
{
"message_id": "ca3be75b-f55d-9237-adee-e425007cd253",
"from_station": "%",
"to_address": "+36201111111",
"to_station": "%",
"text": "Hello world!",
"create_date": "2021-07-30 11:14:56",
"valid_until": "2021-08-06 11:14:56",
"time_to_send": "2021-07-30 11:14:56",
"submit_report_requested": true,
"delivery_report_requested": true,
"view_report_requested": false,
"tags": [
{
"name": "Type",
"value": "SMS:TEXT"
}
],
"status": "SUCCESS"
}
]
}
}
Verbinden Sie Ihr SMS-Gateway mit dem Mobilfunknetz und erstellen Sie ein HTTP-API-Benutzerkonto
Wir gehen davon aus, dass Sie bereits Ozeki SMS Gateway installiert haben und es mit dem Mobilfunknetz verbunden haben. Um SMS von JavaScript aus an ein Mobiltelefon senden zu können, müssen Sie ein HTTP-API-Benutzerkonto in Ozeki SMS Gateway einrichten.
Erstellen Sie einen neuen Benutzer (Video-Tutorial)
Dieses Video zeigt Ihnen, wie Sie ein neues HTTP-API-Benutzerkonto einrichten. Es beginnt mit der Startseite des Ozeki SMS Gateways und endet mit dem Reiter "Ereignisse" des neuen Benutzers. Das Video zeigt Ihnen, wie Sie Ihren neuen Benutzer erstellen und konfigurieren. Das Tolle an diesem Video ist, dass es nur 30 Sekunden lang ist, aber alle Informationen enthält, die Sie benötigen, um einen neuen HTTP-API-Benutzer zu erstellen.
Wie man SMS von JavaScript aus mit der JavaScript-SMS-API sendet (Video-Tutorial)
Dieses Video zeigt Ihnen, wie Sie die Datei SendSms.js.zip von dieser Seite herunterladen können. Wenn Sie das Video ansehen, werden Sie feststellen, dass die Inhalte der SendSms.cs-Zip in den Ordner \www\ des WampServers platziert werden. Sie werden auch sehen, dass wir den WampServer starten, indem wir zweimal auf sein Symbol klicken, und danach geben wir http://localhost:8080/SendSms.js in den Webbrowser ein.
JavaScript-SMS-Beispiel: SendSms.js
Der Beispielcode unten ist Teil der PHP-Datei SendSms.php. Darüber hinaus sehen Sie zwei weitere Dateien namens SendSms.css und Ozeki.Libs.Rest.js.
- Die Datei Ozeki.Libs.Rest.js enthält alle notwendigen Tools, um SMS-Nachrichten zu senden, zu löschen, zu markieren und zu empfangen.
- Die SendSms.php enthält den JavaScript-Code und einige Header, die es uns ermöglichen, HTTP-Anfragen ohne CORS-Fehler zu senden.
- Die SendSms.css enthält das Stylesheet.
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-Verwaltungskonsole ö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, es zu verfolgen.
Wie man überprüft, ob die SMS an das Mobilfunknetz gesendet wurde
Der letzte Schritt zur Überprüfung des Verfahrens besteht darin, die Protokolle der Mobilfunknetzverbindung zu betrachten. Möglicherweise müssen Sie die Protokollierung in der Konfiguration der Verbindung aktivieren, bevor Sie die Nachricht senden, um die Protokolle zu sehen. Wenn die Protokollierung aktiviert ist, sehen Sie die Telefonnummer und den Text der Nachricht, die Sie gesendet haben.
Testen, ob die Anfrage akzeptiert wurde (Video-Tutorial)
Im folgenden Video sehen Sie, wie Sie überprüfen können, ob der SMPP-Client erfolgreich Ihre Nachricht gesendet hat. Sie lernen, wie Sie den Ereignis-Tab des SMPP-Benutzers öffnen und worauf Sie achten müssen. Das Video ist nur 18 Sekunden lang, wird aber sehr hilfreich sein.
SMS auf dem Handy empfangen (Video-Tutorial)
Im folgenden Video sehen Sie, wie eine eingehende Nachricht aussieht, die vom Ozeki SMS Gateway gesendet wurde. Es beginnt mit dem Startbildschirm eines Android-Handys und endet mit der geöffneten Nachricht. Es ist nur 18 Sekunden lang und Sie können den gesamten Prozess des Empfangens einer Nachricht sehen.
Zusammenfassung
Die obige Anleitung hat die Schritte zum Senden von SMS von JavaScript aus erklärt. Wie zu sehen war, stellt Ozeki Ihnen alle benötigten Tools für die Nachrichtenübermittlung zur Verfügung. Wenn die Schritte sorgfältig befolgt wurden, ist das Versenden von Nachrichten von JavaScript aus kein Problem mehr. Das Ozeki SMS Gateway spielt eine enorme Rolle bei der Übermittlung, ohne dieses Programm könnten Sie die Mobilfunknutzer nicht erreichen. Wichtig zu beachten ist, dass das Ozeki SMS Gateway in jedem Land funktioniert, sodass Nachrichten mit dieser Lösung international gesendet werden können.
Hören Sie hier nicht auf zu lesen, durchstöbern Sie die Tutorial-Seite von Ozeki und erfahren Sie mehr über SMS-Empfang in JavaScript.
Ihr nächster Schritt ist es, das Ozeki SMS Gateway herunterzuladen und die Arbeit zu beginnen!
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