){kind=small}
Benutzerdefinierte Voicemail mit Node.js, Express und Socket.io erstellen
Lesedauer: 8 Minuten
In diesem Lernprogramm lernen Sie, wie Sie Ihre Voicemail erstellen. Wir verwenden Express.js und Socket.io.
Sie finden den den kompletten Code auf GitHub.
Node.js installiert
Ngrok wird installiert, um Ihren lokalen Entwicklungsserver dem Internet zugänglich zu machen.
Ein grundlegendes Verständnis von JavaScript und Node.js
Ein Vonage API-Konto für den Zugriff auf unsere Voice API
Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.
In diesem Lernprogramm wird auch eine virtuelle Telefonnummer verwendet. Um eine zu erwerben, gehen Sie zu Rufnummern > Rufnummern kaufen und suchen Sie nach einer Nummer, die Ihren Anforderungen entspricht.
Zu Ihrer Information: Das Projektverzeichnis wird folgendermaßen aussehen:
Erstellen Sie ein Verzeichnis für Ihre Anwendung und wechseln Sie dorthin.
Führen Sie aus.
npm init -yum Ihr Projekt zu initialisieren.
Um die Endpunkte unseres lokalen Servers vom Internet aus zugänglich zu machen, ohne dass unsere Anwendung in einer Produktionsumgebung eingesetzt wird, stellen wir unseren lokalen Rechner mit ngrok.
Öffnen Sie ein neues Terminal- oder Eingabeaufforderungsfenster und starten Sie ngrok an Port 3000 mit dem folgenden Befehl: ngrok http 3000.
Anmelden/ Sign Up in Ihrem Vonage API-Dashboard und navigieren Sie zu "Your Applications" unter Build & Manage.
Klicken Sie auf "+ Eine neue Anwendung erstellen". Geben Sie Ihrer Anwendung einen Namen und wählen Sie "Öffentlichen und privaten Schlüssel generieren", und laden Sie den generierten privaten Schlüssel herunter.
Aktivieren Sie im Abschnitt "Fähigkeiten" die Option "Voice" und geben Sie die URLs für die Ereignis- und Antwort-Webhook-Endpunkte an. Verwenden Sie Ihre Ngrok-URL:
${NGROK_URL}/eventfür die Ereignis-URL und${NGROK_URL}/answerfür die Antwort-URL.Speichern Sie Ihre Anwendung. Beachten Sie, dass die Anwendungs-ID und der API-Schlüssel angegeben sind.
Fügen Sie den heruntergeladenen privaten Schlüssel in Ihr Projektverzeichnis ein.
In unserem ngrok-Leitfaden finden Sie Hilfe zu den Webhook-Endpunkten
Als Nächstes sichern wir uns eine virtuelle Nummer, die als Kontaktstelle für eingehende Anrufe dient. Diese Nummer wird mit unserer Vonage-Anwendung verbunden sein. Hier ist das Verfahren, um eine solche Nummer zu erhalten:
Installieren Sie die Vonage CLI: npm install @vonage/cli -g Suchen Sie nach verfügbaren Numbers in Ihrer gewünschten Region: vonage numbers:search US (ersetzen Sie US durch Ihre Landesvorwahl, falls erforderlich). Kaufen Sie eine Numbers: vonage numbers:buy 12079460000 US.
Denken Sie daran, dass einige Numbers nicht über die Befehlszeile erworben werden können, Sie müssen sie also über das Dashboard erwerben. Sie können dies tun, indem Sie zum Vonage-Dashboard und die Buy Numbers Seite. Klicken Sie im Suchfilter auf "Voice" und wählen Sie das Land aus, in dem Sie eine Numbers kaufen möchten.
Sobald wir unsere Nummer ausgewählt haben, müssen wir sie mit unserer Vonage-Anwendung verknüpfen. Dies kann direkt über das Vonage Dashboard oder über die CLI erfolgen. Durch die Verknüpfung der Nummer stellen wir sicher, dass Anrufe ordnungsgemäß an unsere Anwendung weitergeleitet werden.
vonage apps:link --number=12079460000 VONAGE_APPLICATION_ID
Sie können dies auch über das Dashboard tun. Gehen Sie zur Seite Applications und klicken Sie auf die Anwendung, die Sie zuvor erstellt haben. Klicken Sie auf die Schaltfläche "Verknüpfen" neben der Nummer, die Sie im Bereich Voice verknüpfen möchten.
Erstellen Sie eine .env Datei in Ihrem Projektstamm, in die Sie Ihre Daten aus dem Vonage Dashboard: Überprüfen Sie diesen Blog-Beitrag, wenn Sie mit der Verwendung von Umgebungsvariablen in Node.js nicht vertraut sind.
Wir werden die folgenden Abhängigkeiten in unserem Projekt verwenden: Express Socket.io @vonage/server-client) body-parser dotenv
Sie können sie installieren, indem Sie den folgenden Befehl ausführen:
Erstellen Sie die index.js Datei und initialisieren Sie Ihren Server mit den erforderlichen Paketen. Konfigurieren Sie einen Vonage-Client mit den Variablen aus .env und skizzieren Sie die /answer, /event, und /voicemail Routen.
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"));
In der /answer Route richten wir einen Anruffluss mit Hilfe eines NCCO (Anrufsteuerungsobjekt) um mit den Anrufern zu interagieren. Dieses Skript begrüßt den Anrufer, fordert ihn nach einem Signalton auf, eine Nachricht zu hinterlassen, und beendet die Aufnahme, wenn die Taste "#" gedrückt wird, gefolgt von einer Abschiedsnachricht. Die res.send(ncco); Leitung sendet diesen Befehlssatz an Vonage zurück und führt ihn während des Anrufs aus.
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);
});
Passen Sie die Begrüßung an, um den Anruf persönlicher zu gestalten. Viele Voice-Optionen ermöglichen es Ihnen, den Tonfall, die Tonhöhe und den Stil der Stimme an Ihre Vorlieben oder Ihre Markenidentität anzupassen. Probieren Sie verschiedene Voice-Stile aus, um die perfekte Lösung für Ihre Anwendung zu finden. Beachten Sie, dass einige Voice-Stile möglicherweise nicht SSML (Speech Synthesis Markup Language) unterstützen, daher lohnt es sich, die Liste der unterstützten Sprachen und Stile.
Der /event Endpunkt verarbeitet verschiedene Ereignisse, die von der Vonage-API gesendet werden. Wenn ein Ereignis eintritt, z. B. ein angenommener Anruf oder eine aufgezeichnete Voicemail, sendet die Vonage-API Daten zu diesem Ereignis an diesen Endpunkt. Unser Server protokolliert diese Ereignisdaten auf der Konsole, um sie sichtbar zu machen, und gibt eine 204 (Antwort ohne Inhalt) zurück, um den Empfang zu bestätigen. Diese minimale Handhabung ist für viele Anwendungen ausreichend, obwohl Sie dies erweitern könnten, um spezifische Aktionen auf der Grundlage von Ereignistypen durchzuführen.
Implementieren Sie Logik in /event um Ereignisse zu verarbeiten.
app.post("/event", (req, res) => {
console.log("Event received:", req.body);
res.sendStatus(204);
});
Wenn jemand eine Sprachnachricht hinterlässt, sendet die Vonage API eine POST-Anfrage an unseren /voicemail Endpunkt mit Details zur Aufnahme, einschließlich einer URL, unter der die aufgezeichnete Audiodatei abgerufen werden kann.
Unser Server simuliert das Speichern dieser Aufzeichnung, indem er einen Dateinamen auf der Grundlage des aktuellen Zeitstempels erstellt und vorgibt, die Datei unter einem bestimmten Pfad zu speichern. Diese Vereinfachung dient zu Demonstrationszwecken; Sie würden die Aufzeichnung wahrscheinlich von der angegebenen URL herunterladen und sicherer in einer tatsächlichen Anwendung speichern.
Nach dem "Speichern" der Datei sendet der Server über Socket.io ein Voicemail-Ereignis an alle verbundenen Clients, wobei der Dateiname sowie das aktuelle Datum und die Uhrzeit übermittelt werden.
Unter /voicemailsimulieren Sie das Speichern von Sprachnachrichten und senden ein voicemail Ereignis an den 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"));
Unter public/index.htmlfügen wir ein <audio> Element zum Abspielen von Voicemail-Nachrichten und einen Container zum Auflisten von Voicemail-Nachrichten hinzufügen, der es dem Voicemail-Empfänger ermöglicht, empfangene Nachrichten abzuspielen oder zu löschen.
<!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>
Unser JavaScript bereichert die Benutzeroberfläche, indem es sich über Socket.io mit dem Server verbindet, um Echtzeit-Updates zu erhalten, z. B. wenn neue Sprachnachrichten eingehen. Es fügt diese Sprachnachrichten automatisch zu einer Liste hinzu, zeigt ihr Datum an und bietet Schaltflächen zum Abspielen oder Löschen. Während die Wiedergabetaste ein <audio> Element für die Wiedergabe verwendet, entfernt die Schaltfläche "Löschen" die Sprachnachricht nur von der Anzeige und nicht vom Server. Eine Erweiterung der Anwendung, um Sprachnachrichten vom Server zu löschen, wäre ebenfalls eine wertvolle Verbesserung, die eine zusätzliche serverseitige Logik zur sicheren Handhabung von Dateilöschungen erfordert.
Fügen Sie den folgenden Code in Ihre index.html-Datei ein:
<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>
Um Ihren Server zum Laufen zu bringen, führen Sie node index.js in Ihrem Terminal von der Wurzel Ihres Verzeichnisses aus und stellen Sie sicher, dass ngrok gestartet ist.
Wenn Sie die mit Ihrer Vonage-Anwendung verbundene Telefonnummer anrufen, hören Sie die Ansage, die Sie mit den NCCOs bereitgestellt haben. Sobald Sie Ihre Nachricht aufgenommen haben, sollte sie auf Ihrer HTML-Seite auf localhost:3000 erscheinen.
Sie haben jetzt ein Voicemail-System eingerichtet, mit dem Anrufer Nachrichten auf einer Webseite hinterlassen können. Die derzeitige Funktionalität erstreckt sich zwar nicht auf das serverseitige Löschen von Dateien, doch wäre dies eine wertvolle Verbesserung.
Chatten Sie mit uns auf unserer Vonage Entwickler-Community Slack oder senden Sie uns eine Nachricht auf X.