Jak wysłać wiele SMS-ów z JavaScript

Najprostszym sposobem wysłania wielu SMS-ów z JavaScript jest użycie wbudowanego interfejsu HTTP/Rest SMS API Ozeki SMS Gateway. Kiedy używasz tego API, wysyłasz wiadomości SMS poprzez wysłanie żądania HTTP Post do bramki SMS. Żądanie HTTP Post będzie zawierać wiadomość sformatowaną w formacie JSON. Bramka SMS wyśle tę wiadomość SMS na telefon odbiorcy i zwróci odpowiedź HTTP 200 OK na Twoje żądanie.

jak wysłać wiele sms z javascript
Rysunek 1 - Jak wysłać wiele SMS-ów z JavaScript

Kod JavaScript do wysyłania wielu SMS-ów na telefon

Poniższy przykładowy kod JavaScript do wysyłania SMS demonstruje, jak możesz wysłać wiele wiadomości SMS, używając interfejsu HTTP REST SMS API Ozeki SMS Gateway z biblioteką JavaScript Ozeki.Libs.Rest. Ta biblioteka jest dostarczana bezpłatnie i możesz jej używać oraz modyfikować w dowolnym projekcie.

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>Wyślij wiele SMS-ów z 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="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>DODAJ</b>
            </button>
            <div class="card messages-container">
                <ul class="list-group log" id="message_container">
                    <li class="list-group-item"><b>Wiadomości:</b></li>
                </ul> 
            </div>
            <button class="btn btn-primary" id="btnSend">
                    <b>WYŚLIJ</b>
            </button>
        </div>

        <div class="card log-container">
            <ul class="list-group log" id="container">
                <li class="list-group-item"><b>Logi:</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>Wiadomości:</b></li>`;
                
                document.getElementById('container').innerHTML += `<li class="list-group-item">${result}</li>`;
            });
        </script>
    </body>
</html>

Jak używać przykładu JavaScript do wysyłania SMS:

Ten przykład JavaScript do wysyłania SMS może być używany w dowolnej aplikacji webowej. Aby go użyć, musisz dodać plik Ozeki.Libs.Rest.js do swojego projektu. Po dodaniu go do projektu, musisz umieścić dyrektywę import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; w sekcji nagłówka swojego kodu źródłowego JavaScript. To pozwoli Ci używać klas dostarczonych przez bibliotekę Ozeki.Libs.Rest. Możesz użyć klasy Message do tworzenia SMS-ów. Możesz użyć klasy MessageApi, aby wysłać SMS do bramki SMS. Bramka SMS przekaże Twoją wiadomość do sieci komórkowej albo przez połączenie bezprzewodowe, albo przez Internet.

Pobierz SendMultipleSms.js

Kod źródłowy omówiony w tym artykule można pobrać, używać i modyfikować bezpłatnie.
Pobierz: SendMultipleSms.js.zip (5.62Kb)

Co znajduje się w pliku SendMultipleSms.js.zip?

Plik SendMultipleSms.js.zip zawiera bibliotekę Ozeki.Libs.Rest, która zapewnia wszystkie niezbędne narzędzia do wysyłania i odbierania wiadomości SMS. W pliku zip znajdziesz również projekt SendMultipleSms, zawierający przykładowy kod pokazujący, jak wysłać SMS. Przykładowy kod jest przedstawiony poniżej.

send sms js directory
Rysunek 2 - Zawartość pliku SendMultipleSms.js.zip

Jak wysłać SMS z JavaScript (Proste wskazówki)

Aby wysłać SMS z JavaScript:

  1. Zainstaluj użytkownika HTTP API
  2. Włącz opcję Log communication events w zakładce Advanced
  3. Skonfiguruj WampServer
  4. Pobierz i rozpakuj plik SendMultipleSms.js.zip
  5. Umieść zawartość pliku zip w folderze \www\ wampsevera: C:\wamp64\www
  6. Uruchom aplikację Ozeki SMS Gateway
  7. Otwórz stronę wpisując http://localhost/SendMultipleSms.php w przeglądarce
  8. Po otwarciu strony możesz wysłać SMS, klikając przycisk Send
  9. Sprawdź logi, aby upewnić się, że SMS został wysłany

Zainstaluj Ozeki SMS Gateway i utwórz użytkownika HTTP API

Aby móc wysyłać SMS z JavaScript, najpierw musisz zainstalować Ozeki SMS Gateway. Bramka SMS może być zainstalowana na tym samym komputerze, na którym tworzysz 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 wysyłania SMS z JavaScript

Aby wysłać SMS z JavaScript, Twój kod JavaScript musi 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, należy użyć adresu IP tego komputera. 

http://127.0.0.1:9509/api?action=rest

Uwierzytelnianie HTTP do wysyłania SMS z JavaScript

Aby uwierzytelnić klienta SMS w JavaScript, należy wysłać nazwę użytkownika i hasło w formie zakodowanej w base64 w żądaniu HTTP. 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 wysyłania SMS z JavaScript

Aby wysł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 z JavaScript

Aby wysłać SMS, Twoja aplikacja JavaScript wyśle żądanie HTTP podobne do poniższego. Zwróć uwagę, że to żądanie zawiera część nagłówka HTTP i część ciała HTTP. Ciało HTTP to ciąg danych zakodowany w JSON. Zawiera numer odbiorcy i tekst wiadomości. 

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":"Hello world 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":"Hello world 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":"Hello world 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
		}
	]
}

Odebrana odpowiedź HTTP przez przykład JavaScript SMS

Po otrzymaniu żądania, bramka SMS wygeneruje odpowiedź HTTP. Odpowiedź HTTP będzie zawierać kod statusu, wskazujący, czy żądanie wysłania SMS zostało zakończone sukcesem czy nie. Zwróci również strukturę zakodowaną w formacie JSON, dostarczając przydatnych informacji o przesłanej wiadomości. 

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": "Wiadomości zakolejkowane do wysłania.",
	"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"
	    }
	  ]
	}
}

Jak wysłać wiele SMS-ów z JavaScript przy użyciu API SMS JavaScript (Samouczek wideo)

Ten film pokazuje, jak pobrać plik SendMultipleSms.js.zip z tej strony. Jeśli obejrzysz film, zauważysz, że zawartość pliku SendMultipleSms.cs zip 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/SendMultipleSms.js w przeglądarce internetowej.

Wideo 1 - Jak pobrać i uruchomić przykładowy projekt (Samouczek wideo)

Przykład JavaScript SMS: SendMultipleSms.js

Poniższy przykładowy kod jest częścią pliku PHP SendMultipleSms.php. Oprócz tego zobaczysz dwa inne pliki: SendMultipleSms.css oraz 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.
  • Plik SendMultipleSms.php zawiera kod JavaScript oraz nagłówki, które umożliwią wysyłanie żądań HTTP bez błędów CORS.
  • Plik SendMultipleSms.css zawiera arkusz stylów dla strony internetowej.

Rysunek 3 - SendMultipleSms.php

Jak sprawdzić, czy SMS został zaakceptowany przez użytkownika HTTP (Samouczek wideo)

Po przesłaniu SMS-a warto sprawdzić w bramce SMS, co zostało odebrane. 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 logów po jego zakończeniu. Film trwa tylko 42 sekundy i jest łatwy do zrozumienia. Nie będziesz miał problemu z jego śledzeniem.

Wideo 2 - Jak wysłać SMS za pomocą powyższego kodu JavaScript (Samouczek wideo)

Podsumowanie

Ten przewodnik zawiera wszystkie niezbędne informacje na temat wysyłania wielu wiadomości SMS z JavaScript przy użyciu użytkownika HTTP Ozeki SMS Gateway. Teraz możesz użyć pokazanego API SMS w swojej aplikacji JavaScript i skonfigurować połączenie użytkownika HTTP w Ozeki SMS Gateway. Stworzone rozwiązanie będzie niezawodne i szybkie. Ta usługa może uczynić wysyłanie wiadomości bardziej efektywnym, ponieważ pozwala dostarczać cenne informacje do więcej niż jednego współpracownika jednocześnie.

Na stronie Ozeki znajdziesz wiele innych artykułów, które pomogą Ci skonfigurować system wiadomości. Upewnij się, że będziesz czytać dalej, aby dowiedzieć się, jak możesz używać Jak zaplanować SMS w JavaScript.

Pobierz Ozeki SMS Gateway już teraz. Wprowadź w życie to, czego się nauczyłeś!

More information