Senden und Empfangen von SMS-Nachrichten mit Nuxt.js und der Nexmo SMS API

Vue.js ist eines der neuen progressiven JavaScript-Frameworks, die in der Frontend-Welt die Runde machen. Es ist eines der zugänglichsten, vielseitigsten und performantesten Frameworks, die es gibt, und hier bei Nexmo haben wir kürzlich unser Nexmo Entwickler Portal auf die Verwendung von Vue.js umgestellt.

Im Jahr 2018 haben wir das EMF Camp (em)powered mit Vue.js-Anwendungen in Verbindung mit den Nexmo Client SDKs.

Ich wollte das Vue.js Ökosystem etwas mehr erforschen, und bin auf Nuxt.js. Dabei bin ich auf Nuxt.js gestoßen. Es ist ein modulares Vue.js-Framework, das die Einrichtung einer Produktionsanwendung erleichtert. Mit Vue.js braucht man normalerweise eine Backend-Komponente, um den History-Modus in URLs zu handhaben, und Nuxt.js kümmert sich darum von Haus aus. Es fügt auch eine Abstraktionsschicht auf der URL hinzu, indem es Middleware von Haus aus bereitstellt. Middleware sind Methoden, die vor dem Routing-Code laufen und sowohl auf dem Vue.js-Code als auch auf dem Server arbeiten.

Daher dachte ich, dass dies ein hervorragender Ersatz für die Verarbeitung von API-Aufrufen auf dem Server wäre, anstatt eine zweite Backend-Anwendung einrichten zu müssen. In diesem Blog-Beitrag werde ich die Server-Middleware Nuxt.js verwenden, um SMS-Nachrichten zu senden und zu empfangen.

Für SMS werde ich die Nexmo SMS-APIdie es Ihnen ermöglicht, ein großes Volumen an SMS überall auf der Welt zu senden und zu empfangen. Sobald Sie Ihre virtuelle Telefonnummer haben, können Sie die API verwenden, um ausgehende Nachrichten ("Senden") und eingehende Nachrichten ("Empfangen") zu verwalten.

Hier ist ein Blick auf das, was wir bauen:

nexmo send sms vue

Den Code für dieses Tutorial finden Sie auf GitHub.

Voraussetzungen

Bevor Sie beginnen, vergewissern Sie sich, dass Sie alles haben:

• A Nexmo-Konto

• Node.js auf Ihrem Rechner installiert

• ngrok um den Code auf unserem lokalen Rechner für die Außenwelt zugänglich zu machen

• Die Beta-Version der Nexmo CLI: npm install -g nexmo-cli@beta

Erzeugen einer neuen Nuxt.js Anwendung

Um den Einstieg zu erleichtern, hat das Nuxt.js-Team ein CLI-Tool namens create-nuxt-appdas ein neues Projekt erstellt und Sie durch alle Module führt, die Sie in einer Nuxt.js-Anwendung einsetzen können. Ich habe dieses Tool verwendet, um ein neues Projekt mit dem Namen nexmo-nuxt-sms.

$ npx create-nuxt-app nexmo-nuxt-sms

Ich habe mich für npm als meinen Paketmanager gewählt. Ich habe ein nettes Tailwind CSS Komponente gefunden, mit der ich bauen wollte, also habe ich Tailwind als mein UI-Framework gewählt. Für ein benutzerdefiniertes Server-Framework habe ich mich für none entschieden, die Empfehlung von Nuxt.js. Für Module habe ich gewählt axios für HTTP-Anfragen und dotenv so kann ich eine .env Datei für meine Build-Variablen verwenden. Ich bin ein Fan von ESlintdaher habe ich es als Linting-Tool gewählt. Da ich für diesen Blogbeitrag keine Tests schreiben werde, habe ich mich entschieden, kein Test-Framework hinzuzufügen. Ich habe mich für Universal als Rendering-Modus gewählt, weil ich damit Server Side Rendering von Haus aus habe. Da mein bevorzugter Editor für Vue.js VS Code ist, habe ich mich für jsconfig.json als zusätzliches Entwicklungswerkzeug für den letzten Schritt des Gerüstprozesses gewählt.

