Comment programmer un SMS en Javascript
La manière la plus simple d'envoyer des SMS programmés depuis JavaScript est d'utiliser l'API SMS HTTP/Rest intégrée d'Ozeki SMS Gateway. Lorsque vous utilisez cette API, vous enverrez des SMS en effectuant une requête HTTP Post vers la passerelle SMS. La requête HTTP Post contiendra un message formaté en JSON. La passerelle SMS enverra ce SMS au téléphone du destinataire, et renverra une réponse HTTP 200 OK à votre requête.
Code JavaScript pour envoyer un SMS programmé vers un mobile
L'exemple de code JavaScript pour SMS ci-dessous montre comment vous pouvez envoyer des SMS programmés en utilisant l'API SMS REST HTTP d'Ozeki SMS Gateway avec la bibliothèque JavaScript Ozeki.Libs.Rest. Cette bibliothèque vous est fournie gratuitement, et vous pouvez l'utiliser et la modifier dans tous vos projets.
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>Envoyer un SMS programmé avec 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>Destinataire:</b>
<input class="form-control" type="text" id="ToAddress" placeholder="+36201111111">
<b>Texte:</b>
<input class="form-control" type="text" id="Text" placeholder="Bonjour le monde !">
<b>Heure d'envoi:</b>
<input class="form-control" type="text" id="TimeToSend" placeholder="2021-07-30 10:00:00">
<button class="btn btn-primary" id="btnSend">
<b>ENVOYER</b>
</button>
</div>
<div class="log-container">
<ul class="card log" id="container">
<li class="list-group-item"><b>Journaux:</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>
Comment utiliser l'exemple JavaScript pour SMS :
Cet exemple JavaScript pour SMS peut être utilisé dans n'importe quelle application web. Pour l'utiliser, vous devez ajouter Ozeki.Libs.Rest.js à votre projet. Après l'avoir ajouté à votre projet, vous devez placer la directive import {MessageApi, Message, Configuration} from './Ozeki.Libs.Rest.js'; dans la section d'en-tête de votre code source JavaScript. Cela vous permettra d'utiliser les classes fournies par la bibliothèque Ozeki.Libs.Rest. Vous pouvez utiliser la classe Message pour créer le SMS. Vous pouvez utiliser la classe MessageApi pour envoyer le SMS à la passerelle SMS. La passerelle SMS transmettra votre message au réseau mobile soit via une connexion sans fil, soit via Internet.
Télécharger SendScheduledSms.js
Le code source expliqué dans cet article peut être téléchargé, utilisé et modifié gratuitement.
Téléchargement : SendScheduledSms.js.zip (5.59Ko)
Que contient le fichier SendScheduledSms.js.zip ?
Le fichier SendScheduledSms.js.zip contient la bibliothèque Ozeki.Libs.Rest, qui vous fournit tous les outils nécessaires pour envoyer et recevoir des SMS. Vous trouverez également le projet SendScheduledSms dans le zip, qui contient le code exemple pour vous montrer comment envoyer un SMS. Ce code exemple est listé ci-dessous.
Comment envoyer un SMS depuis JavaScript (Instructions simples)
Pour envoyer un SMS depuis JavaScript :
- Installez un utilisateur HTTP API
- Activez "Log communication events" dans l'onglet Advanced
- Configurez WampServer
- Téléchargez puis extrayez le fichier SendScheduledSms.js.zip
- Placez le contenu du fichier zip dans le dossier \www\ de wampserver : C:\wamp64\www
- Lancez l'application Ozeki SMS Gateway
- Ouvrez le site web en tapant http://localhost/SendScheduledSms.php dans votre navigateur
- Après avoir ouvert le site web, vous pouvez envoyer un SMS en cliquant sur le bouton Envoyer
- Vérifiez les journaux pour voir si le SMS a été envoyé
Installer Ozeki SMS Gateway et créer un utilisateur HTTP API
Pour pouvoir envoyer des SMS depuis JavaScript, vous devez d'abord installer Ozeki SMS Gateway. La passerelle SMS peut être installée sur le même ordinateur où vous développez votre code JavaScript dans Visual Studio. Après l'installation, l'étape suivante consiste à connecter Ozeki SMS Gateway au réseau mobile. Vous pouvez envoyer un SMS test depuis l'interface Ozeki pour vérifier que votre connexion au réseau mobile fonctionne. La dernière étape pour préparer votre environnement est de créer un utilisateur API SMS HTTP. Créez un utilisateur avec le nom d'utilisateur "http_user" et le mot de passe "qwe123" pour que l'exemple fonctionne sans modification.
Une fois l'environnement configuré, vous pouvez exécuter votre code JavaScript.
URL de l'API HTTP pour envoyer des SMS depuis JavaScript
Pour envoyer des SMS depuis JavaScript, votre JavaScript devra effectuer une requête HTTP vers la passerelle SMS. L'URL de l'API est indiquée ci-dessous. Notez que l'adresse IP (127.0.0.1) doit être remplacée par l'adresse IP de votre passerelle SMS. Si Ozeki SMS Gateway est installé sur le même ordinateur où l'application JavaScript SMS est exécutée, cela peut être 127.0.0.1. S'il est installé sur un autre ordinateur, cela doit être l'adresse IP de cet ordinateur.
http://127.0.0.1:9509/api?action=rest
Authentification HTTP pour envoyer des SMS depuis JavaScript
Pour authentifier le client SMS JavaScript, vous devez envoyer le nom d'utilisateur et le mot de passe dans une chaîne encodée en base64 au serveur dans une requête HTTP. Le format utilisé est : base64(nom d'utilisateur+":"+mot de passe). En JavaScript, vous pouvez utiliser le code suivant pour effectuer cet encodage :
// Vous pouvez trouver l'encodeur Base64 dans le fichier Ozeki.Libs.Rest.js
var usernamePassword = username + ":" + password;
return `Basic ${Base64.encode(usernamePassword)}`;
Par exemple, si vous encodez le nom d'utilisateur 'http_user' et le mot de passe 'qwe123', vous obtiendrez la chaîne encodée en base64 suivante : aHR0cF91c2VyOnF3ZTEyMw==. Pour envoyer
En-tête de requête HTTP pour envoyer un SMS depuis JavaScript
Pour envoyer les SMS, vous devez inclure les lignes suivantes comme en-têtes dans la requête HTTP. Notez que nous incluons un type de contenu et un en-tête d'autorisation.
Content-Type: application/json Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
Requête HTTP pour envoyer un SMS depuis JavaScript
Pour soumettre le SMS, votre application JavaScript enverra une requête HTTP similaire à celle ci-dessous. Notez que cette requête contient une partie d'en-tête HTTP et une partie de corps HTTP. Le corps HTTP est une chaîne de données encodée en JSON. Il contient le numéro du destinataire, le texte du message et l'heure à laquelle nous voulons envoyer notre message.
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": "Bonjour le monde !",
"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
}
]
}
Réponse HTTP reçue par l'exemple JavaScript SMS
Une fois que la passerelle SMS reçoit cette requête, elle générera une réponse HTTP. La réponse HTTP contiendra un code d'état pour indiquer si la soumission du SMS a réussi ou non. Elle renverra également une structure encodée en JSON pour vous fournir des détails utiles sur la soumission du message.
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 en attente de livraison.",
"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": "Bonjour le monde !",
"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"
}
]
}
}
Comment envoyer un SMS programmé depuis JavaScript en utilisant l'API SMS JavaScript (Tutoriel vidéo)
Cette vidéo vous montre comment télécharger le fichier SendScheduledSms.js.zip depuis cette page. Si vous regardez la vidéo, vous remarquerez que le contenu du zip SendScheduledSms.js est placé dans le dossier \www\ de WampServer. Vous verrez également que nous lancions WampServer en cliquant deux fois sur son icône, et après cela, nous tapons http://localhost:8080/SendScheduledSms.js dans le navigateur web.
Exemple JavaScript SMS : SendScheduledSms.js
Le code exemple ci-dessous fait partie du fichier PHP SendScheduledSms.php.
En plus de cela, vous verrez deux autres fichiers appelés SendScheduledSms.css et Ozeki.Libs.Rest.js.
- Le fichier Ozeki.Libs.Rest.js contient tous les outils nécessaires pour envoyer, supprimer, marquer et recevoir des SMS.
- Le SendScheduledSms.php contient le code JavaScript, et quelques en-têtes qui nous permettront d'envoyer des requêtes HTTP sans erreurs CORS.
- Le SendScheduledSms.css contient la feuille de style pour la page web.
Comment vérifier que le SMS a été accepté par l'utilisateur HTTP (Tutoriel vidéo)
Après la soumission du SMS, il est bon de vérifier votre passerelle SMS, pour voir ce qu'elle a reçu. Vous pouvez vérifier le journal en ouvrant les détails de l'utilisateur HTTP depuis la console de gestion d'Ozeki SMS Gateway. La vidéo suivante vous montre ce qu'il faut rechercher. La vidéo commencera avec le code ouvert et se terminera avec les détails du message envoyé. Vous apprendrez comment lancer le projet, à quoi ressemble le projet pendant son exécution et à quoi ressemble le fichier journal après. La vidéo ne dure que 42 secondes et est facile à comprendre. Vous n'aurez aucun problème à la suivre.
Pour résumer
Cet article a expliqué comment créer une solution pour la programmation de SMS en Javascript avec l'aide de l'utilisateur HTTP d'Ozeki SMS Gateway. Si vous avez tout lu attentivement, la programmation de SMS devrait être très simple. Programmer des SMS est bénéfique car vous partagez des informations avec les clients lorsqu'ils ont le temps de prêter attention à votre message. Cela rendra le marketing par SMS en masse plus efficace, et vous toucherez plus de personnes avec.
Apprenez-en plus sur le site web d'Ozeki et continuez à lire. Consultez comment recevoir un SMS en Javascript, cela peut vous aider à organiser votre stockage de messages.
Téléchargez Ozeki SMS Gateway maintenant, voyez la différence !
More information
- Envoyer un SMS en Javascript avec l'API REST HTTP (exemple de code)
- Envoyer plusieurs SMS en Javascript avec l'API REST HTTP (exemple de code)
- Planifier un SMS en Javascript avec l'API REST HTTP (exemple de code)
- Recevoir un SMS en Javascript avec l'API REST HTTP (exemple de code)
- Supprimer un SMS en Javascript avec l'API REST HTTP (exemple de code)
- Comment télécharger la dernière bibliothèque d'API SMS JavaScript depuis Github