Jak zaplanować wysłanie SMS-a w JavaScript

Najprostszym sposobem na wysłanie zaplanowanego SMS-a 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 zaplanować wysłanie sms w javascript
Rysunek 1 - Jak zaplanować wysłanie SMS-a w JavaScript

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

Poniższy przykładowy kod JavaScript do wysyłania SMS-ów demonstruje, jak możesz wysyłać zaplanowane wiadomości SMS przy użyciu 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 z twoich projektów.

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>Wyślij zaplanowany SMS 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="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="Hello world!">
            <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>WYŚLIJ</b>
            </button>
        </div>

        <div class="log-container">
            <ul class="card 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 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>

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

Ten przykład JavaScript do wysyłania SMS-ów może być używany w dowolnej aplikacji webowej. Aby go użyć, musisz dodać 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 twojego 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 do wysłania SMS-a do bramki SMS. Bramka SMS przekaże twoją wiadomość do sieci komórkowej albo przez połączenie bezprzewodowe, albo przez Internet.

Pobierz SendScheduledSms.js

Kod źródłowy omówiony w tym artykule może być pobrany, używany i modyfikowany bezpłatnie.
Pobierz: SendScheduledSms.js.zip (5.59Kb)

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

Plik SendScheduledSms.js.zip zawiera bibliotekę Ozeki.Libs.Rest, która daje ci wszystkie narzędzia niezbędne do wysyłania i odbierania wiadomości SMS. Znajdziesz tam również projekt SendScheduledSms, który zawiera przykładowy kod pokazujący, jak wysłać SMS. Ten przykładowy kod jest wymieniony poniżej.

katalog send scheduled sms js
Rysunek 2 - Co znajduje się w SendScheduledSms.js.zip

Jak wysłać SMS z JavaScript (Proste wytyczne)

Aby wysłać SMS z JavaScript:

  1. Zainstaluj użytkownika HTTP API
  2. Włącz Logowanie zdarzeń komunikacyjnych w zakładce Zaawansowane
  3. Skonfiguruj WampServer
  4. Pobierz, a następnie rozpakuj plik SendScheduledSms.js.zip
  5. Umieść zawartość pliku zip w folderze \www\ wampservera: C:\wamp64\www
  6. Uruchom aplikację Ozeki SMS Gateway
  7. Otwórz stronę internetową, wpisując http://localhost/SendScheduledSms.php w przeglądarce
  8. Po otwarciu strony możesz wysłać SMS, klikając przycisk Wyślij
  9. Sprawdź logi, aby zobaczyć, czy SMS został wysłany

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

Aby móc wysyłać SMS-y z JavaScript, najpierw musisz zainstalować Ozeki SMS Gateway. Bramka SMS może być zainstalowana na tym samym komputerze, na którym tworzysz swój kod JavaScript w Visual Studio. Po instalacji następnym krokiem jest podłączenie Ozeki SMS Gateway do sieci komórkowej. Możesz utworzenie konta 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 JavaScript będzie musiał wysłać żądanie HTTP do bramki SMS. URL API jest pokazany poniżej. Pamiętaj, że adres IP (127.0.0.1) powinien zostać zastąpiony adresem IP Twojej bramki SMS. Jeśli Ozeki SMS Gateway jest zainstalowany na tym samym komputerze, na którym działa aplikacja SMS JavaScript, może to być 127.0.0.1. Jeśli jest zainstalowany na innym komputerze, powinien to być adres IP tego komputera. 

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

Uwierzytelnianie HTTP do wysyłania SMS z JavaScript

Aby uwierzytelnić klienta SMS JavaScript, musisz wysłać nazwę użytkownika i hasło w zakodowanym ciągu base64 do serwera w żądaniu HTTP. Używany 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, musisz uwzględnić następujące linie jako nagłówki w żądaniu HTTP. Pamiętaj, że zawieramy typ zawartości i nagłówek Autoryzacji. 

Content-Type: application/json
Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==

Żądanie HTTP do wysyłania SMS z JavaScript

Aby przesłać SMS, Twoja aplikacja JavaScript wyśle żądanie HTTP podobne do poniższego. Pamiętaj, ż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, tekst wiadomości oraz czas, w którym chcemy wysłać naszą wiadomość. 

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
		}
	]
}

Odpowiedź HTTP otrzymana przez przykład SMS JavaScript

Gdy bramka SMS otrzyma to żądanie, wygeneruje odpowiedź HTTP. Odpowiedź HTTP będzie zawierać kod statusu, aby wskazać, czy żądanie wysłania SMS zakończyło się sukcesem, czy nie. Zwróci również strukturę zakodowaną w JSON, aby dostarczyć przydatne informacje o przesłaniu 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 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"
	    }
	  ]
	}
}
Jak wysłać zaplanowaną wiadomość SMS z JavaScript przy użyciu API SMS JavaScript (Samouczek wideo)

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

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

Przykład SMS w JavaScript: SendScheduledSms.js

Poniższy przykładowy kod jest częścią pliku PHP SendScheduledSms.php. Oprócz tego zobaczysz dwa inne pliki o nazwach SendScheduledSms.css i 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.
  • SendScheduledSms.php zawiera kod JavaScript oraz niektóre nagłówki, które pozwolą nam wysyłać żądania HTTP bez błędów CORS.
  • SendScheduledSms.css zawiera arkusz stylów dla strony internetowej.

jak wysłać zaplanowaną wiadomość SMS przy użyciu JavaScript
Rysunek 3 - SendScheduledSms.php

Jak sprawdzić, czy wiadomość SMS została zaakceptowana przez użytkownika HTTP (Samouczek wideo)

Po wysłaniu wiadomości SMS 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 się szczegółami wysłanej wiadomości. Dowiesz się, jak uruchomić projekt, jak wygląda projekt podczas działania i jak wygląda plik dziennika po jego zakończeniu. Film trwa tylko 42 sekundy i jest łatwy do zrozumienia. Nie będziesz miał problemu z jego śledzeniem.

Wideo 3 - Jak wysłać SMS przy użyciu powyższego kodu JavaScript (Samouczek wideo)

Podsumowanie

Ten artykuł wyjaśnił, jak stworzyć rozwiązanie do planowania wiadomości SMS w JavaScript przy użyciu użytkownika HTTP bramki SMS Ozeki. Jeśli uważnie przeczytałeś wszystko, planowanie wiadomości SMS powinno być bardzo proste. Planowanie wiadomości SMS jest korzystne, ponieważ udostępniasz informacje klientom wtedy, gdy mają czas, aby zwrócić uwagę na Twoją wiadomość. Dzięki temu masowa wysyłka SMS będzie bardziej efektywna, a Ty dotrzesz do większej liczby osób.

Dowiedz się więcej na stronie Ozeki i czytaj dalej. Sprawdź, jak odebrać wiadomość SMS w JavaScript, może to pomóc w organizacji przechowywania wiadomości.

Pobierz Ozeki SMS Gateway już teraz i zobacz zmianę!

More information