Create a Nuxt.js App

Nachdem das Gerüst fertig war, habe ich das Verzeichnis zu meinem neuen Projekt gewechselt und das Projekt mit npm run dev. Das startet sowohl den Client- als auch den Serverprozess und macht sie verfügbar unter http://localhost:3000. Außerdem werden sie jedes Mal neu geladen, wenn ich eine Änderung vornehme, so dass ich sie live sehen kann, ohne die Prozesse neu starten zu müssen.

$ cd nexmo-nuxt-sms
$ npm run dev

Der Befehl generierte eine ganze Verzeichnisstruktur, die den Grundstein für Nuxt.js bildet. Im Stammverzeichnis befindet sich nuxt.config.jsdas ist die Konfigurationsdatei für Nuxt.js. Wir aktualisieren sie und fügen Folgendes hinzu serverMiddleware. Die Server-Middleware funktioniert durch die Angabe von Routen und zugehörigen JavaScript-Dateien, die beim Zugriff auf diese Routen ausgeführt werden. Wir werden zwei Routen erstellen, /api/send und /api/receiveum das Senden und Empfangen von SMS-Nachrichten über diese Routen abzuwickeln. Fügen Sie am unteren Ende eine Eigenschaft für serverMiddleware:

export default {
  ...
  },
  serverMiddleware: [
    { path: '/api/send', handler: '~/api/send-sms.js' },
    { path: '/api/receive', handler: '~/api/receive-sms.js' }
  ]
}

Versenden einer SMS-Nachricht

Wir haben Nuxt.js angewiesen, die ~/api/send-sms.js zu verwenden, wenn eine Anfrage an /api/send gemacht wird, aber wir haben die Datei noch nicht wirklich erstellt. Wir machen weiter und erstellen einen api Ordner und eine send-sms.js Datei darin.

$ mkdir api
$ touch send-sms.js

Um SMS-Nachrichten mit der Nexmo SMS API zu versenden, werden wir das nexmo Node.js SDK. Wir müssen es zuerst installieren:

$ npm install nexmo

Wir werden sie innerhalb der Datei verwenden und müssen sie anfordern und dann mit Ihrem Nexmo-API-Schlüssel und Geheimnis instanziieren. Du kannst sie in deinem Nexmo Dashboard. Aktualisieren Sie send-sms.js damit es so aussieht:

require('dotenv').config()
const Nexmo = require('nexmo')

const nexmo = new Nexmo({
  apiKey: process.env.NEXMO_API_KEY,
  apiSecret: process.env.NEXMO_API_SECRET
})

export default function (req, res) {
  console.log(req.method, req.url)
}

Wir verwenden dotenv hier, um den API-Schlüssel und das Geheimnis aus der .env Datei, anstatt sie direkt in den Code einzufügen. Wir müssen also die .env Datei in der Wurzel des generierten Projekts mit den Werten für NEXMO_API_KEY und NEXMO_API_SECRET.

NEXMO_API_KEY=aabbcc0
NEXMO_API_SECRET=s3cRet$tuff

Die Datei exportiert eine Standardfunktion, die die standardmäßigen Node.js-Objekte request und response enthält. Da sie bereits vorhanden sind und ich nicht die zusätzliche Abhängigkeit von expressnicht hinzufügen wollte, werden wir sie verwenden, um einen klassischen Node.js-HTTP-Server zu erstellen. Aktualisieren wir die export in der Datei send-sms.js Datei so, dass sie wie folgt aussieht:

