Wie man eine SMS in Javascript plant

Der einfachste Weg, geplante SMS von JavaScript aus zu senden, 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 wird eine Nachricht im JSON-Format enthalten. Das SMS-Gateway wird diese SMS an die Empfängertelefonnummer senden und eine HTTP-200-OK-Antwort auf Ihre Anfrage zurückgeben.

wie man eine sms in javascript plant
Abbildung 1 - Wie man eine SMS in Javascript plant

JavaScript-Code zum Senden einer geplanten SMS an ein Mobiltelefon

Das JavaScript-SMS-Codebeispiel unten zeigt, wie Sie geplante SMS-Nachrichten mit der HTTP-Rest-SMS-API von Ozeki SMS Gateway unter Verwendung der JavaScript Ozeki.Libs.Rest-Bibliothek senden können. Diese Bibliothek wird Ihnen kostenlos zur Verfügung gestellt, und Sie können sie verwenden und modifizieren in allen Ihren Projekten.

SendScheduledSms.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>Geplante SMS mit Ozeki SMS Gateway senden</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="SendScheduledSms.css">
    </head>
    <body>

        <div class="form-group form-container">
            <b>ToAddress:</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!">
            <b>TimeToSend:</b>
            <input class="form-control" type="text" id="TimeToSend" placeholder="2021-07-30 10:00:00">
            <button class="btn btn-primary" id="btnSend">
                <b>SENDEN</b>
            </button>
        </div>

        <div class="log-container">
            <ul class="card log" id="container">
                <li class="list-group-item"><b>Logs:</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() {
                if (document.getElementById("ToAddress").value != '' && document.getElementById("Text").value != '' && document.getElementById('TimeToSend').value)
                {
                    var msg = new Message();

                    var datetime = (document.getElementById('TimeToSend').value).split(' ');
                    var date = datetime[0].split('-');
                    var time = datetime[1].split(':');

                    msg.ToAddress = document.getElementById("ToAddress").value;
                    msg.Text = document.getElementById("Text").value;
                    msg.TimeToSend = new Date(Date.UTC(date[0], (parseInt(date[1].replace('0', ''))-1),
                     date[2], time[0], time[1], time[2]));

                    let result = await api.Send(msg);

                    document.getElementById("ToAddress").value = '';
                    document.getElementById("Text").value = '';
                    document.getElementById('TimeToSend').value = '';

                    document.getElementById('container').innerHTML += `<li class="list-group-item">${result}</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 zu Ihrem Projekt hinzugefügt wurde, müssen Sie die import {MessageApi, Message, 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.

SendScheduledSms.js herunterladen

Der in diesem Artikel erklärte Quellcode kann kostenlos heruntergeladen, verwendet und modifiziert werden.
Download: SendScheduledSms.js.zip (5.59Kb)

Was ist in der SendScheduledSms.js.zip-Datei enthalten?

Die SendScheduledSms.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 SendScheduledSms-Projekt in der Zip-Datei, das den Beispielcode enthält, um Ihnen zu zeigen, wie Sie eine SMS senden. Dieser Beispielcode ist unten aufgeführt.

send scheduled sms js verzeichnis
Abbildung 2 - Was ist in SendScheduledSms.js.zip enthalten

Wie man SMS von JavaScript aus sendet (Einfache Anleitung)

So senden Sie SMS von JavaScript aus:

  1. Installieren Sie einen HTTP-API-Benutzer
  2. Aktivieren Sie "Log communication events" auf der Registerkarte "Advanced"
  3. Richten Sie WampServer ein
  4. Laden Sie die Datei SendScheduledSms.js.zip herunter und entpacken Sie sie
  5. Legen Sie den Inhalt der ZIP-Datei in den Ordner \www\ des WampServers: C:\wamp64\www
  6. Starten Sie die Ozeki SMS Gateway App
  7. Öffnen Sie die Website, indem Sie http://localhost/SendScheduledSms.php in Ihren Browser eingeben
  8. Nachdem Sie die Website geöffnet haben, können Sie eine SMS senden, indem Sie auf den "Send"-Button klicken
  9. Ü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 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 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 Zeichenfolge in einer HTTP-Anfrage an den Server senden. Das verwendete Format lautet: base64(username+":"+password). 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 Zeichenfolge: 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 Datenzeichenfolge. Er enthält die Empfängernummer, den Text der Nachricht und die Zeit, zu der wir unsere Nachricht senden möchten. 

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": "d4420450-3db1-1452-91eb-1145b2126495",
			"to_address": "+36201111111",
			"text": "Hello world!",
			"create_date": "2021-07-30T13:04:49",
			"vaild_date": "2021-08-06T13:04:49",
			"time_to_send": "2021-07-30T14:00:00",
			"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, um anzuzeigen, 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 12:58:47 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": "d4420450-3db1-1452-91eb-1145b2126495",
	      "from_station": "%",
	      "to_address": "+36201111111",
	      "to_station": "%",
	      "text": "Hello world!",
	      "create_date": "2021-07-30 13:04:49",
	      "valid_until": "2021-08-06 13:04:49",
	      "time_to_send": "2021-07-30 14:00:00",
	      "submit_report_requested": true,
	      "delivery_report_requested": true,
	      "view_report_requested": false,
	      "tags": [
	        {
	          "name": "Type",
	          "value": "SMS:TEXT"
	        }
	      ],
	      "status": "SUCCESS"
	    }
	  ]
	}
}
Wie man geplante SMS mit JavaScript über die JavaScript-SMS-API sendet (Video-Tutorial)

Dieses Video zeigt Ihnen, wie Sie die Datei SendScheduledSms.js.zip von dieser Seite herunterladen. Wenn Sie das Video ansehen, werden Sie feststellen, dass der Inhalt der SendScheduledSms.js-Zip-Datei in den Ordner \www\ des WampServers platziert wird. Sie werden auch sehen, dass wir den WampServer starten, indem wir zweimal auf sein Symbol klicken, und danach geben wir http://localhost:8080/SendScheduledSms.js in den Webbrowser ein.

Video 2 - Wie man das Beispielprojekt herunterlädt und ausführt (Video-Tutorial)

JavaScript-SMS-Beispiel: SendScheduledSms.js

Der Beispielcode unten ist Teil der PHP-Datei SendScheduledSms.php. Darüber hinaus sehen Sie zwei weitere Dateien namens SendScheduledSms.css und Ozeki.Libs.Rest.js.

  • Die Datei Ozeki.Libs.Rest.js enthält alle notwendigen Tools zum Senden, Löschen, Markieren und Empfangen von SMS-Nachrichten.
  • Die SendScheduledSms.php enthält den JavaScript-Code und einige Header, die es uns ermöglichen, HTTP-Anfragen ohne CORS-Fehler zu senden.
  • Die SendScheduledSms.css enthält das Stylesheet für die Webseite.

Wie man geplante SMS mit JavaScript sendet
Abbildung 3 - SendScheduledSms.php

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, ihm zu folgen.

Video 3 - Wie man SMS mit dem oben gezeigten JavaScript-Code sendet (Video-Tutorial)

Zusammenfassend

Dieser Artikel erklärte, wie man eine Lösung für die SMS-Planung in JavaScript mit Hilfe des HTTP-Benutzers des Ozeki SMS Gateways erstellt. Wenn Sie alles sorgfältig gelesen haben, sollte die SMS-Planung sehr einfach sein. Die Planung von SMS ist vorteilhaft, da Sie Informationen mit Kunden teilen, wenn diese Zeit haben, Ihre Nachricht zu beachten. Es macht Bulk-SMS-Marketing effizienter, und Sie erreichen damit mehr Menschen.

Erfahren Sie mehr auf der Ozeki-Website und lesen Sie weiter. Schauen Sie sich an, wie man eine SMS in JavaScript empfängt, es kann Ihnen helfen, Ihren Nachrichtenspeicher zu organisieren.

Laden Sie das Ozeki SMS Gateway jetzt herunter und sehen Sie den Unterschied!

More information