Comment envoyer plusieurs SMS depuis JavaScript

La manière la plus simple d'envoyer plusieurs SMS 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 plusieurs SMS vers un mobile

L'exemple de code JavaScript pour SMS ci-dessous montre comment vous pouvez envoyer plusieurs SMS en utilisant l'API SMS HTTP Rest 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 n'importe lequel de vos projets.

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>Envoyer plusieurs SMS 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="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>AJOUTER</b>
            </button>
            <div class="card messages-container">
                <ul class="list-group log" id="message_container">
                    <li class="list-group-item"><b>Messages:</b></li>
                </ul> 
            </div>
            <button class="btn btn-primary" id="btnSend">
                    <b>ENVOYER</b>
            </button>
        </div>

        <div class="card log-container">
            <ul class="list-group 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 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>Messages:</b></li>`;
                
                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 le fichier 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 SendMultipleSms.js

Le code source expliqué dans cet article peut être téléchargé, utilisé et modifié gratuitement.
Téléchargement : SendMultipleSms.js.zip (5.62Kb)

Que contient le fichier SendMultipleSms.js.zip ?

Le fichier SendMultipleSms.js.zip contient la bibliothèque Ozeki.Libs.Rest, qui vous donne tous les outils nécessaires pour envoyer et recevoir des SMS. Vous trouverez également le projet SendMultipleSms dans le zip, qui contient le code exemple pour vous montrer comment envoyer un SMS. Ce code exemple est listé ci-dessous.

répertoire d'envoi de sms js — Figure 2 - Que contient SendMultipleSms.js.zip

Comment envoyer des SMS depuis JavaScript (Instructions simples)

Pour envoyer des SMS depuis JavaScript :

Installez un utilisateur HTTP API
Activez "Log communication events" dans l'onglet Advanced
Installez WampServer
Téléchargez puis extrayez le fichier SendMultipleSms.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/SendMultipleSms.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 HTTP SMS API. 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 des 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 en-tête Content-Type et un en-tête Authorization.

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

Requête HTTP pour envoyer des 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 en-tête HTTP et une partie corps HTTP. Le corps HTTP est une chaîne de données encodée en JSON. Elle contient le numéro du destinataire et le texte du message.

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

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 11:51:13 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": 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"
	    }
	  ]
	}
}