export default function (req, res, next) {
  console.log(req.method, req.url)
  if (req.method === 'GET') {
    const url = new URL(req.url, `http://${req.headers.host}`)

    nexmo.message.sendSms(
      process.env.FROM_NUMBER,
      url.searchParams.get('number'),
      url.searchParams.get('text'),
      (err, responseData) => {
        let message

        if (err) {
          message = JSON.stringify(err)
        } else if (responseData.messages[0].status === '0') {
          message = 'Message sent successfully.'
        } else {
          message = `Message failed with error: ${responseData.messages[0]['error-text']}`
        }

        res
          .writeHead(200, {
            'Content-Length': Buffer.byteLength(message),
            'Content-Type': 'text/plain'
          })
          .end(message)
      }
    )
  } else {
    res.statusCode = 200
    res.end()
  }
}

Ich überprüfe, ob es sich bei der Anfrage um eine GET Anfrage ist und verwende dann die "SMS senden" um eine SMS zu senden. Die nexmo.message.sendSms Methode nimmt eine from, to und text Parameter, um den Empfänger, den Absender und den Inhalt der SMS-Nachricht zu bestimmen. Sie nimmt auch eine callback Methode, die ausgeführt wird, sobald der API-Aufruf abgeschlossen ist. Ich nehme den from Parameter aus der .env Datei, und das wird eine Nexmo-Telefonnummer sein. Die to und text Parameter stammen aus den Abfrageparametern der eingehenden HTTP-Anfrage.

Meine callback Funktion ist eine anonyme Funktion, und ich überprüfe zunächst, ob bei der Anfrage ein Fehler aufgetreten ist. Wenn ein Fehler aufgetreten ist, wandle ich das Fehlerobjekt in einen String um und gebe diesen an die Antwortnachricht weiter. Wenn es keinen Fehler gab, schaue ich mir den Nachrichtenstatus in den Antwortdaten an. Ein Status von 0 bedeutet, dass die SMS erfolgreich gesendet wurde, also aktualisiere ich die Antwortnachricht. Wenn der Status nicht 0ist, bedeutet dies, dass ein Fehler bei der Übertragung der SMS-Nachricht von der Nexmo-API über das Netz des Telekommunikationsanbieters an ein Telefon aufgetreten ist. Ich werde die Nachricht mit dem entsprechenden Fehlertext aktualisieren.

Da dies ein Node.js-Server ist, muss ich den Request-Header explizit mit einem 200 Status, den Content-Length und Content-Type der Nachricht, bevor ich die Nachricht auf die Anfrage senden kann.

Es gibt auch einen Fallback für alle Nicht-GET-Anfragen, der eine leere 200 OK Antwort zurück.

Eine Nexmo-Nummer kaufen

Sie haben wahrscheinlich bemerkt, dass ich process.env.FROM_NUMBER als Absenderkennung verwendet habe, und das bedeutet, dass Nuxt.js in der .env Datei suchen. Bevor wir sie dort hinzufügen können, müssen wir eine SMS-fähige Telefonnummer im Nexmo Dashboard.

Wir könnten auch eine Nummer über die Nexmo-CLI kaufen, und genau das werde ich jetzt tun. Falls Sie die Nexmo CLI noch nicht verwendet haben, müssen Sie sie mit Ihrem Nexmo API-Schlüssel und Geheimnis einrichten, bevor wir sie verwenden können.

$ nexmo setup NEXMO_API_KEY NEXMO_API_SECRET

Wir verwenden den Befehl number:search um nach einer verfügbaren Nummer zu suchen, bevor wir sie kaufen. Der Befehl akzeptiert eine zweistellige Landesvorwahl als Eingabe (ich habe GB für britische Nummern), und wir können ein paar Flags angeben, um die Liste der verfügbaren Telefonnummern einzuschränken. Ich verwende --sms um SMS-fähige Nummern zu markieren, --size=5 um die Größe der zurückgegebenen Liste zu begrenzen, und --verbose um eine hübsch formatierte Tabelle mit zusätzlichen Informationen über die verfügbaren Telefonnummern zurückzugeben.

$ nexmo number:search GB --sms --size=5 --verbose

Die Antwort, die ich erhielt, sah in etwa so aus:

