Partager:
){kind=small}
Hui Jing est développeuse chez Nexmo. Elle a un amour immodéré pour le CSS et la typographie, et est généralement passionnée par tout ce qui touche au web.
SMS dans le navigateur : Une aventure dans les WebSockets
Temps de lecture : 20 minutes
Une grande partie des tâches lourdes effectuées par l'API Messages de Nexmo se déroulent côté serveur. Les messages sont envoyés, reçus, traités, etc., mais toute cette activité est généralement cachée aux utilisateurs finaux des nombreuses applications qui utilisent l'API.
Dans la plupart des cas, l'affichage de ces messages à l'intention de l'utilisateur final est géré par leurs applications respectives. Il est également possible d'afficher ces messages dans un navigateur, mais pour cela, nous avons besoin d'un moyen de transmettre les messages du serveur au navigateur. Et nous pouvons le faire avec l'aide de l'API WebSockets.
Il s'agit d'un tutoriel assez long qui ne suppose aucune connaissance préalable autre qu'une compréhension de base de HTML, CSS, Javascript, et Node.js. N'hésitez pas à passer les sections si vous savez déjà de quoi il s'agit.
Nous allons voir comment construire un téléphone "virtuel" dans le navigateur qui peut envoyer et recevoir des SMS. Nous utiliserons Glitch pour héberger l'application, de sorte que certaines instructions d'installation s'adressent à Glitch.
Glitch est un environnement de développement en ligne qui permet aux développeurs de créer et de déployer leurs applications sans avoir à se soucier de l'installation d'un serveur. Toutes les applications de la plateforme peuvent être remixées et personnalisées, ce qui en fait l'endroit idéal pour partager du code et comprendre comment les choses fonctionnent.
Vous pouvez également utiliser n'importe quel environnement avec Node.js installé, si c'est ce que vous préférez. Toutes les dépendances de ce projet sont gérées via npm.
Glitch améliore constamment son interface et ses fonctionnalités. Au moment où nous écrivons ces lignes, vous pouvez créer un nouveau compte sur Glitch en cliquant sur le bouton S'inscrire dans le coin supérieur droit de la page, et vous connecter via GitHub ou Facebook, ou vous inscrire avec votre adresse e-mail.
Glitch sign in
Ensuite, vous pouvez cliquer sur le bouton Nouveau projet pour commencer. Trois choix s'offrent à vous, bonjour-webpage, hello-express et hello-sqlite. Pour les besoins de ce tutoriel, optez pour hello-express car cela vous donne un environnement avec Node.js et npm déjà installés.
Glitch hello-express
Pour installer des paquets de nœuds supplémentaires, vous pouvez accéder à la ligne de commande en cliquant sur le bouton Console dans la fenêtre des journaux.
Console
Vous pouvez faire basculer la fenêtre des journaux en cliquant sur le bouton Journaux en haut de la barre latérale. À partir de là, vous pouvez utiliser toutes les commandes CLI standard dans un environnement bash. La seule différence est que sur Glitch, vous utiliserez pnpm au lieu de npm.
L'erreur utilise Express comme framework Node.js par défaut, mais en convertissant l'application en Koa.js n'est pas trop compliquée. Notez que Koa nécessite node v7.6.0 ou plus pour le support de ES2015 et des fonctions asynchrones.
Dependencies
Retirer express et body-parser du projet à l'aide de la commande suivante :
Installez Koa.js et koa-bodyparser avec la commande suivante :
La console et l'éditeur ne se synchronisent pas automatiquement, il faut donc lancer la commande refresh pour mettre à jour le fichier package.json dans l'éditeur.
Koa
Vous remarquerez également que l'état de votre application indique une erreur. C'est normal, car le fichier par défaut server.js fait toujours référence à express.
Pour y remédier, remplacez le contenu de server.js par le code suivant :
const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
ctx.body = 'Hello Dinosaur';
});
app.listen(3000);
Maintenant, lorsque vous essayez de visualiser votre application, une page blanche doit s'afficher avec les mots suivants Bonjour Dinosaure.
Nous devrions afficher une page HTML de base avec des champs de saisie pour que les utilisateurs puissent entrer les informations nécessaires à l'envoi d'un SMS, comme le numéro de téléphone du destinataire et le message lui-même.
koa-static est un intergiciel de service de fichiers statiques pour Koa. Installez-le dans votre projet via la console avec la commande suivante :
Pour simplifier les choses, placez tous les fichiers nécessaires à la page d'atterrissage dans le dossier public dans le dossier Vous pouvez déplacer le fichier index.html du dossier views vers le dossier public en renommant le chemin d'accès au fichier dans la barre latérale.
Rename file
Vous pouvez également le faire via la ligne de commande de la console.
Une fois que c'est fait, modifiez le fichier server.js pour utiliser koa-static et servir les fichiers du dossier public comme suit :
const serve = require('koa-static');
const Koa = require('koa');
const app = new Koa();
app.use(serve('./public'));
app.listen(3000);
console.log('listening on port 3000');Maintenant, au lieu de bonjour le mondevotre application devrait servir le fichier Glitch index.html par défaut. Nous modifierons ce fichier pour imiter l'interface d'un téléphone plus tard dans le tutoriel.
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.
Dashboard
Retournez dans votre application Glitch et installez le client Nexmo REST API client pour Node.js avec la commande suivante :
Nous utilisons la version bêta car l'API Messages est actuellement encore en version bêta. Si vous actualisez votre projet, votre package.json devrait maintenant ressembler à ceci :
Nexmo node
Nous en avons maintenant terminé avec la configuration de base. Ceci peut être le point de départ d'un grand nombre d'Applications Koa qui utilisent les API de Numbers, donc vous pouvez toujours garder ce projet comme kit de démarrage sur Glitch et remixer à partir de celui-ci.
Le protocole protocole WebSocket a été développé par l'Internet Engineering Task Force (IETF) pour permettre des communications bidirectionnelles entre un client et un hôte distant.
Il s'agit d'un type de protocole de communication, comme HTTP (Hypertext transfer protocol), FTP (protocole de transfert de fichiers) ou SMTP (Simple mail transfer protocol). Les protocoles de communication permettent aux machines de communiquer entre elles. La plupart des protocoles de communication maintiennent une connexion ouverte entre deux machines sur l'internet.
Le protocole HTTP, sur lequel fonctionne le web, est différent. Il s'agit d'un protocole sans connexion, car il est basé sur un mode de fonctionnement demande/réponse. Les navigateurs web demandent au serveur des images, des polices, du contenu, etc., mais une fois la demande satisfaite, la connexion entre le navigateur et le serveur est coupée.
Il est possible de faire passer une connexion HTTP existante à un nouveau protocole incompatible en utilisant l'en-tête HTTP upgrade. Les demandes de connexion sont toujours toujours initiées par le client, bien que le serveur puisse imposer une mise à niveau en répondant au client par une 426 Upgrade Required HTTP au client.
Une connexion HTTP/1.1 peut être transformée en connexion TLS (ce qui n'est pas recommandé), en connexion HTTP/2 ou en connexion WebSocket, qui est le cas d'utilisation le plus courant pour une mise à niveau. L'établissement d'une connexion WebSocket entre le client et le serveur implique une requête initiale HTTP/1.1 qui inclut les en-têtes de mise à niveau.
Une version simplifiée de l'en-tête initial ressemble à ceci :
GET /chat HTTP/1.1
Host: server.example.com
Origin: http://example.com
Upgrade: websocket
Connection: UpgradeSi le serveur prend en charge le protocole WebSocket, il acceptera la demande de mise à niveau et répondra à la poignée de main par un 101 code d'état :
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: UpgradeTout ce qui n'est pas un 101 indique que la poignée de main WebSocket n'est pas terminée. Une fois la poignée de main terminée, la connexion HTTP/1.1 initiale est transformée en connexion WebSocket et les données peuvent désormais être envoyées dans les deux sens entre les deux machines.
L'API API WebSockets est une interface qui permet aux applications web de d'utiliser le protocole WebSocket pour maintenir des communications bidirectionnelles avec les processus côté serveur. La plupart des navigateurs publiés après 2012 prennent en charge l'API WebSockets, ce qui signifie que la prise en charge est relativement bonne.
L'objet WebSocket fournit l'API permettant de créer et de gérer une connexion WebSocket à un serveur, ainsi que d'envoyer et de recevoir des données sur la connexion. Nous pouvons créer un nouvel objet WebSocket à l'aide du constructeur WebSocket, WebSocket(url[, protocols]). L'URL passée dans le constructeur WebSocket doit être de type ws ou wss pour que les choses fonctionnent.
const socket = new WebSocket('ws://localhost:8080')L'objet WebSocket envoie 4 événements, que nous pouvons écouter et traiter en conséquence :
openerrormessageclose
Une fois la connexion WebSocket établie, l'événement open est déclenché. En référence à l'objet WebSocket créé dans le bloc de code précédent, le gestionnaire d'événement correspondant ressemblerait à ceci :
socket.onopen = function(evt) {
// do something
}Nous pouvons utiliser l'événement error pour enregistrer les erreurs dans la console à des fins de débogage, et peut-être ajouter un gestionnaire d'événements d'erreur :
socket.onerror = function(evt) {
console.log('WebSocket error: ', evt)
// include an error event handler here
}En règle générale, nous utilisons l'événement message qui se déclenche lors de la réception de messages en provenance du serveur. Par exemple, si un message texte est envoyé par le serveur, vous pouvez l'enregistrer dans la console de la manière suivante :
socket.onmessage = function(evt) {
console.log('Message: ', evt.data)
}Enfin, l'événement close se déclenche lorsque la connexion WebSocket est fermée. Dès lors, le client et le serveur ne peuvent plus s'envoyer de messages jusqu'à ce qu'une nouvelle connexion soit établie.
socket.onclose = function(evt) {
console.log('WebSocket connection closed. ', evt)
}Deux méthodes sont également associées à l'objet WebSocket, send() pour envoyer des données au serveur et close() pour mettre fin à une connexion WebSocket existante.
La méthode send() ne fonctionne que lorsque la connexion est ouverte, ce qui semble évident, mais si le code est mal structuré, elle pourrait être déclenchée avant l'ouverture de la connexion ou après sa fermeture.
// Listen for the open event before triggering the sendMsg() function
socket.onopen = function(evt) {
console.log('Connection established')
sendMsg('Hello Nexmo!')
}
// Send a message through the WebSocket connection
function sendMsg(data) {
socket.send(data)
}Maintenant que nous avons une meilleure compréhension de ce que sont les WebSockets et du fonctionnement de l'API WebSocket, nous sommes prêts à utiliser ces connaissances pour créer une application de base permettant d'envoyer et de recevoir des SMS directement via le navigateur à l'aide de l'API Nexmo Messages API.
Pour envoyer et recevoir des SMS via l'API Messages, vous avez besoin d'un numéro de téléphone virtuelqui ressemble à n'importe quel numéro de téléphone standard, sauf qu'il n'est pas lié à une ligne téléphonique physique ou à un appareil.
Vous pouvez acheter un numéro virtuel à partir de la page d'accueil de Numbers. Numbers dans la barre latérale en sélectionnant Acheter des Numbers. Vous pouvez choisir un numéro local dans le pays de votre choix, les fonctionnalités prises en charge et le type de numéro, qu'il s'agisse d'un numéro mobile, d'un numéro fixe ou d'un numéro gratuit.
Buy numbers
Une fois que vous aurez obtenu votre numéro, il apparaîtra dans la rubrique Vos Numbers dans la section Vos numéros. Cliquez sur l'icône représentant un crayon sous l'élément le plus à droite de l'écran. Gérer pour configurer l'URL de votre webhook entrant. Cette URL est nécessaire pour recevoir des SMS. Lorsqu'un SMS est envoyé à votre numéro, une demande est envoyée à cette URL avec la charge utile du message. POST est envoyée à cette URL avec la charge utile du message.
Inbound webhook URL
Si vous utilisez Glitch, l'URL de votre webhook ressemblera à quelque chose comme https://boom-meal.glitch.me/inbound-sms. Je suggère d'utiliser inbound-sms comme route, mais vous pouvez utiliser ce que vous voulez, tant que cette route est valide dans votre application. Ajustez l'URL du webhook en fonction de l'endroit où votre application est hébergée.
Une autre chose à vérifier est que le paramètre SMS par défaut de votre compte est défini sur POST dans la méthode HTTP.
Settings
Pour recevoir un SMS entrant, vous devez ajouter une route dans votre application afin de gérer la requête entrante POST qui est déclenchée lorsque quelqu'un envoie un SMS à votre numéro virtuel. Contrairement à d'autres frameworks Node.js populaires comme Express ou Hapi.js, le routage est géré par un module séparé, nous devons donc l'installer en premier.
Ajoutez ce qui suit à votre fichier server.js fichier :
const bodyParser = require('koa-bodyparser');
const Router = require('koa-router');
const router = new Router();
app.use(bodyParser());
// Make sure this is the route you configured for your virtual number
router.post('/inbound-sms', async (ctx, next) => {
const payload = ctx.request.body;
console.log(payload);
ctx.status = 200;
});
app.use(router.routes()).use(router.allowedMethods());
Si vous avez suivi les instructions d'installation plus haut dans ce tutoriel, koa-bodyparser devrait déjà être installé. Un analyseur de corps est nécessaire pour gérer le corps de la requête. Pour vérifier que tout est branché correctement, envoyez un SMS à votre numéro virtuel. Le contenu du message devrait être enregistré dans la console.
SMS payload
Maintenant que nous avons vérifié que tout fonctionne, au lieu d'enregistrer la charge utile du message dans la console, utilisons les WebSockets pour envoyer les informations pertinentes au navigateur.
Mais d'abord, installons une bibliothèque d'aide Node.js WebSocket appelée ws.
Une fois que c'est fait, nous pouvons utiliser ws dans notre fichier server.js comme suit pour créer un serveur de sockets web :
const http = require('http');
const WebSocket = require('ws');
// Create a web socket server on top of a regular http server
const server = http.createServer(app.callback());
const wsserver = new WebSocket.Server({ server: server });Remplacer l'original app.listen(3000) avec server.listen(3000).
Ajoutons également une fonction pour gérer les données utiles du message entrant, puis envoyons ces données au navigateur.
function receiveSms(payload) {
const phone = payload.msisdn;
const msg = payload.text;
const timestamp = payload['message-timestamp'];
const smsData = JSON.stringify({
phone: phone,
msg: msg,
timestamp: timestamp
});
// Broadcast the message to all open clients
wsserver.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(smsData);
}
});
}
L'ensemble de votre fichier server.js jusqu'à ce point du tutoriel devrait ressembler à ceci :
const Koa = require('koa');
const bodyParser = require('koa-bodyparser');
const Router = require('koa-router');
const serve = require('koa-static');
const http = require('http');
const WebSocket = require('ws');
const app = new Koa();
const router = new Router();
const server = http.createServer(app.callback());
const wsserver = new WebSocket.Server({ server: server });
app.use(serve('./public'));
app.use(bodyParser());
router.post('/inbound-sms', async (ctx, next) => {
const payload = ctx.request.body;
receiveSms(payload);
ctx.status = 200;
});
app.use(router.routes()).use(router.allowedMethods());
server.listen(3000);
console.log('listening on port 3000');
function receiveSms(payload) {
const phone = payload.msisdn;
const msg = payload.text;
const timestamp = payload['message-timestamp'];
const smsData = JSON.stringify({
phone: phone,
msg: msg,
timestamp: timestamp
});
// Broadcast the message to all open clients
wsserver.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(smsData);
}
});
}
L'étape suivante consiste à s'assurer que le navigateur est prêt à recevoir ces données du serveur.
Effacez le contenu par défaut du fichier client.js fourni par Glitch, et remplacez son contenu par ce qui suit :
document.addEventListener("DOMContentLoaded", function() {
let socket = null;
let connected = false;
function start() {
socket = new WebSocket('wss://' + location.host);
socket.onopen = function(evt) {
connected = true;
console.log('open')
}
socket.onmessage = function(evt) {
const reply = JSON.parse(evt.data);
console.log(reply);
addMsg(reply.phone, reply.msg, reply.timestamp, 'messages');
}
socket.onclose = function(evt) {
connected = false;
console.log('closed')
check();
}
}
function check() {
if(!socket || socket.readyState == 3) start();
}
start();
setInterval(check, 5000);
});Il y a deux fonctions ici, start() pour établir une nouvelle connexion WebSocket et les gestionnaires d'événements correspondants, et check() pour vérifier l'état de la connexion et se reconnecter en cas de déconnexion.
Maintenant, si vous ouvrez la console du navigateur sur votre application et que vous la laissez tranquille pendant un certain temps, vous devriez voir une série d'icônes open et close enregistrées dans la console.
Check
Remplacer le balisage par défaut de l'élément le fichier index.html par ce qui suit :
<main>
<h1>V-mobile</h1>
<ul id="messages"></ul>
</main>Plus tard, nous pourrons ajouter d'autres éléments et styles pour que l'image ressemble davantage à celle d'un téléphone portable. Pour l'instant, commençons par afficher toutes les données au bon endroit. Nous allons ajouter 2 fonctions supplémentaires au fichier client.js qui analyseront les données envoyées par le serveur et les ajouteront au DOM.
function addMsg(sender, content, time, parent) {
const messages = document.getElementById(parent);
const newMsg = document.createElement('li');
messages.appendChild(newMsg);
appendData(newMsg, sender);
appendData(newMsg, content);
appendData(newMsg, time);
}
function appendData(newMsg, data) {
const textSpan = document.createElement('span');
const textContent = document.createTextNode(data);
textSpan.appendChild(textContent);
newMsg.appendChild(textSpan);
}Ajoutez cette nouvelle fonction au gestionnaire d'événements onmessage et lorsque vous enverrez un SMS à votre numéro virtuel, ce SMS devrait s'afficher sur votre page, bien qu'il ne soit pas très esthétique.
socket.onmessage = function(evt) {
const reply = JSON.parse(evt.data);
console.log(reply);
addMsg(reply.phone, reply.msg, reply.timestamp, 'messages');
}
First Inbound
Ensuite, retournez sur votre tableau de bord Nexmo et accédez à la page Créer une application sous la rubrique Messages et répartition dans la barre latérale. Remplissez le nom de votre application, et les URL des webhooks avec l'URL de votre application Glitch en tant qu'hôte. Vous devrez également générer une paire de clés publiques/privées, ce qui vous invitera à télécharger le fichier private.key fichier.
Generate key
Il est important que les deux URL de webhook soient configurées et que votre application ait des routes configurées pour ces deux points d'extrémité afin d'accepter les requêtes. POST afin d'éviter l'accumulation d'une file d'attente de messages non désirée.
Cliquez ensuite sur le bouton orange Créer une application orange. L'écran suivant vous permet de lier votre numéro virtuel à votre demande en cliquant sur le bouton lier sous le bouton Gérer dans la colonne Gérer.
Create a message application
Enfin, il vous sera demandé si vous souhaitez lier des comptes externes, mais vous pouvez laisser cette option pour l'instant.
External accounts
Pour télécharger le fichier private.key Glitch et le garder secret, vous pouvez créer le fichier dans un dossier. .data dossier. Le contenu de ce dossier ne sera visible que par vous et par les collaborateurs de confiance que vous ajoutez au projet. Copiez le contenu du fichier private.key que vous avez téléchargé plus tôt dans ce nouveau fichier.
Private key
Glitch prend en charge les variables d'environnement via le fichier .env qui est un moyen sûr de stocker vos identifiants API et d'autres données privées pour votre projet. Configurez votre clé API, votre secret, votre numéro virtuel Numbers, l'ID de l'application Messages et le chemin d'accès à la clé privée dans le fichier .env dans le fichier
Veillez à les mettre entre guillemets, car chaque valeur doit être une chaîne de caractères. Nous y ferons référence pour initialiser une nouvelle instance Nexmo, que nous utiliserons pour envoyer des SMS.
env file
Ajoutez vos identifiants API au fichier server.js et initialiser une nouvelle instance Nexmo.
const NEXMO_API_KEY = process.env.NEXMO_API_KEY;
const NEXMO_API_SECRET = process.env.NEXMO_API_SECRET;
const NEXMO_APPLICATION_ID = process.env.NEXMO_APPLICATION_ID;
const NEXMO_APPLICATION_PRIVATE_KEY_PATH = process.env.NEXMO_APPLICATION_PRIVATE_KEY_PATH;
const NEXMO_NUMBER = process.env.NEXMO_NUMBER;
const Nexmo = require('nexmo');
const nexmo = new Nexmo({
apiKey: NEXMO_API_KEY,
apiSecret: NEXMO_API_SECRET,
applicationId: NEXMO_APPLICATION_ID,
privateKey: NEXMO_APPLICATION_PRIVATE_KEY_PATH
});
Les utilisateurs devront pouvoir saisir le numéro de téléphone du destinataire et le message qu'ils souhaitent envoyer, et nous allons donc ajouter des champs de saisie à cet effet.
<input type="tel" name="phone" placeholder="Send SMS to…?" required>
<input type="text" name="msg">
<button id="send" type="button">Send</button>
Inputs
Pour gérer les entrées de l'utilisateur, ajoutez ce qui suit à votre fichier client.js fichier :
const msgField = document.querySelector('input[name="msg"]');
const phoneField = document.querySelector('input[name="phone"]');
const sendBtn = document.getElementById('send');
msgField.addEventListener('keypress', (evt) => {
if (evt.keyCode === 13) {
const passed = phoneCheck(phoneField);
if (passed) {
send(socket, phoneField, msgField);
} else {
console.log('Phone field was not filled. To do: add error handling UI here.');
}
}
}, false);
sendBtn.addEventListener('click', (evt) => {
const passed = phoneCheck(phoneField);
if (passed) {
send(socket, phoneField, msgField);
} else {
console.log('Phone field was not filled. To do: add error handling UI here.');
}
}, false);
function phoneCheck(phoneField) {
return phoneField.value !== '' && /^\d+$/.test(phoneField.value);
}
function send(socket, phoneField, msgField) {
const phone = phoneField.value.replace(/\D/g,'');
const msg = msgField.value;
const payload = JSON.stringify({
phone: phone,
message: msg
});
socket.send(payload);
const date = new Date();
const time = date.toLocaleTimeString();
addMsg('YOUR_APP_NAME', msg, time, 'messages');
msgField.value= '';
}
Ce que nous faisons ici, c'est déclencher la fonction send() lorsque l'utilisateur clique sur le bouton Envoyer ou sur le bouton Entrée ou sur la touche Entrée. Le champ du numéro de téléphone fait également l'objet d'une vérification très rudimentaire, afin de s'assurer que seuls des chiffres sont saisis. Le message s'affiche également dans le navigateur, comme dans une application de messagerie classique.
Il y a beaucoup de beaucoup Il y a beaucoup plus à faire pour la validation des champs du point de vue de la sécurité et de l'interface utilisateur, ce qui n'entre pas dans le cadre de ce tutoriel, mais la validation est importante et c'est toujours la meilleure pratique que de consacrer des efforts et des tests pour s'assurer qu'elle est bien faite.
Du côté du serveur, nous devons prendre les données envoyées par le navigateur et transmettre le message au numéro de téléphone du destinataire.
Ajoutez les routes suivantes à votre fichier server.js fichier :
router.post('/webhooks/inbound-message', async (ctx, next) => {
ctx.status = 200;
});
router.post('/webhooks/message-status', async (ctx, next) => {
ctx.status = 200;
});
Cela permet de s'assurer que POST que les requêtes de Nexmo sont envoyées à des points d'extrémité appropriés et qu'elles reçoivent des 200 des réponses en cas de succès.
Nous ajouterons un gestionnaire de message et une fonction forwardSMS() qui utilisera l'API Messages de Nexmo pour envoyer un SMS au destinataire cible une fois que les données du navigateur auront été reçues.
wsserver.on('connection', function connection(socket) {
socket.on('message', data => {
forwardSms(JSON.parse(data));
});
});
function forwardSms(payload) {
const phone = payload.phone;
const msg = payload.message;
nexmo.channel.send(
{ "type": "sms", "number": phone },
{ "type": "sms", "number": NEXMO_NUMBER },
{
"content": {
"type": "text",
"text": msg
}
},
(err, data) => {
if (err) { console.log(err) }
if (data) { console.log('Outbound message successful: ', data.message_uuid) }
}
)
}
Pour vérifier que tout fonctionne comme prévu, entrez le numéro d'un téléphone portable auquel vous avez accès et envoyez un message test. Votre destinataire cible devrait recevoir le SMS dans les secondes qui suivent.
Forward SMS
Si le destinataire répond au fil de discussion du SMS, le message est renvoyé au navigateur.
Reply
Maintenant que le système sous-jacent est opérationnel, il y a plusieurs choses que vous pouvez faire si vous voulez continuer ce projet, comme rendre l'interface plus jolie, ajouter des contrôles de validation plus forts à la fois sur le client et le serveur, gérer les cas de figure, etc.
Ma version de ce projet s'appelle V-mobile et vous pouvez la voir sur Glitch. vérifier sur Glitch. Si vous aimez le résultat, n'hésitez pas à remixer mon projet et à vous l'approprier.
End result
Si vous souhaitez en savoir plus sur ces API, voici quelques liens qui pourraient vous être utiles :
Documentation pour l'API Messages sur le portail des développeurs
Série de tutoriels pour diverses API Nexmo
Si vous avez besoin de nous, essayez le canal Slack de la canal Slack de la communauté Nexmo
Dites-nous ce que vous en pensez en tweetant à @NexmoDev