Compartir:
){kind=small}
Antiguo desarrollador .NET Advocate @Vonage, ingeniero de software poliglota full-stack, AI/ML
Cómo recibir un mensaje SMS con ASP.NET Core MVC y SignalR
Tiempo de lectura: 10 minutos
En este tutorial, aprenderemos a recibir mensajes SMS desde la Mensajes API de Vonagey enviarlos a un navegador en tiempo real. Usaremos ASP.NET Core MVC para nuestro servidor API y página web, y usaremos SignalR para recibir mensajes SMS en tiempo real.
Si sólo desea extraer el código de esta demo, puede encontrarlo en GitHub.
Necesitarás una Account API de Vonage
Necesitará la última versión del .NET Core 3.1 SDK
Necesitarás Visual Studio 2019, Visual Studio para Mac o Visual Studio Code, yo utilizaré Visual Studio 2019 para esta demo
Opcional: He utilizado Ngrok para probar esta demo
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.
Abre Visual Studio y haz clic en "Crear un nuevo proyecto", selecciona "Aplicación web ASP.NET Core" y haz clic en "Siguiente". Dale un nombre a tu aplicación. Yo voy a llamar a mi aplicación "ReceiveSmsAspNetCoreMvc" y, a continuación, haga clic en Crear. En la página siguiente, seleccione "Aplicación Web (Modelo-Vista-Controlador)" y haga clic en "Crear".
Ya que estamos usando SignalR, hay dos tipos de dependencias que necesitamos agregar. En primer lugar, tendremos que añadir las dependencias de nuestro paquete NuGet; a continuación, tendremos que añadir las dependencias de nuestro paquete de cliente.
Necesitamos instalar dos paquetes NuGet:
Hay varias maneras de hacer esto; Yo sólo voy a utilizar la CLI dotnet. Navegue hasta el directorio de su proyecto y ejecute:
Dado que dependemos de la biblioteca SignalR Client-Side, también tendremos que añadir la biblioteca SignalR Client-Side.
En Visual Studio, haga clic con el botón derecho en sus proyectos wwwrooot vaya a Add > Client-Side Library. Aparecerá un pequeño cuadro de diálogo que te ayudará a añadir la biblioteca. Para esta demostración, utilicé lo siguiente.
Proveedor: unpkg
Biblioteca: @microsoft/signalr@latest
Seleccione Archivos específicos: Sólo seleccioné
Files/dist/browser/signalr.jsyFiles/dist/browser/signalr.min.jsUbicación de destino: wwwroot/js/signalr
Una vez cumplimentado el formulario, tendrá un aspecto similar:
Adding a Client Side library in Visual Studio
Después de rellenar este formulario, puede hacer clic en instalar, y se instalarán los archivos necesarios en wwwroot/js/signalr
La forma en que funciona SignalR, los navegadores cliente se conectan a algo llamado Hubs. Hubs empujar mensajes desde el servidor a cada uno de sus clientes a través de cualquier mecanismo disponible que tienen. Por lo general es un WebSocket, pero se puede hacer a través de Server-Side-Events(SSE) o Long-Polling. Necesitamos crear un Hub en nuestro servidor para conectar nuestro servidor a los clientes de nuestro navegador.
Cree una nueva carpeta en su proyecto llamada Hubs. En esa carpeta, cree un nuevo archivo C SmsHub.cs. Este archivo no necesita hacer mucho. Simplemente declarará una clase que extiende la clase Hub. El archivo debe ser como el siguiente.
using Microsoft.AspNetCore.SignalR;
namespace ReceiveSmsAspNetCoreMvc.Hubs
{
public class SmsHub : Hub
{
}
}
Ahora tenemos que ir a nuestro archivo startup.cs y añadir los puntos finales de SignalR a nuestro middleware. La adición del middleware permitirá que la ruta del concentrador de SMS se levante y nos permita utilizar SignalR en nuestros clientes de navegador. Abramos startup.cs y encontremos el camino hasta el método ConfigureServices método. Añade la línea services.AddSignalR(); a este método, que añadirá el middleware SignalR a nuestro servidor. Después de terminar nuestro ConfigureServices método tendrá este aspecto:
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddSignalR();
}
Quédate en startup.cs y encuentra el Configure método. Este método contendrá una llamada a app.UseEndpoints, que toma una función como argumento, dentro de esa función, mapearemos el SmsHub a la ruta /smsHub. Al finalizar la app.UseEndpoints tendrá el siguiente aspecto:
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<SmsHub>("/smsHub");
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
Ahora que tenemos el middleware ordenado, necesitamos agregar el método que recibirá los SMS de Vonage. Para ello utilizaremos un Controlador MVC vacío. Haz click con el botón derecho en la carpeta Controllers y ve a add -> Controller, selecciona "MVC Controller - Empty" y haz click en "Add" ponle un nombre a esto SmsController y haz clic en "Añadir" de nuevo.
Lo primero que tendremos que hacer en nuestro método SmsController inyecta el HubContext para el SmsHub. Declarar una IHubContext propiedad llamada HubContexty luego declara un constructor SmsController que toma un IHubContext como argumento y asigne este parámetro a la propiedad HubContext propiedad. A través de la magia de la inyección de dependencia, el controlador recibe el contexto del hub en la creación.
/// <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;
}
Ahora que tenemos acceso al Hub Context, debemos agregar una ruta API para los SMS entrantes. Esta ruta será la que Vonage utilice para enviar un webhook a nuestra aplicación. Este método tomará la solicitud, analizará un objeto InboundSms a partir de ella y enviará una señal InboundSms a todos los clientes conectados al concentrador. Este método enviará el MSISDN y el texto del mensaje al usuario. Como referencia, el MSISDN es el número desde el que se originó el mensaje. Añada lo siguiente a su 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();
}
Una vez hecho esto, sólo tenemos que añadir un frontend a nuestra aplicación. Para ello, nos haremos cargo de la vista de inicio. Abre /Vies/Home/Index.cshtml y elimina el div que contiene el texto de bienvenida, no lo necesitaremos.
A continuación, vamos a añadir un par de importaciones de secuencias de comandos. Importaremos ~/js/sms.js (que crearemos en un momento) y ~/js/signalr/dist/browser/signalr.js que es la librería cliente que importamos antes. Sólo tiene que añadir estas dos etiquetas, y vamos a ser bueno para ir.
<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>Lo último que tenemos que hacer aquí es añadir la tabla donde mostraremos los mensajes. Le daremos dos columnas From Number y Message - que corresponderán a los campos Msisdn y al Text de nuestros mensajes SMS entrantes.
<h1>Messages</h1>
<table class="table" id="messageList">
<thead>
<tr>
<th>From Number</th>
<th>Message</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
La última cosa que tenemos que hacer es añadir un controlador de eventos para nuestro InboundSms evento. Lo haremos en el archivo sms.js al que acabamos de hacer referencia. Sigue adelante y añade un archivo sms.js al directorio /wwwroot/js directorio. Hay tres cosas que tenemos que hacer en este archivo.
Construir la conexión SignalR al smsHub
Registrar un controlador de eventos para
InboundSmsque añadirá una nueva fila a nuestra lista de mensajesInicie la conexión SignalR.
Podemos hacer las tres cosas añadiendo lo siguiente al archivo sms.js archivo.
"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);
})
Desde una perspectiva de desarrollo, eso es todo lo que necesitábamos hacer, así que vamos a seguir adelante y entrar en la prueba. Vamos a probar esto con Ngrok para probar esta demo. Ngrok nos permite construir un túnel de acceso público a nuestra aplicación, lo cual es útil cuando necesitamos exponer puntos finales HTTP de acceso público a nuestras aplicaciones. Si usted va a probar esto con IIS Express como yo, usted querrá comprobar hacia fuera nuestro explicación sobre el tema ya que hay consideraciones especiales. Esto se reduce a que tenemos que añadir una opción --host-header cuando iniciemos ngrok.
En Visual Studio, haga clic con el botón derecho en su archivo csproj y vaya a propiedades. Allí, haga clic en la pestaña Depurar. Por comodidad, cuando estemos probando, vamos a desmarcar la casilla Habilitar SSL. Toma nota de la URL de la aplicación y del número de puerto al final de la misma.
The IIS configuration screen
A continuación, iniciaremos ngrok. Apuntaremos las peticiones entrantes al puerto desde la URL de nuestra aplicación, y haremos que el host y el puerto reemplacen la cabecera host entrante. Inicie ngrok ejecutando el siguiente comando en un nuevo terminal (reemplace el número de puerto con su puerto).
Este comando hará que tu terminal sea tomada por ngrok. Te mostrará una URL accediendo a esa URL reenviará las peticiones a tu servidor local. Esta URL será de la forma http://randomhash.ngrok.io. Mi hash aleatorio fue d98024d97b04así que para el resto de esta explicación, sustituye ese valor por el tuyo.
Running Ngrok to give local access to our application
Después de iniciar mi aplicación en IIS Express, puedo navegar a mi URL ngrok para asegurarme de que es accesible públicamente.
Si recuerdas, anotamos nuestro método InboundSms en nuestro método SmsController con [HttpPost("webhooks/inbound-sms")] esto establece una ruta para que http://d98024d97b04.ngrok.io/webhooks/inbound-sms para realizar la llamada a inbound-sms. La última cosa que tengo que hacer antes de estar fuera y pruebas es decirle al Vonage donde enviar mis mensajes SMS a la URL que acabo de mencionar.
Para ello, vayamos a ${CUSTOMER_DASHBOARD_URL}/settings. En Configuración predeterminada de SMS, establezca el campo Mensajes entrantes en esa URL y cambie el Método HTTP a POST-JSON. Haz clic en Guardar cambios y ya puedes probar. Ve a tu página de inicio y envía un mensaje de prueba a tu número virtual de API de Vonage. Si no estás seguro de cuál es tu número virtual de Vonage, puedes encontrarlo en tu panel en Numbers. Luego de enviar el mensaje al servidor, verás los mensajes SMS llegar a tu servidor en tiempo real al ver la página web asociada con la aplicación.
Incoming SMS messages being displayed on the screen in the application we built
Y eso es todo lo que tenemos que hacer para recibir mensajes y mostrarlos en tiempo real.
Todo el código de esta demo se encuentra en GitHub