Comment recevoir un SMS en Javascript

La manière la plus simple de recevoir des SMS depuis JavaScript est d'utiliser l'API SMS HTTP/Rest intégrée d'Ozeki SMS Gateway. Lorsque vous utilisez cette API, vous recevrez les messages SMS en envoyant une requête HTTP GET à la passerelle SMS. La requête HTTP GET renverra une réponse HTTP 200 OK à votre demande, ainsi que les messages dans le dossier sélectionné.

comment recevoir un sms en javascript
Figure 1 - Comment recevoir un SMS en Javascript

Code JavaScript pour recevoir un SMS sur mobile

L'exemple de code JavaScript pour les SMS ci-dessous montre comment vous pouvez recevoir des messages SMS 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 n'importe lequel de vos projets.

ReceiveSms.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>Recevoir des 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="ReceiveSms.css">
    </head>
    <body>

        <div class="form-container">
            <button class="btn btn-primary" id="btnDownloadIncoming">
                <b>Télécharger les entrants</b>
            </button>
        </div>

        <div class="card log-container">
            <ul class="log" id="container">
                <li class="list-group-item"><b>Journaux :</b></li>
            </ul> 
        </div>

        <script type="module">
            import { Configuration, MessageApi } from "./Ozeki.Libs.Rest.js";

            var btnDownloadIncoming = document.getElementById("btnDownloadIncoming");

            var configuration = new Configuration();
            configuration.Username = 'http_user';
            configuration.Password = 'qwe123';
            configuration.ApiUrl = 'http://192.168.0.14:9509/api';

            var api = new MessageApi(configuration);

            btnDownloadIncoming.addEventListener("click", async function() {
                
                let result = await api.DownloadIncoming();

                document.getElementById('container').innerHTML += `<li class="list-group-item">${result}</li>`;
                
                for (let i = 0; i < result.MessageCount; i++)
                {
                    document.getElementById('container').innerHTML += `<li class="list-group-item">${result.Messages[i]}</li>`;
                }
            });
            
        </script>
    </body>
</html>

Comment utiliser l'exemple JavaScript pour les SMS :

Cet exemple JavaScript pour les 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, 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 ReceiveSms.js

Le code source expliqué dans cet article peut être téléchargé, utilisé et modifié gratuitement.
Télécharger : ReceiveSms.js.zip (5.28Ko)

Que contient le fichier ReceiveSms.js.zip ?

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

répertoire receive sms js
Figure 2 - Que contient ReceiveSms.js.zip

Comment recevoir des SMS depuis JavaScript (Instructions simples)

Pour recevoir des SMS depuis JavaScript :

  1. Installez un utilisateur HTTP API
  2. Activez "Log communication events" dans l'onglet Advanced
  3. Configurez WampServer
  4. Téléchargez puis extrayez le fichier ReceiveSms.js.zip
  5. Placez le contenu du fichier zip dans le dossier \www\ de wampserver : C:\wamp64\www
  6. Lancez l'application Ozeki SMS Gateway
  7. Ouvrez le site en tapant http://localhost/ReceiveSms.php dans votre navigateur
  8. Après avoir ouvert le site, vous pouvez envoyer un SMS en cliquant sur le bouton DownloadIncoming
  9. 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 graphique d'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 recevoir des SMS depuis JavaScript

Pour envoyer des SMS depuis JavaScript, votre JavaScript devra envoyer une requête HTTP à 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 recevoir 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 recevoir des SMS depuis JavaScript

Pour envoyer les messages 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 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 d'en-tête HTTP qui contient le nom d'utilisateur et le mot de passe de l'utilisateur HTTP. 

GET /api?action=receivemsg&folder=inbox HTTP/1.1
Connection: Keep-Alive
Authorization: Basic aHR0cF91c2VyOnF3ZTEyMw==
Host: 127.0.0.1:9509

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.116 (www.myozeki.com)
Content-Type: application/json; charset=utf8
Last-Modified: Mon, 07 Jun 2021 14:10:25 GMT
Server: 10/10.3.116
Transfer-Encoding: chunked

{
	"http_code": 200,
	"response_code": "SUCCESS",
	"response_msg": "",
	"data": {
	"folder": "inbox",
	"limit": "1000",
		"data": [
		{
			"message_id": "b754195d-9bd8-48dc-a45f-cf688c5b32e3",
			"from_connection": "http_user@localhost",
			"from_address": "+36201111111",
			"from_station": "%",
			"to_connection": "http_user@localhost",
			"to_address": "http_user",
			"to_station": "%",
			"text": "Hello, World 1",
			"create_date": "2021-06-08 09:12:24",
			"valid_until": "2021-06-15 09:12:24",
			"time_to_send": "0001-01-01 00:00:00",
			"submit_report_requested": true,
			"delivery_report_requested": true,
			"view_report_requested": true,
			"tags": [
				{
					"name": "Type",
					"value": "SMS:TEXT"
				}
			]
		},
		{
			"message_id": "a6337c23-51bc-43ee-9181-c9838abbe161",
			"from_connection": "http_user@localhost",
			"from_address": "+36202222222",
			"from_station": "%",
			"to_connection": "http_user@localhost",
			"to_address": "http_user",
			"to_station": "%",
			"text": "Hello, World 2",
			"create_date": "2021-06-08 09:12:24",
			"valid_until": "2021-06-15 09:12:24",
			"time_to_send": "0001-01-01 00:00:00",
			"submit_report_requested": true,
			"delivery_report_requested": true,
			"view_report_requested": true,
			"tags": [
				{
					"name": "Type",
					"value": "SMS:TEXT"
				}
			]
		},
		{
			"message_id": "ca14710b-42b9-4abc-b04f-262cc282dd7c",
			"from_connection": "http_user@localhost",
			"from_address": "+36203333333",
			"from_station": "%",
			"to_connection": "http_user@localhost",
			"to_address": "http_user",
			"to_station": "%",
			"text": "Hello, World 3",
			"create_date": "2021-06-08 09:12:24",
			"valid_until": "2021-06-15 09:12:24",
			"time_to_send": "0001-01-01 00:00:00",
			"submit_report_requested": true,
			"delivery_report_requested": true,
			"view_report_requested": true,
			"tags": [
				{
					"name": "Type",
					"value": "SMS:TEXT"
				}
			]
		}
	]
}

Comment supprimer des SMS depuis JavaScript en utilisant l'API SMS JavaScript (Tutoriel vidéo)

Cette vidéo vous montre comment télécharger le fichier ReceiveSms.js.zip depuis cette page. Si vous regardez la vidéo, vous remarquerez que le contenu du zip ReceiveSms.js est placé dans le dossier \www\ de WampServer. Vous verrez également que nous lanc

More information