Teilen Sie:
){kind=small}
Hui Jing ist Developer Advocate bei Nexmo. Sie hat eine übermäßige Liebe zu CSS und Typografie und ist allgemein leidenschaftlich über alle Dinge im Web.
SMS im Browser: Ein Abenteuer in WebSockets
Lesedauer: 18 Minuten
Ein Großteil der von der Nexmo Messages API geleisteten Schwerarbeit findet auf der Serverseite statt. Nachrichten werden gesendet, empfangen, verarbeitet und so weiter, aber in der Regel sind all diese Aktivitäten für die Endnutzer vieler Applikationen, die die API nutzen, nicht sichtbar.
In den meisten Fällen wird die Anzeige dieser Meldungen für den Endbenutzer von den jeweiligen Applikationen übernommen. Es gibt auch die Möglichkeit, diese Nachrichten in einem Browser anzuzeigen, aber dafür brauchen wir eine Möglichkeit, die Nachrichten vom Server zum Browser zu übertragen. Und das können wir mit Hilfe der WebSockets-API tun.
Dies ist ein ziemlich langes Tutorial, das keine Vorkenntnisse voraussetzt, außer einem grundlegenden Verständnis von HTML, CSS, Javascript und Node.js. Sie können die einzelnen Abschnitte gerne überspringen, wenn Sie bereits wissen, worum es geht.
Wir werden ein "virtuelles" Telefon im Browser erstellen, das SMS senden und empfangen kann. Wir verwenden Glitch um die Anwendung zu hosten, daher sind einige der Einrichtungsanweisungen auf Glitch ausgerichtet.
Glitch ist eine Online-Entwicklungsumgebung, die es Entwicklern ermöglicht, ihre Anwendungen ohne lästige Servereinrichtung zu erstellen und bereitzustellen. Alle Apps auf der Plattform können neu gemischt und personalisiert werden, was sie zu einem perfekten Ort macht, um Code zu teilen und herauszufinden, wie Dinge funktionieren.
Sie können auch eine beliebige Umgebung verwenden, in der Node.js installiert ist, wenn Sie das bevorzugen. Alle Abhängigkeiten für dieses Projekt werden über npm.
Glitch verbessert ständig seine Benutzeroberfläche und Funktionen. Zum Zeitpunkt der Erstellung dieses Artikels können Sie einen neuen Account auf Glitch erstellen, indem Sie auf die Schaltfläche Anmelden in der oberen rechten Ecke der Seite klicken und sich über GitHub oder Facebook anmelden oder sich mit Ihrer E-Mail-Adresse registrieren.
Glitch sign in
Danach können Sie auf die Schaltfläche Neues Projekt klicken, um loszulegen. Es gibt 3 Auswahlmöglichkeiten, hallo-webpage, hallo-express und hello-sqlite. Für die Zwecke dieses Tutorials sollten Sie mit hello-express verwenden, da Sie damit eine Umgebung erhalten, in der Node.js und npm bereits installiert sind.
Glitch hello-express
Um zusätzliche Node-Pakete zu installieren, können Sie auf die Befehlszeile zugreifen, indem Sie auf die Schaltfläche Konsole im Fenster Protokolle klicken.
Console
Sie können das Logs-Fenster umschalten, indem Sie auf das Symbol Protokolle oben in der Seitenleiste klicken. Von dort aus können Sie alle Standard-CLI-Befehle in einer Bash-Umgebung verwenden. Der einzige Unterschied ist, dass Sie bei Glitch pnpm anstelle von npm.
Glitch verwendet Express als Standard-Node.js-Framework, aber die Konvertierung der App in Koa.js ist nicht allzu kompliziert. Beachten Sie, dass Koa Node v7.6.0 oder höher für ES2015 und die Unterstützung von asynchronen Funktionen erfordert.
Dependencies
Entfernen Sie express und body-parser mit folgendem Befehl aus dem Projekt:
Installieren Sie Koa.js und koa-bodyparser mit dem folgenden Befehl:
Die Konsole und der Editor synchronisieren sich nicht automatisch, also führen Sie den refresh Befehl aus, um die package.json Datei im Editor zu aktualisieren.
Koa
Sie werden auch feststellen, dass der Status Ihrer Anwendung einen Fehler anzeigt. Dies ist zu erwarten, da die Standard server.js Datei immer noch auf express.
Um dies zu beheben, ersetzen Sie den Inhalt von server.js durch den folgenden Code:
const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
ctx.body = 'Hello Dinosaur';
});
app.listen(3000);
Wenn Sie nun versuchen, Ihre Bewerbung aufzurufen, sollte eine leere Seite mit den Worten angezeigt werden Hallo Dinosaurier.
Wir müssten eine einfache HTML-Seite mit Eingabefeldern bereitstellen, damit die Benutzer die für den Versand einer SMS relevanten Informationen eingeben können, z. B. die Telefonnummer des Empfängers und die Nachricht selbst.
koa-static ist eine statische File-Serving-Middleware für Koa. Installieren Sie sie über die Konsole mit dem folgenden Befehl in Ihr Projekt:
Um die Dinge weniger kompliziert zu machen, legen Sie alle erforderlichen Dateien für die Landing Page in den Ordner public Ordner. Sie können die index.html Datei aus dem Ordner views Ordner in den Ordner public Ordner verschieben, indem Sie den Dateipfad in der Seitenleiste umbenennen.
Rename file
Sie können dies auch über die Befehlszeile in der Konsole tun.
Sobald das erledigt ist, modifizieren Sie die server.js Datei so, dass sie koa-static verwendet und die Dateien aus dem public Ordner wie folgt:
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');Jetzt wird anstelle von Hallo Weltsollte Ihre Anwendung die Standard-Glitch index.html Datei aufrufen. Wir werden diese Datei später im Lernprogramm ändern, um eine Telefonschnittstelle zu imitieren.
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.
Dashboard
Gehen Sie zurück zu Ihrer Glitch-App und installieren Sie den Nexmo REST API-Client für Node.js mit dem folgenden Befehl:
Wir verwenden die Beta-Version, da sich die Messages API derzeit noch im Beta-Stadium befindet. Und wenn Sie Ihr Projekt aktualisieren, sollte Ihr package.json sollte jetzt so aussehen:
Nexmo node
Und jetzt sind wir mit der Grundeinstellung fertig. Dies kann der Ausgangspunkt für eine beliebige Anzahl von Koa-Applikationen sein, die die Nexmo-APIs nutzen. Sie können dieses Projekt also immer als Starter-Kit auf Glitch behalten und davon ableiten.
Das WebSocket-Protokoll wurde von der Internet Engineering Task Force (IETF) entwickelt, um die Zwei-Wege-Kommunikation zwischen einem Client und einem entfernten Host zu ermöglichen.
Es ist eine Art von Kommunikationsprotokoll, wie HTTP (Hypertext-Übertragungsprotokoll), FTP (Dateiübertragungsprotokoll) oder SMTP (Einfaches Mail-Übertragungsprotokoll). Kommunikationsprotokolle ermöglichen es Maschinen, miteinander zu kommunizieren. Die meisten Kommunikationsprotokolle halten eine offene Verbindung zwischen zwei Rechnern über das Internet aufrecht.
HTTP, auf dem das Web basiert, ist anders. Es ist als verbindungsloses Protokoll bekannt, weil es auf einem Anfrage-/Antwort-Modus basiert. Webbrowser stellen Anfragen an den Server für Bilder, Schriftarten, Inhalte usw., aber sobald die Anfrage erfüllt ist, wird die Verbindung zwischen Browser und Server unterbrochen.
Es ist möglich, eine bestehende HTTP-Verbindung mit Hilfe des HTTP-Upgrade-Headers auf ein neues, inkompatibles Protokoll umzustellen. Verbindungsanfragen sind immer immer vom Client initiiert, obwohl der Server ein Upgrade erzwingen kann, indem er mit einer 426 Upgrade Required HTTP-Antwort an den Client erzwingen kann.
Eine HTTP/1.1-Verbindung kann zu einer TLS-Verbindung (kein empfohlener Ansatz), einer HTTP/2-Verbindung oder einer WebSocket-Verbindung aufgerüstet werden, was der häufigste Anwendungsfall für eine Aufrüstung ist. Der Aufbau einer WebSocket-Verbindung zwischen dem Client und dem Server erfordert eine anfängliche HTTP/1.1-Anfrage, die die Upgrade-Header enthält.
Eine vereinfachte Version der ursprünglichen Kopfzeile sieht etwa so aus:
GET /chat HTTP/1.1
Host: server.example.com
Origin: http://example.com
Upgrade: websocket
Connection: UpgradeWenn der Server das WebSocket-Protokoll unterstützt, stimmt er der Upgrade-Anforderung zu und antwortet auf den Handshake mit einem 101 Statuscode antworten:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: UpgradeAlles andere als ein 101 bedeutet, dass der WebSocket-Handshake noch nicht abgeschlossen ist. Sobald der Handshake abgeschlossen ist, wird die ursprüngliche HTTP/1.1-Verbindung in eine WebSocket-Verbindung umgewandelt und Daten können nun zwischen den beiden Rechnern hin- und hergeschickt werden.
Die WebSockets-API ist eine Schnittstelle, die es Web-Applikationen ermöglicht verwenden können. das WebSocket-Protokoll zur Aufrechterhaltung der bidirektionalen Kommunikation mit serverseitigen Prozessen. Die meisten Browser, die nach 2012 veröffentlicht wurden, unterstützen die WebSockets-API, sodass die Unterstützung relativ gut ist.
Das WebSocket-Objekt bietet die API zum Erstellen und Verwalten einer WebSocket-Verbindung zu einem Server sowie zum Senden und Empfangen von Daten über die Verbindung. Wir können ein neues WebSocket-Objekt mit dem WebSocket-Konstruktor erstellen, WebSocket(url[, protocols]). Die URL, die dem WebSocket-Konstruktor übergeben wird, muss die Form ws oder wss Schema sein, damit die Dinge funktionieren.
const socket = new WebSocket('ws://localhost:8080')Das WebSocket-Objekt sendet 4 Ereignisse, die wir abhören und entsprechend behandeln können:
openerrormessageclose
Sobald eine WebSocket-Verbindung hergestellt ist, wird das open Ereignis ausgelöst. Mit Bezug auf das WebSocket-Objekt, das im vorherigen Codeblock erstellt wurde, würde der entsprechende Event-Handler etwa so aussehen:
socket.onopen = function(evt) {
// do something
}Wir können das Ereignis error Ereignis verwenden, um alle Fehler zu Debugging-Zwecken in der Konsole zu protokollieren, und vielleicht auch einen Fehler-Ereignishandler hinzufügen:
socket.onerror = function(evt) {
console.log('WebSocket error: ', evt)
// include an error event handler here
}In der Regel verwenden wir das Ereignis message Ereignis, das ausgelöst wird, wenn Nachrichten vom Server empfangen werden. Wenn zum Beispiel eine Textnachricht vom Server gesendet wurde, könnte man sie wie folgt auf der Konsole protokollieren:
socket.onmessage = function(evt) {
console.log('Message: ', evt.data)
}Schließlich wird das close Ereignis ausgelöst, wenn die WebSocket-Verbindung geschlossen wird. Sobald dies geschieht, können der Client und der Server keine Nachrichten mehr aneinander senden, bis eine neue Verbindung hergestellt ist.
socket.onclose = function(evt) {
console.log('WebSocket connection closed. ', evt)
}Es gibt auch 2 Methoden, die mit dem WebSocket-Objekt verbunden sind, send() zum Senden von Daten an den Server und close() zum Beenden einer bestehenden WebSocket-Verbindung.
Die Methode send() Methode funktioniert nur, während die Verbindung geöffnet ist, was offensichtlich erscheint, aber wenn der Code falsch strukturiert ist, kann es passieren, dass sie ausgelöst wird, bevor die Verbindung geöffnet ist oder nachdem die Verbindung geschlossen wurde.
// 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)
}Nachdem wir nun besser verstanden haben, was WebSockets sind und wie die WebSocket API funktioniert, sind wir bereit, dieses Wissen zu nutzen, um eine grundlegende Anwendung zum Senden und Empfangen von SMS direkt über den Browser mit der Nexmo Messages API.
Um SMS über die Messages API zu senden und zu empfangen, benötigen Sie eine virtuelle Telefonnummerdie wie eine normale Telefonnummer ist, nur dass sie nicht an eine physische Telefonleitung oder ein Gerät gebunden ist.
Sie können eine virtuelle Nummer kaufen bei der Numbers in der Seitenleiste kaufen, indem Sie Numbers kaufen. Sie können eine lokale Nummer für ein Land Ihrer Wahl, die unterstützten Funktionen und die Art der Nummer, d.h. Mobilfunk, Festnetz oder gebührenfrei, auswählen.
Buy numbers
Sobald Sie Ihre Nummer haben, erscheint sie in der Rubrik Ihre Numbers Abschnitt. Klicken Sie auf das Bleistift-Symbol unter dem ganz rechten Verwalten Spalte, um Ihre eingehende Webhook-URL zu konfigurieren. Dies ist für den Empfang von SMS erforderlich. Wenn eine SMS an Ihre Nummer gesendet wird, wird eine POST Anfrage an diese URL mit der Nutzlast der Nachricht gesendet.
Inbound webhook URL
Wenn Sie Glitch verwenden, würde Ihre Webhook-URL etwa so aussehen https://boom-meal.glitch.me/inbound-sms. Ich schlage die Verwendung von inbound-sms als Route, aber Sie können jede beliebige Route verwenden, solange sie in Ihrer Anwendung gültig ist. Passen Sie die Webhook-URL entsprechend an, je nachdem, wo Ihre Anwendung gehostet wird.
Überprüfen Sie außerdem, ob die Standard-SMS-Einstellung Ihres Kontos auf POST unter HTTP-Methode eingestellt ist.
Settings
Um eine eingehende SMS zu empfangen, müssen Sie in Ihrer Anwendung eine Route hinzufügen, die die eingehende POST Anfrage, die ausgelöst wird, wenn jemand eine SMS an Ihre virtuelle Nummer sendet. Im Gegensatz zu anderen beliebten Node.js-Frameworks wie Express oder Hapi.js wird das Routing von einem separaten Modul gehandhabt, das wir also zuerst installieren müssen.
Fügen Sie Folgendes zu Ihrer server.js Datei hinzu:
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());
Wenn Sie die Installationsanweisungen weiter oben in diesem Tutorial befolgt haben, koa-bodyparser sollte bereits installiert worden sein. Ein Body Parser wird benötigt, um den Request Body zu verarbeiten. Um zu überprüfen, ob alles richtig angeschlossen ist, senden Sie eine SMS an Ihre virtuelle Nummer. Die Nutzlast der Nachricht sollte auf der Konsole protokolliert werden.
SMS payload
Nachdem wir uns vergewissert haben, dass alles funktioniert, können wir nun die relevanten Informationen über WebSockets an den Browser senden, anstatt die Nutzlast der Nachricht auf der Konsole zu protokollieren.
Aber zuerst installieren wir eine Node.js WebSocket-Hilfsbibliothek namens ws.
Sobald das erledigt ist, können wir ws in unserer server.js Datei wie folgt einen Web-Socket-Server erstellen:
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 });Ersetzen Sie das Original app.listen(3000) durch server.listen(3000).
Fügen wir noch eine Funktion hinzu, die die Nutzdaten der eingehenden Nachricht verarbeitet und diese Daten an den Browser sendet.
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);
}
});
}
Ihre gesamte server.js Datei bis zu diesem Punkt des Tutorials sollte in etwa so aussehen:
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);
}
});
}
Der nächste Schritt besteht darin, sicherzustellen, dass der Browser bereit ist, diese Daten vom Server zu empfangen, also ist es an der Zeit, das Front-End einzurichten.
Löschen Sie den Standardinhalt in der Datei client.js Datei, die Glitch zur Verfügung stellt, und ersetzen Sie deren Inhalt durch den folgenden:
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);
});Hier gibt es 2 Funktionen, start() um eine neue WebSocket-Verbindung und die entsprechenden Event-Handler aufzubauen, und check() um den Status der Verbindung zu überprüfen und die Verbindung wiederherzustellen, falls sie getrennt wurde.
Wenn Sie nun die Browserkonsole Ihrer Anwendung öffnen und sie eine Zeit lang in Ruhe lassen, sollten Sie eine Reihe von open und close in der Konsole protokolliert werden.
Check
Ersetzen Sie das Standard-Markup des Elements the index.html Datei stattdessen durch die folgende:
<main>
<h1>V-mobile</h1>
<ul id="messages"></ul>
</main>Wir können später weitere Elemente und Stile hinzufügen, damit es mehr wie ein Mobiltelefon aussieht. Jetzt müssen wir erst einmal dafür sorgen, dass alle Daten an der richtigen Stelle angezeigt werden. Wir fügen 2 weitere Funktionen in die client.js Datei, die die vom Server gesendeten Daten analysieren und an das DOM anhängen.
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);
}Fügen Sie diese neue Funktion in den onmessage Ereignisbehandlungsroutine hinzu, und wenn Sie eine SMS an Ihre virtuelle Nummer senden, sollte diese SMS auf Ihrer Seite angezeigt werden, wenn auch etwas ungestylt und nicht besonders hübsch anzusehen.
socket.onmessage = function(evt) {
const reply = JSON.parse(evt.data);
console.log(reply);
addMsg(reply.phone, reply.msg, reply.timestamp, 'messages');
}
First Inbound
Gehen Sie dann zurück zu Ihrem Nexmo-Dashboard und navigieren Sie zum Bereich Erstellen einer Anwendung Seite unter dem Menüpunkt Nachrichten und Versand in der Seitenleiste. Geben Sie den Namen Ihrer Anwendung und die Webhook-URLs mit der URL Ihrer Glitch-App als Host ein. Außerdem müssen Sie ein öffentliches/privates Schlüsselpaar generieren, das Sie zum Herunterladen der private.key Datei herunterzuladen.
Generate key
Es ist wichtig, dass beide Webhook-URLs konfiguriert sind und dass Ihre Anwendung Routen für beide Endpunkte eingerichtet hat, um POST um einen unerwünschten Aufbau von Nachrichtenwarteschlangen zu verhindern.
Klicken Sie dann auf das orangefarbene Anwendung erstellen Schaltfläche. Auf dem nächsten Bildschirm können Sie Ihre virtuelle Nummer mit Ihrem Antrag verknüpfen, indem Sie auf die Schaltfläche verknüpfen. Schaltfläche unter dem Menüpunkt Verwalten Spalte klicken.
Create a message application
Schließlich werden Sie gefragt, ob Sie externe Konten verknüpfen möchten, aber das können Sie vorerst lassen.
External accounts
Zum Hochladen der private.key Datei in Glitch hochzuladen und sie geheim zu halten, können Sie die Datei in einem .data Ordner ablegen. Der Inhalt dieses Ordners ist nur für Sie und alle vertrauenswürdigen Mitarbeiter, die Sie dem Projekt hinzufügen, sichtbar. Kopieren Sie den Inhalt der Datei private.key den Sie zuvor heruntergeladen haben, in diese neue Datei.
Private key
Glitch unterstützt Umgebungsvariablen über die .env Datei, die eine sichere Möglichkeit bietet, Ihre API-Anmeldeinformationen und andere private Daten für Ihr Projekt zu speichern. Legen Sie Ihren API-Schlüssel, Ihr Geheimnis, die virtuelle Nexmo-Nummer, die ID der Nachrichtenanwendung und den Pfad für den privaten Schlüssel in der .env Datei ein.
Achten Sie darauf, sie in Anführungszeichen einzuschließen, da jeder Wert eine Zeichenkette sein muss. Wir werden auf sie verweisen, um eine neue Nexmo-Instanz zu initialisieren, die wir zum Senden von SMS-Nachrichten verwenden.
env file
Fügen Sie Ihre API-Anmeldedaten in die server.js Datei hinzu und initialisieren Sie eine neue Nexmo-Instanz.
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
});
Wir brauchen eine Möglichkeit für die Benutzer, die Telefonnummer des Empfängers und die Nachricht, die sie senden möchten, einzugeben, also fügen wir einige Eingabefelder hinzu.
<input type="tel" name="phone" placeholder="Send SMS to…?" required>
<input type="text" name="msg">
<button id="send" type="button">Send</button>
Inputs
Um Benutzereingaben zu verarbeiten, fügen Sie Folgendes zu Ihrer client.js Datei hinzu:
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= '';
}
Was wir hier tun, ist die Auslösung der send() Funktion auslösen, wenn der Benutzer auf die Schaltfläche Senden Schaltfläche oder die Eingabe Taste klickt. Es gibt auch eine sehr rudimentäre Überprüfung des Telefonnummernfeldes, um sicherzustellen, dass nur Ziffern eingegeben werden. Die Nachricht wird auch im Browser angezeigt, wie bei einer typischen Messaging-Anwendung.
Es gibt eine viel Aus Sicherheits- und UX-Sicht gibt es bei der Feldvalidierung noch viel mehr zu tun, was den Rahmen dieses Tutorials sprengen würde, aber die Validierung ist wichtig, und es ist immer die beste Praxis, sich Mühe zu geben und zu testen, um sicherzustellen, dass es richtig gemacht wird.
Auf der Serverseite müssen wir die vom Browser gesendeten Daten übernehmen und die Nachricht an die Telefonnummer des Empfängers weiterleiten.
Fügen Sie die folgenden Routen zu Ihrer server.js Datei hinzu:
router.post('/webhooks/inbound-message', async (ctx, next) => {
ctx.status = 200;
});
router.post('/webhooks/message-status', async (ctx, next) => {
ctx.status = 200;
});
Dies soll sicherstellen, dass POST Anfragen von Nexmo die richtigen Endpunkte haben, an die sie gesendet werden und die 200 Antworten nach erfolgreicher Zustellung erhalten.
Wir fügen einen Nachrichten-Handler und eine forwardSMS() Funktion, die Nexmos Messages API nutzt, um eine SMS an den Empfänger zu senden, sobald die Daten vom Browser empfangen wurden.
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) }
}
)
}
Um zu testen, ob alles wie erwartet funktioniert, geben Sie die Rufnummer eines Mobiltelefons ein, zu dem Sie Zugang haben, und senden Sie eine Testnachricht. Ihr Zielempfänger sollte die SMS innerhalb weniger Sekunden erhalten.
Forward SMS
Wenn der Empfänger auf die SMS antwortet, wird die Nachricht an den Browser zurückgeschickt.
Reply
Nun, da das zugrunde liegende System funktioniert, gibt es einige Dinge, die Sie tun können, wenn Sie dieses Projekt fortsetzen wollen, wie z.B. die Schnittstelle zu verschönern, stärkere Validierungsprüfungen sowohl auf dem Client als auch auf dem Server hinzuzufügen, Randfälle zu behandeln, usw.
Meine Version dieses Projekts heißt V-mobile und Sie können es auf Glitch ausprobieren. Wenn es dir gefällt, kannst du mein Projekt gerne remixen und es zu deinem eigenen machen.
End result
Wenn Sie mehr mit diesen APIs machen wollen, finden Sie hier einige Links, die Ihnen helfen könnten:
Dokumentation für die Messages API auf dem Entwicklerportal
Reihe von Anleitungen für verschiedene Nexmo APIs
Wenn Sie uns brauchen, versuchen Sie den Nexmo Community Slack-Kanal
Lassen Sie uns wissen, was Sie denken, indem Sie tweeten unter @NexmoDev