Share:
){kind=small}
Ehemaliger .NET Developer Advocate @Vonage, polyglotter Software-Ingenieur, AI/ML
Empfangen einer SMS-Nachricht mit ASP.NET Core MVC und SignalR
Lesedauer: 9 Minuten
In diesem Tutorial lernen wir, wie man SMS-Nachrichten von der Vonage-Nachrichten-APIempfängt und in Echtzeit an einen Browser sendet. Wir werden ASP.NET Core MVC für unseren API-Server und unsere Webseite verwenden, und wir werden SignalR verwenden, um SMS-Nachrichten in Echtzeit empfangen zu können.
Wenn Sie nur den Code dieser Demo verwenden möchten, finden Sie ihn in GitHub.
Sie benötigen ein Vonage API-Konto
Sie benötigen die neueste Version des .NET Core 3.1 SDK
Sie benötigen entweder Visual Studio 2019, Visual Studio für Mac oder Visual Studio Code, ich werde Visual Studio 2019 für diese Demo verwenden.
Optional: Ich habe Ngrok um diese Demo zu testen
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.
Öffnen Sie Visual Studio und klicken Sie auf "Neues Projekt erstellen", wählen Sie "ASP.NET Core Web Application" und klicken Sie auf "Weiter". Geben Sie Ihrer Anwendung einen Namen. Ich werde meiner Anwendung den Namen "ReceiveSmsAspNetCoreMvc" geben und dann auf "Erstellen" klicken. Wählen Sie auf der nächsten Seite "Webanwendung (Model-View-Controller)" und klicken Sie auf "Erstellen".
Da wir SignalR verwenden, gibt es zwei Arten von Abhängigkeiten, die wir hinzufügen müssen. Zunächst müssen wir unsere NuGet-Paketabhängigkeiten hinzufügen, und dann müssen wir unsere Client-Paketabhängigkeiten hinzufügen.
Wir müssen zwei NuGet-Pakete installieren:
Es gibt mehrere Möglichkeiten, dies zu tun; ich werde nur die dotnet CLI verwenden. Navigieren Sie zum Projektverzeichnis für Ihr Projekt und führen Sie einfach aus:
Da wir von der SignalR-Client-Side-Bibliothek abhängig sind, müssen wir auch die SignalR-Client-Side-Bibliothek hinzufügen.
Klicken Sie in Visual Studio mit der rechten Maustaste auf Ihre Projekte wwwrooot gehen Sie zu Add > Client-Side Library. Daraufhin wird ein kleines Dialogfeld angezeigt, das Sie beim Hinzufügen der Bibliothek unterstützt. Für diese Demo habe ich die folgende Bibliothek verwendet.
Anbieter: unpkg
Bibliothek: @microsoft/signalr@latest
Bestimmte Dateien auswählen: Ich habe nur ausgewählt
Files/dist/browser/signalr.jsundFiles/dist/browser/signalr.min.jsZielspeicherort: wwwroot/js/signalr
Nachdem Sie das Formular ausgefüllt haben, sieht es ungefähr so aus:
Adding a Client Side library in Visual Studio
Nachdem Sie dieses Formular ausgefüllt haben, können Sie auf Installieren klicken, und die erforderlichen Dateien werden unter wwwroot/js/signalr
Die Funktionsweise von SignalR besteht darin, dass sich Client-Browser mit so genannten Hubs verbinden. Hubs pushen Nachrichten vom Server zu jedem ihrer Clients über jeden verfügbaren Mechanismus, den sie haben. Typischerweise ist dies ein WebSocket, kann aber auch über Server-Side-Events (SSE) oder Long-Polling erfolgen. Wir müssen einen Hub in unserem Server erstellen, um unseren Server mit unseren Browser-Clients zu verbinden.
Erstellen Sie einen neuen Ordner unter Ihrem Projekt mit dem Namen Hubs. Erstellen Sie in diesem Ordner eine neue C#-Datei SmsHub.cs. Diese Datei muss nicht viel tun. Sie wird lediglich eine Klasse deklarieren, die die Hub-Klasse erweitert. Die Datei sollte wie die folgende aussehen.
using Microsoft.AspNetCore.SignalR;
namespace ReceiveSmsAspNetCoreMvc.Hubs
{
public class SmsHub : Hub
{
}
}
Jetzt müssen wir in unserer startup.cs Datei gehen und die SignalR-Endpunkte zu unserer Middleware hinzufügen. Durch das Hinzufügen der Middleware wird die SMS-Hub-Route aktiviert und wir können SignalR in unseren Browser-Clients verwenden. Öffnen wir startup.cs und finden Sie den Weg zu der ConfigureServices Methode. Fügen Sie die Zeile services.AddSignalR(); zu dieser Methode hinzu, die die SignalR-Middleware zu unserem Server hinzufügen wird. Nach der Fertigstellung wird unsere ConfigureServices Methode wie folgt aussehen:
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddSignalR();
}
Bleiben Sie in startup.cs und finden Sie die Configure Methode. Diese Methode enthält einen Aufruf an app.UseEndpointsenthalten, der eine Funktion als Argument annimmt. Innerhalb dieser Funktion werden wir den SmsHub auf den Pfad /smsHub. Nach Beendigung des app.UseEndpoints Aufruf wie folgt aussehen:
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<SmsHub>("/smsHub");
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
Nun, da wir die Middleware sortiert haben, müssen wir die Methode hinzufügen, die die SMS von Vonage empfängt. Zu diesem Zweck wird ein leerer MVC-Controller verwendet. Klicken Sie mit der rechten Maustaste auf den Ordner "Controllers" und gehen Sie zu "Add -> Controller", wählen Sie "MVC Controller - Empty" und klicken Sie auf "Add", benennen Sie diesen SmsController und klicken Sie erneut auf "Hinzufügen".
Das erste, was wir in unserem System tun müssen, ist SmsController injiziert die HubContext für die SmsHub. Deklarieren Sie eine IHubContext Eigenschaft namens HubContextund deklarieren Sie dann einen SmsController Konstruktor, der einen IHubContext als Argument annimmt, und weisen Sie diesen Parameter der HubContext Eigenschaft zu. Durch die Magie der Dependency Injection erhält der Controller bei der Erstellung den Hub-Kontext.
/// <summary>
/// Allows access to all browser clients subscribed through the /smsHub
/// </summary>
public IHubContext<SmsHub> HubContext { get; set; }
public SmsController(IHubContext<SmsHub> hub)
{
HubContext = hub;
}
Da wir nun Zugriff auf den Hub-Kontext haben, müssen wir eine API-Route für die eingehende SMS hinzufügen. Diese Route wird die Route sein, die Vonage verwendet, um einen Webhook an unsere Anwendung zu senden. Diese Methode nimmt die Anfrage entgegen, parst ein InboundSms-Objekt daraus und sendet ein InboundSms Signal an alle Clients, die mit dem Hub verbunden sind. Diese Methode gibt dann die MSISDN und den Text der Nachricht an den Benutzer weiter. Als Referenz ist die MSISDN die Nummer, von der die Nachricht stammt. Fügen Sie Folgendes zu Ihrer SmsController.
[HttpPost("webhooks/inbound-sms")]
public async Task<IActionResult> InboundSms()
{
using (var reader = new StreamReader(Request.Body))
{
var json = await reader.ReadToEndAsync();
var inbound = JsonConvert.DeserializeObject<InboundSms>(json);
await HubContext.Clients.All.SendAsync("InboundSms", inbound.Msisdn, inbound.Text);
}
return NoContent();
}
Nachdem das erledigt ist, müssen wir unserer App nur noch ein Frontend hinzufügen. Zu diesem Zweck übernehmen wir einfach die Home-Ansicht. Öffnen Sie /Vies/Home/Index.cshtml und entfernen Sie das Div, das den Begrüßungstext enthält, den brauchen wir nicht.
Als Nächstes fügen wir ein paar Skriptimporte hinzu. Wir importieren ~/js/sms.js (das wir gleich erstellen werden) und ~/js/signalr/dist/browser/signalr.js das ist die Client-Bibliothek, die wir zuvor importiert haben. Fügen Sie einfach diese beiden Tags hinzu, und schon sind wir startklar.
<a href="http://~/js/signalr/dist/browser/signalr.js">http://~/js/signalr/dist/browser/signalr.js</a>
<a href="http://~/js/sms.js">http://~/js/sms.js</a>Als Letztes müssen wir hier die Tabelle hinzufügen, in der wir die Nachrichten anzeigen werden. Wir geben ihr einfach zwei Spalten, From Number und Message - diese entsprechen dem Msisdn und die Text aus unseren eingehenden SMS-Nachrichten entsprechen.
<h1>Messages</h1>
<table class="table" id="messageList">
<thead>
<tr>
<th>From Number</th>
<th>Message</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Als Letztes müssen wir noch einen Event-Handler für unser InboundSms Ereignis. Das tun wir in der sms.js Datei, auf die wir gerade verwiesen haben. Machen Sie weiter und fügen Sie eine sms.js Datei in das /wwwroot/js Verzeichnis hinzu. Es gibt drei Dinge, die wir in dieser Datei tun müssen.
Aufbau der SignalR-Verbindung zum smsHub
Registrieren Sie einen Ereignishandler für
InboundSmsder eine neue Zeile zu unserer Nachrichtenliste hinzufügtStarten Sie die SignalR-Verbindung.
Wir können alle drei Punkte erreichen, indem wir folgendes in die sms.js Datei hinzufügen.
"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/smsHub").build();
connection.on("InboundSms", function (fromNumber, text) {
var rowHtml =
'<tr><td>' +
fromNumber +
'</td><td>' +
text +
'</td></tr>';
$('#messageList tbody').append(rowHtml);
});
connection.start()
.then(function () {
console.log("connection started");
})
.catch(function (err) {
console.log("Error encountered: " + err);
})
Aus der Entwicklungsperspektive war das alles, was wir tun mussten, also gehen wir zum Testen über. Wir werden dies mit Ngrok testen, um diese Demo zu testen. Mit Ngrok können wir einen öffentlich zugänglichen Tunnel zu unserer Anwendung aufbauen, was nützlich ist, wenn wir öffentlich zugängliche HTTP-Endpunkte für unsere Anwendungen bereitstellen müssen. Wenn Sie dies wie ich mit IIS Express testen wollen, sollten Sie sich unseren Erklärungen zu diesem Thema da es hier besondere Überlegungen gibt. Es geht darum, dass wir eine --host-header Option hinzufügen müssen, wenn wir ngrok starten.
Klicken Sie in Visual Studio mit der rechten Maustaste auf Ihre csproj-Datei und gehen Sie zu Eigenschaften. Klicken Sie dort auf die Registerkarte Debug. Der Einfachheit halber werden wir beim Testen das Kontrollkästchen SSL aktivieren deaktivieren. Notieren Sie sich die URL der Anwendung und die Portnummer am Ende der URL.
The IIS configuration screen
Als nächstes starten wir ngrok. Wir werden eingehende Anfragen auf den Port unserer App-URL verweisen, und wir werden den Host und den Port den eingehenden Host-Header ersetzen lassen. Starten Sie ngrok, indem Sie den folgenden Befehl in einem neuen Terminal ausführen (ersetzen Sie die Portnummer durch Ihren Port).
Dieser Befehl wird dazu führen, dass Ihr Terminal von ngrok übernommen wird. Es wird Ihnen eine URL angezeigt, die Anfragen an Ihren lokalen Server weiterleitet. Diese URL ist in der Form http://randomhash.ngrok.io. Mein zufälliger Hash ergab d98024d97b04Für den Rest dieser Erklärung ersetzen Sie diesen Wert einfach durch den Wert, den Sie für sich selbst ermittelt haben.
Running Ngrok to give local access to our application
Nachdem ich meine Anwendung in IIS Express gestartet habe, kann ich zu meiner ngrok-URL navigieren, um sicherzustellen, dass sie öffentlich zugänglich ist.
Wenn Sie sich erinnern, haben wir unsere InboundSms Methode in unserer SmsController mit [HttpPost("webhooks/inbound-sms")] Dies erstellt eine Route für mich zu http://d98024d97b04.ngrok.io/webhooks/inbound-sms um den Anruf an inbound-sms zu tätigen. Das letzte, was ich tun muss, bevor ich loslege und teste, ist, Vonage mitzuteilen, wohin meine SMS-Nachrichten an die gerade erwähnte URL gesendet werden sollen.
Navigieren Sie dazu zu ${CUSTOMER_DASHBOARD_URL}/settings. Setzen Sie unter Standard-SMS-Einstellungen das Feld Eingehende Nachrichten auf diese URL, und ändern Sie die HTTP-Methode auf POST-JSON. Klicken Sie auf Änderungen speichern, und schon kann es losgehen. Navigieren Sie zu Ihrer Homepage und senden Sie Ihrer virtuellen Vonage-API-Nummer eine Testnachricht. Wenn Sie sich nicht sicher sind, was Ihre Virtuelle Nummer von Vonage ist, finden Sie sie in Ihrem Dashboard unter Nummern. Nachdem Sie eine Nachricht an den Server gesendet haben, können Sie auf der mit der App verbundenen Webseite sehen, wie die SMS-Nachrichten in Echtzeit auf Ihrem Server eingehen.
Incoming SMS messages being displayed on the screen in the application we built
Und das ist alles, was wir tun müssen, um Nachrichten zu empfangen und sie in Echtzeit anzuzeigen!
Der gesamte Code für diese Demo findet sich auf GitHub
