Wie man mehrere SMS von Javascript aus sendet

Der einfachste Weg, mehrere 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 enthält eine Nachricht im JSON-Format. Das SMS-Gateway sendet diese SMS an den Empfänger und gibt eine HTTP-200-OK-Antwort auf Ihre Anfrage zurück.

wie man mehrere SMS von Javascript aus sendet
Abbildung 1 - Wie man mehrere SMS von Javascript aus sendet

JavaScript-Code zum Senden mehrerer SMS an Mobiltelefone

Das folgende JavaScript-SMS-Codebeispiel zeigt, wie Sie mehrere SMS-Nachrichten 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.

SendMultipleSms.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>Mehrere 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="SendMultipleSms.css">
    </head>
    <body style="height: 100vh; width: 100vw; padding: 0; margin: 0;">

        <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="Hello world!">
            <button class="btn btn-primary" id="btnAdd">
                <b>HINZUFÜGEN</b>
            </button>
            <div class="card messages-container">
                <ul class="list-group log" id="message_container">
                    <li class="list-group-item"><b>Nachrichten:</b></li>
                </ul> 
            </div>
            <button class="btn btn-primary" id="btnSend">
                    <b>SENDEN</b>
            </button>
        </div>

        <div class="card log-container">
            <ul class="list-group 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 messages = new Array();

            var btnSend = document.getElementById("btnSend");
            var btnAdd = document.getElementById("btnAdd");
                        
            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);

            btnAdd.addEventListener("click", function() {
                if (document.getElementById("ToAddress").value != '' && document.getElementById("Text").value != '') {

                    var msg = new Message();
                    msg.ToAddress = document.getElementById("ToAddress").value;
                    msg.Text = document.getElementById("Text").value;

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

                    messages.push(msg);
                    
                    document.getElementById('message_container').innerHTML += `<li class="list-group-item">${msg}</li>`;
                } 
            });

            btnSend.addEventListener("click", async function() {
                let result = await api.Send(messages);

                messages = new Array();

                document.getElementById('message_container').innerHTML = `<li class="list-group-item"><b>Nachrichten:</b></li>`;
                
                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 Datei Ozeki.Libs.Rest.js zu Ihrem Projekt hinzufügen. Nachdem Sie sie hinzugefügt haben, müssen Sie die Direktive import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; 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.

SendMultipleSms.js herunterladen

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

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

Die SendMultipleSms.js.zip-Datei enthält die Ozeki.Libs.Rest-Bibliothek, die Ihnen alle notwendigen Tools zum Senden und Empfangen von SMS-Nachrichten bietet. Sie finden auch das SendMultipleSms-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.

send sms js directory
Abbildung 2 - Was ist in SendMultipleSms.js.zip enthalten

Wie Sie SMS von JavaScript aus senden (Einfache Anleitung)

Um SMS von JavaScript aus zu senden:

  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 SendMultipleSms.js.zip-Datei 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/SendMultipleSms.php in Ihren Browser eingeben
  8. Nachdem Sie die Website geöffnet haben, können Sie eine SMS senden, indem Sie auf den Senden-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 Zeichenkette in einer HTTP-Anfrage an den Server senden. Das verwendete Format lautet: base64(Benutzername+":"+Passwort). In JavaScript können Sie den folgenden Code verwenden, um diese Kodierung durchzuführen: 

// 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- 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 ein JSON-kodierter Datenstring. Er enthält die Nummer des Empfängers und den Text der Nachricht. 

POST /api?action=sendmsg HTTP/1.1
Connection: close
Content-Length: 1028
Content-Type: text/plain;charset=UTF-8
Accept: */*
Authorization: Basic aHR0cF91c2VyOnF3ZTEyMw==
Host: 127.0.0.1:9509
User-Agent: node-XMLHttpRequest

{
	"messages": [
		{
			"message_id":"647a34a9-a852-f5e5-8a14-0619b6ddad1d",
			"to_address":"+36201111111",
			"text":"Hallo Welt 1",
			"create_date":"2021-07-30T11:57:10",
			"vaild_date":"2021-08-06T11:57:10",
			"time_to_send":"2021-07-30T11:57:10",
			"submit_report_requested":true,
			"delivery_report_requested":true,
			"view_report_requested":true
		},
		{
			"message_id":"d918770b-c87b-8ba5-9a4a-b01e4d0f71d0",
			"to_address":"+36202222222",
			"text":"Hallo Welt 2",
			"create_date":"2021-07-30T11:57:21",
			"vaild_date":"2021-08-06T11:57:21",
			"time_to_send":"2021-07-30T11:57:21",
			"submit_report_requested":true,
			"delivery_report_requested":true,
			"view_report_requested":true
		},
		{
			"message_id":"9c1375ae-9295-44d9-b79a-1b661f724741",
			"to_address":"+36203333333",
			"text":"Hallo Welt 3",
			"create_date":"2021-07-30T11:57:34",
			"vaild_date":"2021-08-06T11:57:34",
			"time_to_send":"2021-07-30T11:57:34",
			"submit_report_requested":true,
			"delivery_report_requested":true,
			"view_report_requested":true
		}
	]
}
HTTP-Antwort, die vom JavaScript-SMS-Beispiel empfangen wurde

Sobald das SMS-Gateway diese Anfrage erhält, generiert es eine HTTP-Antwort. Die HTTP-Antwort enthält einen Statuscode, der angibt, ob die SMS-Sendeanfrage 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:51:13 GMT
Server: 10/10.3.123
Transfer-Encoding: chunked

{
	"http_code": 200,
	"response_code": "SUCCESS",
	"response_msg": "Messages queued for delivery.",
	"data": {
	  "total_count": 3,
	  "success_count": 3,
	  "failed_count": 0,
	  "messages": [
	    {
	      "message_id": "647a34a9-a852-f5e5-8a14-0619b6ddad1d",
	      "from_station": "%",
	      "to_address": "+36201111111",
	      "text": "Hello world 1",
	      "create_date": "2021-07-30 11:57:10",
	      "valid_until": "2021-08-06 11:57:10",
	      "time_to_send": "2021-07-30 11:57:10",
	      "submit_report_requested": true,
	      "delivery_report_requested": true,
	      "view_report_requested": false,
	      "tags": [
	        {
	          "name": "Type",
	          "value": "SMS:TEXT"
	        }
	      ],
	      "status": "SUCCESS"
	    },
	    {
	      "message_id": "d918770b-c87b-8ba5-9a4a-b01e4d0f71d0",
	      "from_station": "%",
	      "to_address": "+36202222222",
	      "to_station": "%",
	      "text": "Hello world 2",
	      "create_date": "2021-07-30 11:57:21",
	      "valid_until": "2021-08-06 11:57:21",
	      "time_to_send": "2021-07-30 11:57:21",
	      "submit_report_requested": true,
	      "delivery_report_requested": true,
	      "view_report_requested": false,
	      "tags": [
	        {
	          "name": "Type",
	          "value": "SMS:TEXT"
	        }
	      ],
	      "status": "SUCCESS"
	    },
	    {
	      "message_id": "9c1375ae-9295-44d9-b79a-1b661f724741",
	      "from_station": "%",
	      "to_address": "+36203333333",
	      "to_station": "%",
	      "text": "Hello world 3",
	      "create_date": "2021-07-30 11:57:34",
	      "valid_until": "2021-08-06 11:57:34",
	      "time_to_send": "2021-07-30 11:57:34",
	      "submit_report_requested": true,
	      "delivery_report_requested": true,
	      "view_report_requested": false,
	      "tags": [
	        {
	          "name": "Type",
	          "value": "SMS:TEXT"
	        }
	      ],
	      "status": "SUCCESS"
	    }
	  ]
	}
}

Wie man mehrere SMS von JavaScript aus mit der JavaScript-SMS-API sendet (Video-Tutorial)

Dieses Video zeigt Ihnen, wie Sie die Datei SendMultipleSms.js.zip von dieser Seite herunterladen. Wenn Sie das Video ansehen, werden Sie feststellen, dass der Inhalt der SendMultipleSms.cs-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/SendMultipleSms.js in den Webbrowser ein.

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

JavaScript-SMS-Beispiel: SendMultipleSms.js

Der Beispielcode unten ist Teil der SendMultipleSms.php PHP-Datei. Neben dieser Datei sehen Sie zwei weitere Dateien namens SendMultipleSms.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 SendMultipleSms.php enthält den JavaScript-Code und einige Header, die es uns ermöglichen, HTTP-Anfragen ohne CORS-Fehler zu senden.
  • Die SendMultipleSms.css enthält das Stylesheet für die Webseite.

Abbildung 3 - SendMultipleSms.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 einsehen, 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, es zu verfolgen.

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

Fazit

Diese Anleitung bietet alle wesentlichen Informationen, wie Sie mehrere SMS-Nachrichten von JavaScript aus mit dem HTTP-Benutzer des Ozeki SMS Gateways senden können. Jetzt können Sie die gezeigte SMS-API für Ihre JavaScript-Anwendung verwenden und eine HTTP-Benutzerverbindung im Ozeki SMS Gateway einrichten. Die erstellte Lösung wird zuverlässig und hochleistungsfähig sein. Dieser Dienst kann Ihr Nachrichtenversenden effizienter gestalten, da er Ihnen ermöglicht, wertvolle Informationen an mehr als einen Mitarbeiter gleichzeitig zu senden.

Sie finden viele weitere Artikel, die Ihnen helfen, ein Nachrichtensystem einzurichten, auf der Ozeki-Website. Stellen Sie sicher, dass Sie weiterlesen, um herauszufinden, wie Sie die JavaScript-SMS-API für andere Zwecke verwenden können, beginnen Sie mit Wie man eine SMS in JavaScript plant.

Laden Sie das Ozeki SMS Gateway jetzt herunter. Setzen Sie um, was Sie gelernt haben!

More information