Item 1-5 of 7633

msisdn       | country | cost | type       | features
------------------------------------------------------
447451272708 | GB      | 1.25 | mobile-lvn | VOICE,SMS
447451272710 | GB      | 1.25 | mobile-lvn | VOICE,SMS
447451272713 | GB      | 1.25 | mobile-lvn | VOICE,SMS
447451272714 | GB      | 1.25 | mobile-lvn | VOICE,SMS
447451272719 | GB      | 1.25 | mobile-lvn | VOICE,SMS

Ich habe die erste Nummer in der Antwort ausgewählt, also kaufen wir diese Nummer auf der Nexmo-Plattform.

$ nexmo number:buy 447451272708 --confirm

Da Sie nun die Telefonnummer besitzen, fügen wir sie der Datei .env Datei hinzu.

NEXMO_API_KEY=aabbcc0
NEXMO_API_SECRET=s3cRet$tuff
FROM_NUMBER=447451272708

Wir können den von uns erstellten Endpunkt testen und sicherstellen, dass er funktioniert. Da es sich um eine GET Anfrage ist, brauchen wir kein zusätzliches Tool wie Postman, wir können die URL direkt im Browser verwenden. Wenn Sie eine URL mit einer Abfrage wie http://localhost:3000/api/send?text=hello&number=YOUR_PHONE_NUMBERund ersetzen Sie YOUR_PHONE_NUMBER durch Ihre Handynummer ersetzen, sollten Sie eine SMS mit dem Text hello auf Ihrem Telefon erhalten.

Send SMS

Empfangen einer SMS-Nachricht

Wenn eine Nexmo-Telefonnummer eine SMS-Nachricht erhält, leitet Nexmo diese Nachricht an einen Webhook weiter, den Sie im Nexmo-Dashboard festgelegt haben. Wir müssen den /api/receive Endpunkt erstellen, ihn über ngrok für Nexmo öffentlich zugänglich machen und ihn dann im Nexmo Dashboard verlinken.

Wir haben bereits den /api/receive Endpunkt bei der Nuxt.js Server-Middleware registriert, erstellen wir nun die Datei, um ihn zu verarbeiten. Innerhalb des api Verzeichnis, erstellen Sie eine receive-sms.js Datei.

$ cd api
$ touch receive-sms.js

Die Datei funktioniert ähnlich wie die send-sms.js Datei, die wir zuvor erstellt haben, sie hat die gleiche export default function Syntax und empfängt ein Node.js-Anfrage- und Antwortobjekt. Lassen Sie uns fortfahren und die receive-sms.js Datei mit einem POST-Request-Handler aus, der den Request-Body aus Chunks zusammensetzt und ihn dann in die Konsole protokolliert.

export default function (req, res) {
  console.log(req.method, req.url)
  if (req.method === 'POST') {
    const body = []
    req.on('data', (chunk) => {
      body.push(chunk)
    })
    req.on('end', () => {
      const sms = JSON.parse(body)
      console.log(sms)
    })
  }

  res.statusCode = 200
  res.end()
}

Ich überprüfe, ob es sich bei der eingehenden Anfrage um eine POST Anfrage ist, und höre dann die Anfragedatenbrocken ab und füge sie einem body Array. Wenn die Anforderung endet, ich bin Parsing die body in JSON und protokolliere es auf der Konsole. Das werden die SMS-Daten sein, die von Nexmo kommen. Nexmo erwartet einen 200 OK Status auf die Anfrage, also antworte ich mit diesem.

Unser Webhook-Endpunkt ist jetzt auf localhost live, aber wir müssen ihn dem Internet aussetzen, damit Nexmo darauf zugreifen kann. Wir werden ngrok verwenden, um das zu tun.

Ngrok ausführen

Wenn Sie ngrok noch nicht verwendet haben, finden Sie in einem Blog-Beitrag der erklärt, wie man es benutzt. Wenn Sie mit ngrok vertraut sind, führen Sie es mit http auf dem Port 3000.

