){kind=small}
Créer une messagerie vocale personnalisée avec Node.js, Express et Socket.io
Temps de lecture : 9 minutes
Dans ce tutoriel, vous apprendrez à construire votre boîte vocale. Nous utiliserons Express.js et Socket.io.
Vous pouvez trouver le code complet sur GitHub.
Node.js installé
Ngrok est installé pour exposer votre serveur de développement local à l'internet.
Une compréhension de base de JavaScript et de Node.js
Un compte API Vonage pour accéder à notre API Voice
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.
Pour votre référence, voici à quoi ressemblera le répertoire du projet :
Créez un répertoire pour votre application et allez-y.
Exécuter
npm init -ypour initialiser votre projet.
Pour rendre les points d'accès de notre serveur local accessibles depuis l'internet sans déployer notre application dans un environnement de production, nous exposerons notre machine locale à l'aide de ngrok.
Ouvrez un nouveau terminal ou une fenêtre d'invite de commande et lancez ngrok sur le port 3000 avec la commande suivante : ngrok http 3000.
Connectez-vous à votre tableau de bord tableau de bord API de Vonage et naviguez jusqu'à "Vos applications" sous Construire et gérer.
Cliquez sur "+ Créer une nouvelle application". Donnez un nom à votre application et sélectionnez "Générer une clé publique et privée", puis téléchargez la clé privée générée.
Dans la section "Capacités", activez "Voice" et fournissez les URL pour l'événement et les points de terminaison du webhook de réponse. Utilisez votre URL Ngrok :
${NGROK_URL}/eventpour l'URL de l'événement et${NGROK_URL}/answerpour l'URL de réponse.Enregistrez votre application. Notez que l'identifiant de l'application et la clé API sont fournis.
Ajoutez la clé privée téléchargée au répertoire de votre projet.
Consultez notre guide ngrok pour obtenir de l'aide sur les points de terminaison des webhooks.
Ensuite, nous allons sécuriser un numéro virtuel qui servira de point de contact pour les appels entrants. Ce numéro sera associé à notre application Vonage. Voici la procédure à suivre pour en obtenir un :
Installer le CLI de Vonage: npm install @vonage/cli -g Recherchez les numéros disponibles dans la région souhaitée : vonage numbers:search US (remplacez US par le code de votre pays si nécessaire). Achetez un numéro : vonage numbers:buy 12079460000 US.
N'oubliez pas que certains numéros ne peuvent pas être achetés via la ligne de commande, vous devez donc les acheter via le tableau de bord. Vous pouvez le faire en allant sur le Tableau de bord Vonage et la page Acheter des Numbers. Cochez 'Voice' dans le filtre de recherche et sélectionnez le pays dans lequel vous souhaitez acheter un numéro.
Une fois que nous avons sélectionné notre numéro, nous devons le lier à notre application Vonage. Cela peut se faire directement à partir du tableau de bord de Vonage ou à l'aide de l'interface de communication. En liant le numéro, nous nous assurons que les appels sont correctement dirigés vers notre application.
vonage apps:link --number=12079460000 VONAGE_APPLICATION_ID
Vous pouvez également le faire à partir du tableau de bord. Allez à la page Applications et cliquez sur la demande que vous avez créée précédemment. Cliquez sur le bouton "Lier" à côté du numéro que vous souhaitez lier dans la section Voice.
Créez un fichier .env dans la racine de votre projet avec ce qui suit, en remplissant vos données à partir du tableau de bord Vonage: Consultez cet article de blog si vous n'êtes pas familier avec l'utilisation des variables d'environnement dans Node.js..
Nous allons utiliser les dépendances suivantes dans notre projet : Express Socket.io @vonage/server-client) body-parser dotenv
Vous pouvez les installer en exécutant la commande suivante :
Créez le fichier index.js et initialisez votre serveur avec les paquets requis. Configurez un client Vonage en utilisant les variables de .env et en soulignant les /answer, /event, et /voicemail et les itinéraires.
require("dotenv").config();
const express = require("express");
const app = express();
const http = require("http").Server(app);
const io = require("socket.io")(http);
const bodyParser = require("body-parser");
const { FileClient } = require("@vonage/server-client");
// Ensure these environment variables are correctly set in your .env file
const fileClient = new FileClient({
applicationId: process.env.VONAGE_APPLICATION_ID,
privateKey: process.env.PRIVATE_KEY,
});
app.use(express.static("public"));
app.use(bodyParser.json());
app.get('/answer', (req, res) => {});
app.post('/event', (req, res) => {});
app.post('/voicemail', (req, res) => {});
http.listen(3000, () => console.log("Server is running on port 3000"));
Dans l'itinéraire /answer nous avons mis en place un flux d'appels à l'aide d'un NCCO (Call Control Object) pour interagir avec les appelants. Ce script accueille l'appelant, l'invite à laisser un message après un bip et met fin à l'enregistrement en appuyant sur la touche "#", suivi d'un message d'adieu. La ligne res.send(ncco); renvoie ce jeu d'instructions à Vonage, qui l'exécute pendant l'appel.
app.get("/answer", (req, res) => {
const ncco = [
{
action: "talk",
voiceName: "Ivy",
text: "Please record your message for me after the beep. Press # to end.",
},
{
action: "record",
eventUrl: [`${process.env.URL}/voicemail`],
endOnKey: "#",
beepStart: true,
},
{
action: "talk",
voiceName: "Ivy",
text: "Message recorded. Bye!"
}
];
res.send(ncco);
});
Personnalisez le message d'accueil pour rendre l'appel plus personnel. De nombreuses options vocales vous permettent d'ajuster le ton, la hauteur et le style de la voix en fonction de vos préférences ou de l'identité de votre marque. Explorez différents styles vocaux pour trouver celui qui convient le mieux à votre application. Notez que certains styles vocaux ne prennent pas en charge le langage SSML (Speech Synthesis Markup Language). liste des langues et styles pris en charge.
Le point de terminaison /event traite divers événements envoyés par l'API Vonage. Lorsqu'un événement se produit, tel qu'un appel répondu ou un message vocal enregistré, l'API de Vonage envoie les données relatives à cet événement à ce point de terminaison. Notre serveur enregistre ces données d'événement dans la console à des fins de visibilité et renvoie une réponse 204 (No Content response) pour accuser réception. Ce traitement minimal est suffisant pour de nombreuses Applications, bien que vous puissiez l'étendre pour effectuer des actions spécifiques basées sur les types d'événements.
Mettre en œuvre une logique dans /event pour traiter les événements.
app.post("/event", (req, res) => {
console.log("Event received:", req.body);
res.sendStatus(204);
});
Lorsque quelqu'un laisse un message vocal, l'API de Vonage envoie une requête POST à notre point de terminaison /voicemail avec des détails sur l'enregistrement, y compris une URL permettant d'accéder au fichier audio enregistré.
Notre serveur simule la sauvegarde de cet enregistrement en créant un nom de fichier basé sur l'horodatage actuel et en prétendant sauvegarder le fichier à un chemin spécifié. Cette simplification est faite à des fins de démonstration ; il est probable que vous téléchargiez l'enregistrement à partir de l'URL fournie et que vous le stockiez de manière plus sûre dans une application réelle.
Après avoir "enregistré" le fichier, le serveur envoie un message vocal à tous les clients connectés via Socket.io, en transmettant le nom du fichier ainsi que la date et l'heure actuelles.
En /voicemailsimule l'enregistrement des messages vocaux et émet un événement voicemail au client.
app.post("/voicemail", (req, res) => {
const filename = `voicemail-${Date.now()}.mp3`;
const path = `${__dirname}/public/voicemails/${filename}`;
fileClient
.downloadFile(req.body.recording_url, path)
.then(() => {
io.emit("voicemail", {
date: new Date().toISOString(),
file: filename,
});
res.sendStatus(200);
})
.catch((err) => {
console.error("Error saving file:", err);
res.status(500).send(err);
});
});
http.listen(3000, () => console.log("Server is running on port 3000"));
En public/index.htmlnous ajouterons un élément <audio> pour la lecture des messages vocaux et un conteneur pour la liste des messages vocaux, permettant à la réception des messages vocaux de lire ou de supprimer les messages reçus.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Voicemail</title>
</head>
<body>
<audio>Sorry, your browser does not support this audio.</audio>
<div id="voicemails" class="voicemails">
<h2>New Voicemails</h2>
<!-- Voicemails will be dynamically added here -->
</div>
</body>
</html>
Notre JavaScript enrichit l'interface utilisateur en se connectant au serveur via Socket.io pour des mises à jour en temps réel, comme l'arrivée de nouveaux messages vocaux. Il ajoute automatiquement ces messages vocaux à une liste, en indiquant leur date et en fournissant des boutons pour les écouter ou les supprimer. Alors que le bouton de lecture utilise un élément <audio> pour la lecture, le bouton de suppression ne fait que supprimer le message vocal de l'écran, et non du serveur. Améliorer l'application pour qu'elle puisse supprimer les messages vocaux du serveur constituerait également une amélioration précieuse, qui nécessiterait une logique supplémentaire côté serveur pour gérer les suppressions de fichiers en toute sécurité.
Ajoutez le code suivant à votre fichier index.html :
<script src="/socket.io/socket.io.js"></script>
<script>
const voicemailsDiv = document.getElementById("voicemails");
const audio = document.querySelector("audio");
document.addEventListener("click", function (e) {
let el = e.target;
if (el.classList.contains("play_btn")) {
audio.src = el.getAttribute("data-src");
audio.play();
console.log("Playing audio from:", audio.src);
}
if (el.classList.contains("del_btn")) {
el.closest(".voicemail-item").remove();
console.log("Voicemail deleted");
}
});
const socket = io();
socket.on("connect", () => {
console.log("Connected to server via Socket.io");
});
socket.on("voicemail", (vm) => {
console.log("Received voicemail event:", vm);
const voicemailElement = document.createElement("div");
voicemailElement.classList.add("voicemail-item");
voicemailElement.innerHTML = `
<div>Date: ${vm.date}</div>
<button class="play_btn" data-src="/${vm.file}">Play</button>
<button class="del_btn">Delete</button>
`;
voicemailsDiv.appendChild(voicemailElement);
});
</script>
</html>
Pour faire fonctionner votre serveur, lancez node index.js dans votre terminal depuis la racine de votre répertoire, et assurez-vous que ngrok est lancé.
Si vous appelez le numéro de téléphone associé à votre application Vonage, vous entendrez le message d'accueil que vous avez fourni avec les NCCO. Une fois que vous avez enregistré votre message, il devrait apparaître sur votre page HTML sur localhost:3000.
Vous avez créé un système de messagerie vocale permettant aux appelants de laisser des messages affichés sur une page web. Bien que la fonctionnalité actuelle ne s'étende pas à la suppression de fichiers côté serveur, il serait utile d'y remédier.
Discutez avec nous sur notre Communauté des développeurs de Vonage Slack ou envoyez-nous un message sur X.