Teilen Sie:
){kind=small}
Ehemaliger .NET Developer Advocate @Vonage, polyglotter Software-Ingenieur, AI/ML
Wie man mit Blazor und SignalR eine SMS empfängt
Wenn es um die Verwaltung von SMS-Nachrichten mit der Vonage Messaging APIgeht, ist der Empfang eingehender SMS-Nachrichten von entscheidender Bedeutung. In diesem Tutorial werden wir den Empfang von SMS-Nachrichten in unserer Anwendung und deren Weiterleitung an unser Frontend in Echtzeit mit Blazor und SignalR-Kern.
Wenn Sie direkt zum Code springen wollen, besuchen Sie einfach das Repository dieser Demo in GitHub.
Sie benötigen einen Vonage API Account
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 VS Code für diese Demo verwenden.
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.
Navigieren Sie zu einem Verzeichnis, in dem Sie den Projektordner ablegen möchten, und führen Sie den folgenden Befehl in Ihrem Terminal aus.
Wenn das erledigt ist, cd in den Ordner ReceiveSmsBlazor Ordner, den wir erstellt haben, und führen Sie code . um VS Code zu starten. Alternativ dazu können Sie die Datei ReceiveSmsBlazor.csproj Datei in Visual Studio öffnen.
Es gibt zwei NuGet-Pakete, die wir für diese Demo benötigen.
Gehen Sie zurück zu Ihrer Konsole und führen Sie das Programm aus:
SignalR verteilt alle Nachrichten über zentrale "Hubs": Ein Hub benachrichtigt alle mit ihm verbundenen Clients, wenn ein bestimmtes Ereignis eintritt; in diesem Fall handelt es sich bei den Ereignissen, die wir empfangen werden, um eingehende SMS-Nachrichten.
Erstellen Sie einen Ordner namens Hubs. Erstellen Sie in diesem Ordner eine Datei namens SmsHub.cs und importieren Sie signalR mit using Microsoft.AspNetCore.SignalR; darin. Erstellen Sie dann eine SmsHub-Klasse innerhalb des ReceiveSmsBlazor.Hubs Namespace wie folgt:
namespace ReceiveSmsBlazor.Hubs
{
public class SmsHub : Hub
{
}
}Sie müssen hier keinen Code hinzufügen; wir werden dies von außerhalb dieser Klasse steuern, es muss nur hier sein, damit wir mit allen Clients des Hubs sprechen können.
Wir werden einen API-Controller erstellen müssen. Mit diesem Controller werden wir unsere eingehenden SMS-Webhooks von Vonage empfangen.
Erstellen Sie einen neuen Ordner auf der obersten Ebene unseres Projekts mit dem Namen Controllersund fügen Sie eine neue Datei SmsController.cs zu diesem Ordner hinzu.
Öffnen Sie SmsController.cs und fügen Sie die folgenden using-Anweisungen hinzu.
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;
using Newtonsoft.Json;
using Vonage.Messaging;
using System.IO;
using System.Threading.Tasks;
using ReceiveSmsBlazor.Hubs;Als nächstes erstellen Sie eine SmsController Klasse in dem ReceiveSmsBlazor.Controllers Namespace, der Controller und annotieren Sie sie mit einer Route an api/[controller] und einem ApiController Attribut wie folgt:
namespace ReceiveSmsBlazor.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class SmsController : Controller
{
}
}
Um auf den SmsHub zuzugreifen, müssen wir den Kontext der Abhängigkeit injizieren. Erstellen Sie eine IHubContext Eigenschaft namens HubContext in Ihrer SmsController Klasse, fügen Sie dann einen Konstruktor hinzu, der ein IHubContex als Argument nimmt, und weisen Sie unsere HubContext Eigenschaft diesen Wert zu.
IHubContext<SmsHub> HubContext { get; set; }
public SmsController(IHubContext<SmsHub> hubContext)
{
HubContext = hubContext;
}
Nun, da wir unseren Hub zur Verfügung haben, müssen wir nur noch eine Methode hinzufügen, um die eingehende SMS zu verarbeiten und an unseren Kunden zu senden.
Fügen Sie eine neue asynchrone Methode namens InboundSms die eine Task. In dieser Methode werden wir die SMS aus dem Body der Anfrage einlesen, dann werden wir eine Nachricht an alle mit unserem SmsHub verbundenen Clients senden, die die Nummer der eingehenden Nachricht Msisdn (die Nummer, von der die Nachricht stammt) und Text.
[HttpPost("[action]")]
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("ReceiveMessage", inbound.Msisdn, inbound.Text);
}
return NoContent();
}Wenn Sie uns auf dem Laufenden gehalten haben, wird die Route wie folgt aussehen api/sms/inboundsms auf unserem Server aus, wenn er gestartet wird. Merken Sie sich das für später, denn darauf werden wir unsere Webhooks ausrichten, wenn wir unsere Webhooks konfigurieren.
Da wir Controller und SignalR verwenden, müssen wir sicherstellen, dass wir die Middleware konfigurieren. Öffnen Sie Startup.cs und fügen Sie using Microsoft.AspNetCore.ResponseCompression; in den Importbereich ein. Dann fügen Sie in der ConfigureServices Methode und fügen Sie das Folgende hinzu.
services.AddSignalR();
services.AddResponseCompression(opts => {
opts.MimeTypes = ResponseCompressionDefaults.MimeTypes
.Concat(new []{"application/octet-stream"});
});Dieses Snippet fügt SignalR und Antwortkomprimierung für SignalR zu Ihrer Anwendung hinzu.
Als nächstes müssen wir unserer Anwendung mitteilen, dass sie unsere Controller und unseren SmsHub verwenden soll. Fügen Sie in die Configure Methode in Startup.cs und fügen Sie die Zeile app.UseResponseCompression(); am Anfang der Methode ein. Dann, in dem UseEndpoints Delegaten, fügen Sie endpoints.MapControllers(); und endpoints.MapHub("/smshub");. Wenn alles gesagt und getan ist, sollte Ihr app.UseEndpoints sollte in etwa so aussehen:
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapBlazorHub();
endpoints.MapHub<Hubs.SmsHub>("/smshub");
endpoints.MapFallbackToPage("/_Host");
});
Nachdem nun alle internen Funktionen für die Verarbeitung eingehender SMS eingerichtet sind und alle unsere Dienste und Hubs funktionieren, müssen wir als Letztes ein Frontend erstellen.
Wenn Sie dotnet run in der Konsole aufrufen und die App auf localhost:5001 aufrufen, sehen Sie die generische Blazor-Startseite.
Generic Blazor
Wenn Sie die Navigationsleiste an der Seite entfernen möchten, gehen Sie einfach in Shared/MinLayout.razor und entfernen Sie das sidebar div.
Alles andere, was wir tun müssen, steht in Pages/index.razor also öffnen Sie diese Datei jetzt.
Löschen Sie alles unterhalb von Zeile 2 in index.razor da es nur allgemeiner Hallo-Welt-Code ist. Nun importieren wir unseren SignalR-Client, injizieren einen Navigationsmanager und erklären, dass wir IDisposable implementieren werden, um den SignalR-Hub aufzuräumen, wenn er sich auflöst.
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IDisposable
Wir werden die eingehenden Nachrichten in einer Tabelle anzeigen. Fügen wir also eine einfache Tabelle in unsere index.razor Datei ein. Fügen Sie den folgenden Razor-Code ein.
<h1>Messages</h1>
<table class="table" id="messageList">
<thead>
<tr>
<th>From Number</th>
<th>Message</th>
</tr>
@foreach (var message in _messages)
{
<tr>
<td>@message.FromNumber</td>
<td>@message.Text</td>
</tr>
}
</thead>
</table>Die foreach-Schleife durchläuft die Sammlung unserer Seite _messages Sammlung und erstellt eine neue Zeile mit jeder Nachricht FromNumber und Text.
Zurück in unserem Controller haben wir den Aufruf await HubContext.Clients.All.SendAsync("ReceiveMessage", inbound.Msisdn, inbound.Text); zum Senden der eingehenden Nachricht Msisdn und Text an alle Clients, die mit dem SMS-Hub verbunden sind. Jetzt ist es an der Zeit, eine Verbindung zu diesem Hub herzustellen. Ich zeige Ihnen jetzt den gesamten @code Blob und zeige Ihnen dann, wie die einzelnen Teile funktionieren.
@code {
private HubConnection _hubConnection;
private List<Message> _messages = new List<Message>();
private class Message
{
public string FromNumber { get; set; }
public string Text { get; set; }
}
protected override async Task OnInitializedAsync()
{
_hubConnection = new HubConnectionBuilder()
.WithUrl(NavigationManager.ToAbsoluteUri("/SmsHub"))
.Build();
_hubConnection.On<string, string>("ReceiveMessage", (from, text) =>
{
var message = new Message { FromNumber = from, Text = text };
_messages.Add(message);
StateHasChanged();
});
await _hubConnection.StartAsync();
}
public bool IsConnected => _hubConnection.State == HubConnectionState.Connected;
public void Dispose()
{
_ = _hubConnection.DisposeAsync();
}
}
Das folgende Codestück deklariert die privaten Felder der Komponente. Diese _messages Liste ist der Ort, an dem wir die Nachrichten abrufen werden.
private HubConnection _hubConnection;
private List<Message> _messages = new List<Message>();
private class Message
{
public string FromNumber { get; set; }
public string Text { get; set; }
}
Wir überschreiben die OnInitializedAsync Methode auf; dies ist die Methode, die bei der Initialisierung der Komponente aufgerufen wird. Diese Methode initialisiert die _hubConnection (die Verbindung zu unserer SmsHub). Sie registriert dann einen Handler für den ReceiveMessage Callback, den wir mit unserer SmsController. Wann immer also das Ereignis eintritt, wird diese Methode ausgelöst, wir fügen die eingehende Nachricht zu unserer _messages Sammlung hinzu, und dann rufen wir die StateHasChanged Funktion auf, um der Komponente mitzuteilen, dass sie neu gerendert werden muss, so dass unsere Nachrichten live neu geladen werden. Zum Schluss starten wir _hubConnection.
Nachdem wir nun alles aufgebaut haben, können wir mit ngrok testen. Ngrok ermöglicht es uns, von unserem lokalen Rechner aus einen Tunnel zu unserem Server zu erstellen. Wenn Sie ngrok mit IIS Express verwenden, empfehle ich Ihnen, sich unseren Erklärungen zu diesem Thema zu lesen, da es besondere Überlegungen gibt. Da wir in dieser Demo die dotnet CLI verwenden, müssen wir uns darüber keine Gedanken machen. Öffnen Sie Ihre Properties/launchSettings.json Datei im Objekt profiles. Das Profil, das nach Ihrer Anwendung benannt ist, wird beim Starten verwendet. Prüfen Sie die applicationUrl; es zeigt normalerweise auf https://localhost:5001 und http://localhost:5000. Stellen Sie sicher, dass Sie das Nicht-SSL-Profil löschen und führen Sie dann den folgenden Befehl in einem anderen Fenster der Eingabeaufforderung aus.
Ersetzen Sie 5000 durch die Nummer des Ports, an dem Ihre Anwendung ohne SSL ausgeführt werden soll.
Mit diesem Befehl wird ein Tunnel zu diesem Port aufgebaut. Sie können nun Ihre Anwendung mit dem dotnet run Befehl ausführen. Schauen Sie in Ihrer ngrok-Konsole nach; sie wird Ihnen die öffentlich zugängliche URL Ihrer Anwendung mitteilen.
ngrok
In meinem Fall verweist es auf http://09c1cd61e26e.ngrok.io/. Wenn ich zu dieser URL navigiere, kann ich das Frontend meiner Anwendung sehen.
frontend
Die Route für eingehende SMS-Webhooks lautet /api/sms/inboundsms mit unserer ngrok-URL als Basispfad. Das bedeutet, dass die vollständige Route in etwa wie folgt aussehen wird http://09c1cd61e26e.ngrok.io/api/sms/inboundsms. Alles, was wir jetzt tun müssen, ist zu unserer Einstellungsseite zu gehen und die URL für eingehende Nachrichten auf unsere Route zu setzen und die HTTP-Methode auf POST-JSON. Klicken Sie auf die Schaltfläche Save Changes am unteren Rand, und schon kann es losgehen.
SMS settings
Zum Testen müssen wir nur eine Textnachricht an eine Vonage Number senden, die mit diesem Account verbunden ist. Diese finden Sie auf dem Dashboard unter numbers->Your Number.
Nachdem Sie eine Nachricht erhalten haben, sieht es ungefähr so aus.
Inbound Message
Das ist alles, was wir brauchen, um zu sehen, wie SMS-Nachrichten in Echtzeit in einer App ankommen. Es ist klar, dass wir durch die Kombination von SignalR, Blazor und den Vonage APIs einige coole Sachen bauen können!
Den Code für diese Demo finden Sie in GitHub
Weitere Informationen über die Vonage APIs finden Sie auf unserer Entwickler-Website