$ ngrok http 3000

Nachdem ngrok ausgeführt wurde, erhalten Sie eine zufällig aussehende URL, die wir später als Basis für unseren Webhook verwenden werden. Meine sieht so aus: http://3dea3250.ngrok.io.

Verknüpfen Sie den Webhook mit Nexmo

Um die Webhook-URL einzurichten, klicken Sie auf das kleine Zahnradsymbol neben Ihren Telefonnummern im Nexmo Dashboard und füllen Sie das Feld "Inbound Webhook URL" mit YOUR_NGROK_URL/api/receive.

Oder wir können die Nexmo CLI verwenden, um die Nexmo-Telefonnummer, die Sie zuvor gekauft haben, mit der Webhook-URL von ngrok zu verknüpfen:

nexmo link:sms 447451272708 http://YOUR_NGROK_URL.ngrok.io/api/receive

Sie können nun eine SMS-Nachricht von Ihrem Telefon an Ihre Nexmo-Telefonnummer senden, die in dem Terminal, in dem Ihre Nuxt.js-Anwendung läuft, protokolliert werden sollte.

Received SMS message with Nexmo

Erstellen einer Vue.js UI

Wir haben die Serverfunktionalität zum Senden und Empfangen von SMS-Nachrichten erstellt, nun ist es an der Zeit, eine Benutzeroberfläche für die Interaktion mit dieser Funktionalität über den Browser zu erstellen.

Bereinigen wir zunächst die bestehende Benutzeroberfläche, die Nuxt.js für uns erstellt hat. Ersetzen Sie den Inhalt der /layouts/default.vue Datei durch:

<template>
  <div>
    <nuxt />
  </div>
</template>

<style>
html {
  background-color: #4299e1;
}
</style>

Ich verwende eine Mac-Terminal-Vorlage von tailwindcomponents.comalso machen wir weiter und ersetzen den Inhalt des <template> Tags in der Datei /pages/index.vue Datei durch die neue Benutzeroberfläche:

