Jak wysłać SMS z JavaScript
Najprostszym sposobem wysłania SMS-a z JavaScript jest użycie wbudowanego interfejsu HTTP/Rest SMS API Ozeki SMS Gateway. Korzystając z tego API, możesz wysyłać wiadomości SMS, wysyłając żądanie HTTP Post do bramki SMS. Żądanie HTTP Post będzie zawierać wiadomość w formacie JSON. Bramka SMS prześle tę wiadomość SMS na telefon odbiorcy i zwróci odpowiedź HTTP 200 OK na Twoje żądanie.
Kod JavaScript do wysyłania SMS-ów na telefon
Poniższy przykładowy kod JavaScript do wysyłania SMS-ów demonstruje, jak możesz wysyłać SMS-y, 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 z Twoich projektów.
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>Wyślij 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="SendSms.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!">
<button class="btn btn-primary" id="btnSend">
<b>WYŚLIJ</b>
</button>
</div>
<div class="log-container">
<ul class="card log" id="log-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() {
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>
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ć 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. Pozwoli to na użycie 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 poprzez połączenie bezprzewodowe lub przez Internet.
Pobierz SendSms.js
Kod źródłowy omówiony w tym artykule można pobrać, używać i modyfikować bezpłatnie.
Pobierz: SendSms.js.zip (5,3 KB)
Co znajduje się w pliku SendSms.js.zip?
Plik SendSms.js.zip zawiera bibliotekę Ozeki.Libs.Rest, która dostarcza wszystkich narzędzi niezbędnych do wysyłania i odbierania wiadomości SMS. Znajdziesz tam również projekt SendSms, który zawiera przykładowy kod pokazujący, jak wysłać SMS. Ten przykładowy kod jest wymieniony poniżej.
Jak wysłać SMS z JavaScript (Proste wskazówki)
Aby wysłać SMS z JavaScript:
- Zainstaluj użytkownika HTTP API
- Włącz opcję Log communication events w zakładce Advanced
- Pobierz i zainstaluj WampServer
- Pobierz, a następnie rozpakuj plik SendSms.js.zip
- Umieść zawartość pliku zip w folderze \www\ wampservera: C:\wamp64\www
- Uruchom aplikację Ozeki SMS Gateway
- Otwórz stronę internetową, wpisując http://localhost/SendSms.php w przeglądarce
- Po otwarciu strony możesz wysłać SMS, klikając przycisk Wyślij
- 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 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-ów z JavaScript
Aby wysyłać SMS-y z JavaScript, Twój kod 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) 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, powinien to być adres IP tego komputera.
http://127.0.0.1:9509/api?action=rest
Uwierzytelnianie HTTP do wysyłania SMS-ów z JavaScript
Aby uwierzytelnić klienta SMS w JavaScript, należy 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-ów 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-ów z JavaScript
Aby przesłać SMS, Twoja aplikacja JavaScript wyśle żądanie HTTP podobne do poniższego. Zauważ, ż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: 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
}
]
}
Odpowiedź HTTP otrzymana przez przykład SMS w 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 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"
}
]
}
}
Podłącz swoją bramkę SMS do sieci komórkowej i utwórz konto użytkownika HTTP API
Zakładamy, że już zainstalowałeś Ozeki SMS Gateway i podłączyłeś go do sieci komórkowej. Aby móc wysyłać SMS-y na telefon komórkowy z JavaScript, musisz skonfigurować konto użytkownika HTTP API w Ozeki SMS Gateway.
Utwórz nowego użytkownika (Samouczek wideo)
Ten film prezentuje, jak skonfigurować nowe konto użytkownika HTTP API. Zaczyna się od strony głównej Ozeki SMS Gateway i kończy na zakładce Zdarzenia nowego użytkownika. Film pokaże Ci, jak utworzyć i skonfigurować nowego użytkownika. Wspaniałą rzeczą w tym filmie jest to, że trwa tylko 30 sekund, ale zawiera wszystkie informacje potrzebne do utworzenia nowego użytkownika HTTP API.
Jak wysłać SMS z JavaScript przy użyciu API SMS JavaScript (Samouczek wideo)
Ten film pokazuje, jak pobrać plik SendSms.js.zip z tej strony. Jeśli obejrzysz film, zauważysz, że zawartość pliku SendSms.cs zip jest umieszczana w folderze \www\ serwera WampServer. Zobaczysz również, że uruchamiamy WampServer, klikając dwukrotnie jego ikonę, a następnie wpisujemy http://localhost:8080/SendSms.js w przeglądarce internetowej.
Przykład SMS w JavaScript: SendSms.js
Przykładowy kod poniżej jest częścią pliku PHP SendSms.php. Oprócz tego zobaczysz dwa inne pliki o nazwach SendSms.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.
- SendSms.php zawiera kod JavaScript oraz niektóre nagłówki, które pozwolą nam wysyłać żądania HTTP bez błędów CORS.
- SendSms.css zawiera arkusz stylów.
Jak sprawdzić, czy SMS został zaakceptowany przez użytkownika HTTP (Samouczek wideo)
Po wysłaniu SMS-a warto sprawdzić w bramce SMS, co otrzymała. Możesz sprawdzić log, otwierając szczegóły użytkownika HTTP w konsoli zarządzania Ozeki SMS Gateway. Poniższe wideo pokazuje, na co zwrócić uwagę. Wideo rozpocznie się od otwartego kodu i zakoń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 logów po jego zakończeniu. Wideo trwa tylko 42 sekundy i jest łatwe do zrozumienia. Nie będziesz miał problemu z jego śledzeniem.
Jak sprawdzić, czy SMS został wysłany do sieci komórkowej
Ostatnim krokiem weryfikacji procedury jest spojrzenie na logi połączenia z siecią komórkową. Być może będziesz musiał włączyć logowanie w konfiguracji połączenia przed wysłaniem wiadomości, aby zobaczyć logi. Jeśli logowanie jest włączone, zobaczysz numer telefonu i tekst wysłanej wiadomości.
Sprawdź, czy żądanie zostało zaakceptowane (Samouczek wideo)
W poniższym filmie zobaczysz, jak sprawdzić, czy klient SMPP pomyślnie wysłał Twoją wiadomość. Dowiesz się, jak otworzyć zakładkę zdarzeń użytkownika SMPP i na co zwrócić uwagę. Wideo trwa tylko 18 sekund, ale będzie bardzo pomocne.
SMS odebrany na telefonie (Samouczek wideo)
W poniższym filmie zobaczysz, jak wygląda przychodząca wiadomość wysłana z Ozeki SMS Gateway. Zacznie się od ekranu głównego telefonu z systemem Android i zakończy otwartą wiadomością. Trwa tylko 18 sekund i możesz zobaczyć cały proces odbierania wiadomości.
Podsumowanie
Powyższy przewodnik wyjaśnił kroki wysyłania SMS z JavaScript. Jak widać, Ozeki zapewnia wszystkie niezbędne narzędzia do dostarczania wiadomości, więc jeśli kroki były dokładnie przestrzegane, wysyłanie wiadomości z JavaScript nie jest już problemem. Ozeki SMS Gateway odgrywa ogromną rolę w dostarczaniu, bez tego programu nie można by dotrzeć do użytkowników mobilnych. Warto zauważyć, że Ozeki SMS Gateway działa w każdym kraju, więc wiadomości można wysyłać międzynarodowo za pomocą tego rozwiązania.
Nie kończ czytania tutaj, przejrzyj stronę samouczków Ozeki i dowiedz się o odbieraniu SMS w JavaScript.
Twoją następną rzeczą do zrobienia jest pobranie Ozeki SMS Gateway i rozpoczęcie pracy!
More information
- Wysyłanie SMS w JavaScript z użyciem REST API (przykład kodu)
- Wysyłanie wielu SMS w JavaScript z użyciem REST API (przykład kodu)
- Planowanie SMS w JavaScript z użyciem REST API (przykład kodu)
- Odbieranie SMS w JavaScript z użyciem REST API (przykład kodu)
- Usuwanie SMS w JavaScript z użyciem REST API (przykład kodu)
- Jak pobrać najnowszą bibliotekę API SMS JavaScript z Githuba