<template>
  <div class="w-1/2 mx-auto py-20">
    <div class="w-full shadow-2xl subpixel-antialiased rounded h-64 bg-black border-black mx-auto">
      <div
        id="headerTerminal"
        class="flex items-center h-6 rounded-t bg-gray-100 border-b border-gray-500 text-center text-black"
      >
        <div
          id="closebtn"
          class="flex ml-2 items-center text-center border-red-900 bg-red-500 shadow-inner rounded-full w-3 h-3"
        />
        <div
          id="minbtn"
          class="ml-2 border-yellow-900 bg-yellow-500 shadow-inner rounded-full w-3 h-3"
        />
        <div
          id="maxbtn"
          class="ml-2 border-green-900 bg-green-500 shadow-inner rounded-full w-3 h-3"
        />
        <div id="terminaltitle" class="mx-auto pr-16">
          <p class="text-center text-sm">
            <logo />Terminal
            <logo />
          </p>
        </div>
      </div>
      <div id="console" class="pl-1 pt-1 h-auto text-green-500 font-mono text-xs bg-black">
        <p class="pb-1">
          Last login: {{ new Date().toUTCString() }} on ttys002
        </p>
        <p v-for="counter in counters" :key="counter.id" class="pb-1">
          <span class="text-red-600">@lakatos88</span>
          <span class="text-yellow-600 mx-1">></span>
          <span class="text-blue-600">~/nexmo/nexmo-nuxt-sms</span>
          <span class="text-red-600 mx-1">$</span>
          <span v-if="!counter.message" class="blink" contenteditable="true" @click.once="stopBlinking" @keydown.enter.once="runCommand">_</span>
          <span v-if="counter.message">{{ counter.message }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

Ich habe die Vorlage geringfügig geändert, um die Farben an meine Terminaleinrichtung anzupassen und die Benutzerinformationen zu aktualisieren, damit sie auch zu meinem Terminal passen.

Die Bearbeitungen, die ich vorgenommen habe, finden in dem console div, also sehen wir uns das mal an. Ich verwende {{ new Date().toUTCString() }} um das aktuelle Datum abzurufen und auf dem Bildschirm anzuzeigen.

Ich verwende dann die Vue.js v-for Direktive, um eine Schleife durch ein counters Array zu durchlaufen und für jeden Eintrag des Zähler-Arrays entweder einen blinkenden Unterstrich oder eine Meldung im Terminalfenster anzuzeigen. Der blinkende Unterstrich ist mit einem Contenteditable-Flag versehen, was bedeutet, dass man den Inhalt im Browser bearbeiten kann. Ich verwende die @click Anweisung, um eine JavaScript stopBlinking Funktion auszuführen, wenn ein Benutzer das erste Mal darauf klickt, und das Blinken zu beenden. Der gleiche HTML-Tag hat auch eine @keydown.enter Direktive, um eine Funktion auszuführen runCommand Funktion auszuführen, wenn der Benutzer das erste Mal die Eingabetaste drückt, wodurch der Befehl effektiv an das Terminal gesendet wird.

Wir müssen das anfängliche counters Array in der Vue.js-Datenstruktur erstellen, und die Methoden für stopBlinking und runCommand. Ersetzen wir das <script> Tag in der gleichen Datei mit:

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  },
  data () {
    return {
      counters: [{ id: 0 }]
    }
  },
  mounted () {
  },
  methods: {
    stopBlinking (event) {
      event.target.classList.remove('blink')
      event.target.textContent = '\u00A0'
    },
    async runCommand (event) {
      const splitCommand = event.target.textContent.trim().split(' ')
      event.target.contentEditable = false
      if (splitCommand.length > 3 && splitCommand[0] === 'nexmo' && splitCommand[1] === 'sms') {
        const sms = await this.$axios.$get(`/api/send?text=${splitCommand.slice(3).join(' ')}&number=${splitCommand[2]}`)
        this.counters.push({ id: this.counters.length, message: sms })
      } else {
        this.counters.push({ id: this.counters.length, message: `Unrecognized command "${splitCommand[0]}".` })
      }
      this.counters.push({ id: this.counters.length })
    }
  }
}
</script>

Die Methode runCommand Methode ist asynchron und verhindert, dass das HTML-Element contentEditable. Außerdem teilt sie den Befehl aus dem Terminal in 4 Teile auf: den Befehlsnamen, das Argument, die Telefonnummer und die Textnachricht. Die Methode prüft, ob der Befehl aus mehr als 3 Teilen besteht und ob der erste Teil nexmo und der zweite Teil sms. Wenn dies der Fall ist, wird eine HTTP GET Anfrage mit axios an den /api/send Endpunkt, den wir zuvor erstellt haben, und übergibt dabei den Text und die Nummer des Befehls. Anschließend wird die zurückerhaltene Nachricht zur Anzeige auf der Benutzeroberfläche verwendet.

Wenn der Befehl nicht nexmo sms number textist, wird in der Benutzeroberfläche ein allgemeiner Fehler angezeigt. Danach wird eine neue Zeile mit einem blinkenden Unterstrich in die Benutzeroberfläche eingefügt, die auf den nächsten Befehl wartet.

Ich habe auch den Inhalt des <style> Tags ersetzt, um die Nuxt.js-Logos am oberen Rand des Terminalfensters zu positionieren und die blinkende Animation für den Unterstrich zu erstellen.

<style>
.NuxtLogo {
  width: 10px;
  height: 10px;
  position: relative;
  margin: 0 10px;
  bottom: 2px;
  display: inline-block;
}

.blink {
  animation-duration: 1s;
  animation-name: blink;
  animation-iteration-count: infinite;
}

@keyframes blink {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
</style>

Dies gibt Ihnen die Möglichkeit, SMS-Nachrichten aus der Vue.js UI zu senden, aber es erlaubt noch nicht den Empfang von SMS-Nachrichten. Da der Webhook für den SMS-Empfang von Nexmo ausgelöst wird, können wir vom UI-Code nicht wissen, wann eine neue SMS vorliegt, um sie anzufordern. Wir müssen eine Art von Polling-Mechanismus hinzufügen.

WebSockets hinzufügen

Ich bin kein Fan von langem Polling, also habe ich stattdessen beschlossen, ein WebSocket-Client/Server-Paar dafür zu bauen. Für den Server verwende ich das ws npm-Paketalso müssen wir es installieren:

$ npm install ws

Um den WebSocket-Server zu erstellen, bearbeiten wir die Datei /api/receive-sms.js Datei, um einen WebSocket-Server am Anfang der Datei zu erstellen. Ich ersetze auch den Teil, der die SMS auf der Konsole protokolliert, um sie stattdessen über den WebSocket zu senden.

const WebSocket = require('ws')
let websocket = {}
const wss = new WebSocket.Server({ port: 3001 })
wss.on('connection', (ws) => {
  websocket = ws
})

export default function (req, res, next) {
  console.log(req.method, req.url)
  if (req.method === 'POST') {
    const body = []
    req.on('data', (chunk) => {
      body.push(chunk)
    })
    req.on('end', () => {
      const sms = JSON.parse(body)
      websocket.send(`Message from ${sms.msisdn}: ${sms.text}`)
    })
  }

  res.statusCode = 200
  res.end()
}

Der Server startet auf Port 3001und sendet die SMS-Nachricht, sobald er mit dem Aufbau der Anfrage fertig ist. Wir müssen der Benutzeroberfläche auch einen WebSocket-Client hinzufügen, um die Nachricht zu empfangen und sie auf der Benutzeroberfläche anzuzeigen. Aktualisieren wir die /pages/index.vue Datei, insbesondere die mounted() Methode, um einen WebSocket-Client zu erstellen, sobald die Vue.js-Komponente fertig montiert ist.

mounted () {
  console.log(process.env.WS_URL)
  const ws = new WebSocket(process.env.WS_URL)

  ws.onmessage = (event) => {
    this.counters[this.counters.length - 1].message = event.data
    this.counters.push({ id: this.counters.length })
  }
},

Der WebSocket-Client verbindet sich mit dem process.env.WS_URLund setzt einen Listener für Nachrichten. Wenn eine neue Nachricht über den WebSocket eingeht, wird der letzte Befehl auf dem Bildschirm mit den vom Server empfangenen Ereignisdaten, d. h. der SMS-Nachricht, aktualisiert. Außerdem wird eine neue Zeile in der Benutzeroberfläche mit einem blinkenden Unterstrich hinzugefügt.

Wie Sie bemerkt haben, verwenden wir die process.env.WS_URLverwenden, also müssen wir es zu unserer .env Datei hinzufügen.

WS_URL=ws://localhost:3001

Da die Vue.js-Benutzeroberfläche von der Umgebungsdatei wissen muss, müssen wir einen Eintrag in der Nuxt.js-Konfigurationsdatei hinzufügen, nuxt.config.js.

env: {
    wsUrl: process.env.WS_URL || 'ws://localhost:3001'
},

Probieren Sie es aus

Sie können die Seite http://localhost:3000/ in Ihrem Browser, klicken Sie auf den blinkenden Unterstrich und geben Sie nexmo sms YOUR_PHONE_NUMBER hello. Nachdem Sie die Eingabetaste auf der Tastatur gedrückt haben, sollte die SMS an Ihr Telefon übermittelt werden. Wenn Sie auf diese SMS antworten, können Sie sie auch in Ihrem Browser sehen.

Send and Received SMS message with Nuxt.js and Nexmo

Ich hoffe, es hat funktioniert und Sie haben gerade gelernt, wie man mit den Nexmo APIs und Nuxt.js SMS-Nachrichten sendet und empfängt.