WebSockets en ASP.NET Core: Comunicación en Tiempo Real

En el desarrollo de aplicaciones modernas, la necesidad de implementar funcionalidades en tiempo real se ha vuelto crucial. Tecnologías como los WebSockets permiten a los desarrolladores crear aplicaciones interactivas, como chats, sistemas de notificación, y paneles de control que actualizan los datos en vivo sin la necesidad de recargar la página. En este artículo, exploraremos cómo habilitar y utilizar WebSockets en ASP.NET Core para construir una aplicación de chat en tiempo real. Este ejemplo incluirá todos los componentes necesarios para que puedas replicarlo en tus proyectos.

 

¿Qué son los WebSockets?

WebSockets es un protocolo que facilita la comunicación bidireccional persistente entre el cliente y el servidor. A diferencia del tradicional modelo request-response de HTTP, WebSockets mantiene una conexión abierta, permitiendo que tanto el cliente como el servidor puedan enviar y recibir datos de manera continua y con baja latencia.

Ventajas de WebSockets:

• Baja latencia: Permite una comunicación casi instantánea entre el cliente y el servidor.
• Bidireccional: Tanto el cliente como el servidor pueden enviar datos de manera independiente.
• Persistencia: Una vez establecida la conexión, se mantiene activa hasta que una de las partes la cierra.

 

 

Configuración de WebSockets en ASP.NET Core

Paso 1: Configurar el Proyecto en ASP.NET Core

Antes de empezar, asegúrate de tener Visual Studio instalado y actualizado. Crea un nuevo proyecto de tipo "ASP.NET Core Web Application". Elige la plantilla "Empty" para partir desde una base limpia.

 

Paso 2: Habilitar WebSockets en ASP.NET Core

Lo primero que debes hacer es habilitar el soporte de WebSockets en el middleware de tu aplicación ASP.NET Core. Para ello, modifica el archivo Startup.cs de la siguiente manera:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllers();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseRouting();

        // Habilitar WebSockets
        var webSocketOptions = new WebSocketOptions()
        {
            KeepAliveInterval = TimeSpan.FromMinutes(2), // Mantiene viva la conexión
            ReceiveBufferSize = 4 * 1024 // Tamaño del buffer de recepción
        };
        app.UseWebSockets(webSocketOptions);

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }
}

 

Paso 3: Crear un Middleware para Manejar WebSockets

Después de habilitar WebSockets, necesitas un middleware personalizado para manejar las conexiones WebSocket. Este middleware interceptará las solicitudes de WebSocket, las aceptará y comenzará a manejar la comunicación bidireccional.

public class WebSocketMiddleware
{
    private readonly RequestDelegate _next;

    public WebSocketMiddleware(RequestDelegate next)
    {
        _next = next;
    }

    public async Task InvokeAsync(HttpContext context)
    {
        if (context.WebSockets.IsWebSocketRequest)
        {
            var webSocket = await context.WebSockets.AcceptWebSocketAsync();
            await HandleWebSocketAsync(webSocket);
        }
        else
        {
            await _next(context);
        }
    }

    private async Task HandleWebSocketAsync(WebSocket webSocket)
    {
        var buffer = new byte[1024 * 4];
        WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);

        while (!result.CloseStatus.HasValue)
        {
            var message = Encoding.UTF8.GetString(buffer, 0, result.Count);
            // Aquí se puede manejar el mensaje recibido y enviar una respuesta si es necesario

            var responseMessage = Encoding.UTF8.GetBytes($"Respuesta del servidor: {message}");
            await webSocket.SendAsync(new ArraySegment<byte>(responseMessage), result.MessageType, result.EndOfMessage, CancellationToken.None);

            result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        }

        await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
    }
}

Nota: Este middleware intercepta las solicitudes WebSocket y gestiona la comunicación a través de un ciclo de recepción y envío de mensajes.

 

Paso 4: Configurar el Middleware en la Aplicación

Ahora, necesitas registrar el middleware en la configuración de la aplicación (archivo Startup.cs).

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // Código omitido por brevedad...

    app.UseWebSockets();

    // Middleware personalizado para manejar las conexiones WebSocket
    app.UseMiddleware<WebSocketMiddleware>();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

 

Paso 5: Crear un Cliente Web para Probar WebSockets

Para probar la implementación de WebSockets, puedes crear un cliente web simple usando HTML y JavaScript.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cliente WebSocket</title>
</head>
<body>
    <h1>WebSocket en ASP.NET Core</h1>
    <button id="connect">Conectar</button>
    <button id="send">Enviar Mensaje</button>
    <button id="close">Cerrar Conexión</button>
    <div id="messages"></div>

    <script>
        let socket;

        document.getElementById('connect').onclick = function () {
            socket = new WebSocket("ws://localhost:5000/ws");

            socket.onopen = function (event) {
                document.getElementById('messages').innerHTML += '<p>Conexión abierta</p>';
            };

            socket.onmessage = function (event) {
                document.getElementById('messages').innerHTML += '<p>Mensaje recibido: ' + event.data + '</p>';
            };

            socket.onclose = function (event) {
                document.getElementById('messages').innerHTML += '<p>Conexión cerrada</p>';
            };
        };

        document.getElementById('send').onclick = function () {
            socket.send("Hola desde el cliente!");
        };

        document.getElementById('close').onclick = function () {
            socket.close();
        };
    </script>
</body>
</html>

Nota: Este simple cliente web permite conectar a WebSocket, enviar un mensaje y recibir una respuesta desde el servidor.

 

 

Un Ejemplo Práctico: Chat en Tiempo Real en ASP.NET Core

La creación de un chat en tiempo real es uno de los ejemplos más clásicos y útiles para ilustrar el poder de los WebSockets. En esta sección, construiremos un chat básico donde múltiples clientes podrán conectarse, enviar mensajes y recibir actualizaciones en tiempo real. Este ejemplo se dividirá en varias etapas, cubriendo desde la configuración del servidor hasta la implementación del cliente web, y luego la integración de todos los componentes.

Primero, asegúrate de tener un proyecto de ASP.NET Core configurado. Puedes crear uno nuevo en Visual Studio seleccionando el tipo de proyecto "ASP.NET Core Web Application" y eligiendo la plantilla "Empty".

 

Paso 1: Crear el Servicio de Gestión de Conexiones

Antes de comenzar a gestionar las conexiones WebSocket de múltiples usuarios, necesitamos un servicio que actúe como administrador de las conexiones activas. Este servicio mantendrá un registro de cada conexión, permitiendo enviar mensajes a todos los clientes conectados.

public class WebSocketConnectionManager
{
    private readonly Dictionary<string, WebSocket> _sockets = new Dictionary<string, WebSocket>();

    public WebSocket GetSocketById(string id)
    {
        return _sockets.FirstOrDefault(p => p.Key == id).Value;
    }

    public void AddSocket(WebSocket socket)
    {
        _sockets.Add(Guid.NewGuid().ToString(), socket);
    }

    public async Task RemoveSocket(string id)
    {
        if (_sockets.TryGetValue(id, out WebSocket socket))
        {
            _sockets.Remove(id);
            await socket.CloseAsync(WebSocketCloseStatus.NormalClosure, "Cierre de conexión", CancellationToken.None);
        }
    }

    public IEnumerable<WebSocket> GetAllSockets()
    {
        return _sockets.Values;
    }
}

Explicación del Código

• _sockets: Un diccionario que almacena las conexiones WebSocket activas, donde la clave es un identificador único (ID) y el valor es el propio WebSocket.
• AddSocket: Método para agregar una nueva conexión WebSocket al diccionario.
• RemoveSocket: Método para eliminar una conexión WebSocket del diccionario y cerrar la conexión.
• GetAllSockets: Método que devuelve todas las conexiones WebSocket activas, lo cual es útil para enviar mensajes a todos los clientes conectados.

 

Paso 2: Crear el Middleware para el Chat

El siguiente paso es extender nuestro middleware de WebSockets para manejar las funcionalidades del chat. Este middleware se encargará de recibir mensajes de los clientes, procesarlos y retransmitirlos a todos los demás usuarios conectados.

public class ChatWebSocketMiddleware
{
    private readonly RequestDelegate _next;
    private readonly WebSocketConnectionManager _connectionManager;

    public ChatWebSocketMiddleware(RequestDelegate next, WebSocketConnectionManager connectionManager)
    {
        _next = next;
        _connectionManager = connectionManager;
    }

    public async Task InvokeAsync(HttpContext context)
    {
        if (context.WebSockets.IsWebSocketRequest)
        {
            var webSocket = await context.WebSockets.AcceptWebSocketAsync();
            _connectionManager.AddSocket(webSocket);

            await ReceiveMessagesAsync(webSocket);
        }
        else
        {
            await _next(context);
        }
    }

    private async Task ReceiveMessagesAsync(WebSocket webSocket)
    {
        var buffer = new byte[1024 * 4];
        WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);

        while (!result.CloseStatus.HasValue)
        {
            var message = Encoding.UTF8.GetString(buffer, 0, result.Count);

            // Enviar el mensaje a todos los clientes conectados
            foreach (var socket in _connectionManager.GetAllSockets())
            {
                if (socket.State == WebSocketState.Open)
                {
                    var responseMessage = Encoding.UTF8.GetBytes(message);
                    await socket.SendAsync(new ArraySegment<byte>(responseMessage, 0, responseMessage.Length), result.MessageType, result.EndOfMessage, CancellationToken.None);
                }
            }

            result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        }

        await _connectionManager.RemoveSocket(_connectionManager.GetSocketById(webSocket.GetHashCode().ToString()));
        await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
    }
}

Explicación del Código

• _connectionManager: Servicio inyectado para gestionar las conexiones activas.
• ReceiveMessagesAsync: Método que se ejecuta en un bucle para recibir mensajes de un cliente WebSocket y reenviarlos a todos los demás clientes conectados.

 

Paso 3: Registrar los Servicios y el Middleware en el Startup.cs

Debes registrar el servicio WebSocketConnectionManager en el contenedor de dependencias, y agregar el middleware del chat ChatWebSocketMiddleware en el pipeline de solicitudes.

public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton<WebSocketConnectionManager>();
    services.AddControllers();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseRouting();

    var webSocketOptions = new WebSocketOptions()
    {
        KeepAliveInterval = TimeSpan.FromMinutes(2),
        ReceiveBufferSize = 4 * 1024
    };

    app.UseWebSockets(webSocketOptions);

    app.UseMiddleware<ChatWebSocketMiddleware>();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

Explicación del Código

• services.AddSingleton<WebSocketConnectionManager>(): Registra el WebSocketConnectionManager como un servicio singleton, asegurando que la misma instancia se use en toda la aplicación.
• app.UseMiddleware<ChatWebSocketMiddleware>(): Agrega el middleware de chat al pipeline de ASP.NET Core.

 

Paso 4: Crear el Cliente Web para el Chat

Ahora vamos a desarrollar un cliente web (archivo HTML) para interactuar con nuestro servidor de chat en tiempo real. Este cliente permitirá enviar y recibir mensajes de forma dinámica y mostrar el chat en pantalla.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat en Tiempo Real</title>
    <style>
        #chatContainer {
            width: 100%;
            height: 400px;
            border: 1px solid #ddd;
            overflow-y: scroll;
            margin-bottom: 10px;
        }
        #chatContainer p {
            margin: 5px;
            padding: 5px;
            background-color: #f1f1f1;
            border-radius: 5px;
        }
        #messageInput {
            width: calc(100% - 60px);
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <h1>Chat en Tiempo Real</h1>
    <div id="chatContainer"></div>
    <input type="text" id="messageInput" placeholder="Escribe tu mensaje..." />
    <button id="sendButton">Enviar</button>

    <script>
        let socket = new WebSocket("ws://localhost:5000/ws");

        socket.onopen = function (event) {
            document.getElementById('chatContainer').innerHTML += '<p><em>Conectado al chat</em></p>';
        };

        socket.onmessage = function (event) {
            document.getElementById('chatContainer').innerHTML += '<p>' + event.data + '</p>';
            document.getElementById('chatContainer').scrollTop = document.getElementById('chatContainer').scrollHeight;
        };

        document.getElementById('sendButton').onclick = function () {
            let message = document.getElementById('messageInput').value;
            socket.send(message);
            document.getElementById('messageInput').value = '';
        };

        socket.onclose = function (event) {
            document.getElementById('chatContainer').innerHTML += '<p><em>Conexión cerrada</em></p>';
        };
    </script>
</body>
</html>

Explicación del Código

• chatContainer: Un contenedor que muestra los mensajes del chat.
• messageInput: Un campo de entrada de texto para enviar mensajes.
• sendButton: Un botón que envía el mensaje a través de la conexión WebSocket.

• socket.onopen: Maneja el evento de conexión abierta, indicando al usuario que está conectado al chat.
• socket.onmessage: Recibe mensajes desde el servidor y los muestra en la interfaz de usuario.
• socket.onclose: Notifica al usuario cuando se cierra la conexión.
• socket.send(Message): Envía un mensaje desde el cliente al servidor.

Desglose de la línea: let socket = new WebSocket("ws://localhost:5000/ws");

• let socket: Aquí estamos declarando una nueva variable llamada socket utilizando la palabra clave let, que es una manera moderna de declarar variables en JavaScript con un alcance limitado al bloque en el que se declara.

• new WebSocket(...): Este es el constructor que crea una nueva instancia de la clase WebSocket. La clase WebSocket es una API nativa de JavaScript que permite a los navegadores establecer y manejar conexiones WebSocket. Al crear un nuevo WebSocket, se inicia la conexión con el servidor WebSocket.

• "ws://localhost:5000/ws": Este es el argumento que se pasa al constructor WebSocket, y es la URL del servidor WebSocket al que nos queremos conectar.

  • ws://: Es el esquema de la URL, similar a http:// o https://, pero específicamente para conexiones WebSocket. ws se usa para conexiones WebSocket sin cifrar, mientras que wss se utilizaría para conexiones WebSocket cifradas (equivalente a HTTPS).
  • localhost:5000: Es el dominio y el puerto donde está corriendo el servidor ASP.NET Core. localhost indica que el servidor está en la misma máquina que el cliente, y 5000 es el puerto que ASP.NET Core está usando para escuchar las solicitudes. En un entorno de producción, este sería el dominio o IP pública de tu servidor.
  • /ws: Es la ruta específica en el servidor donde las solicitudes WebSocket son manejadas. En este caso, /ws indica que el servidor ASP.NET Core tiene un endpoint configurado para manejar conexiones WebSocket en esta ruta.

Nota: Esta línea es crucial porque marca el inicio de la comunicación en tiempo real entre el cliente y el servidor mediante WebSockets. Una vez establecida la conexión, ambos pueden enviar y recibir mensajes de manera eficiente, lo que es esencial para aplicaciones en tiempo real como el chat implementado en el ejemplo.

¿Dónde se configura el endpoint /ws?

El endpoint /ws no se define explícitamente en la configuración de rutas (endpoints.MapControllers(); o similar), sino que se maneja dentro del middleware personalizado ChatWebSocketMiddleware. Aquí es donde se establece que las solicitudes a la ruta /ws serán tratadas como solicitudes WebSocket.

Observa el siguiente fragmento de código dentro del ChatWebSocketMiddleware:

public async Task InvokeAsync(HttpContext context)
{
    if (context.Request.Path == "/ws")
    {
        WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
        string socketId = _manager.AddSocket(webSocket);

        await HandleWebSocketCommunication(webSocket, socketId);
    }
    else
    {
        await _next(context);
    }
}

• context.Request.Path == "/ws":

  • Aquí es donde se verifica si la solicitud entrante tiene la ruta /ws. El objeto HttpContext contiene la información de la solicitud HTTP, y context.Request.Path devuelve la ruta de la solicitud.
  • Si la ruta es /ws, se considera que la solicitud es para abrir una conexión WebSocket.

• await context.WebSockets.AcceptWebSocketAsync();:

  • Si la ruta coincide con /ws, el servidor acepta la conexión WebSocket. Esto convierte la solicitud HTTP estándar en una conexión WebSocket.

• Manejo de la Comunicación WebSocket:

  • Una vez aceptada la conexión, el middleware maneja la comunicación WebSocket con los métodos HandleWebSocketCommunication y BroadcastMessageAsync, que permiten enviar y recibir mensajes a través de la conexión WebSocket.

Nota: El endpoint /ws está configurado implícitamente en el middleware ChatWebSocketMiddleware. La ruta se detecta dentro del middleware, y si coincide con /ws, se inicia y gestiona una conexión WebSocket. El middleware actúa como el punto de entrada para todas las solicitudes WebSocket en esa ruta específica. Este enfoque te permite manejar conexiones WebSocket de manera flexible, y también puedes cambiar la ruta (/ws) simplemente modificando la condición context.Request.Path == "/ws" en el middleware si es necesario.

Ajustes en la URL del Cliente

Vamos a suponer que la aplicación ASP.NET Core se aloja en un dominio externo, por ejemplo, https://miapp.com, y el endpoint para WebSockets es /chat.

En el código del cliente (HTML/JavaScript), la línea que establece la conexión WebSocket debería cambiar a:

let socket = new WebSocket("wss://miapp.com/chat");

• wss://: En este caso, usamos wss:// en lugar de ws://, ya que wss:// es el protocolo seguro para WebSockets (similar a https:// para HTTP seguro). Esto es importante si el servidor está configurado para trabajar con conexiones seguras (TLS/SSL).

• miapp.com: Este es el dominio donde está alojada la aplicación ASP.NET Core. Puedes cambiar esto a cualquier dominio o dirección IP donde esté disponible tu servidor.

• /chat: Este es el nuevo endpoint en el servidor que está configurado para manejar las conexiones WebSocket. Es un endpoint específico en lugar de /ws.

Además, en el middleware de ASP.NET Core, necesitas cambiar el endpoint en el middleware ChatWebSocketMiddleware para que coincida con la nueva ruta /chat.

public async Task InvokeAsync(HttpContext context)
{
    // Cambiar la ruta a '/chat' en lugar de '/ws'
    if (context.Request.Path == "/chat")
    {
        WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
        string socketId = _manager.AddSocket(webSocket);

        await HandleWebSocketCommunication(webSocket, socketId);
    }
    else
    {
        await _next(context);
    }
}

Nota: Con estos cambios, la aplicación estará preparada para aceptar conexiones WebSocket desde un servidor alojado externamente en una ruta específica, como https://miapp.com/chat. Asegúrate de que tu servidor esté configurado para manejar conexiones seguras si estás usando wss://.

 

Paso 5: Probar la Aplicación

Por último, para probar la aplicación, sigue estos pasos:

1. Ejecuta la Aplicación ASP.NET Core: Inicia el proyecto en Visual Studio. Asegúrate de que la aplicación esté escuchando en http://localhost:5000 o ajusta la URL en el cliente web según sea necesario.

2. Abrir el Cliente Web en el Navegador: Abre el archivo HTML del cliente en tu navegador. Deberías ver la interfaz de chat simple.

3. Probar la Comunicación: Abre varias ventanas del navegador y envía mensajes desde diferentes clientes. Deberías ver los mensajes reflejados en todas las ventanas activas.

 

 

Conclusiones

En este artículo, hemos explorado en profundidad cómo implementar WebSockets en ASP.NET Core para construir aplicaciones en tiempo real. Desde la configuración básica hasta la implementación de un chat en tiempo real, hemos cubierto cada aspecto técnico necesario para comprender y aplicar WebSockets en tus proyectos.

WebSockets es una tecnología poderosa para aplicaciones que requieren comunicación bidireccional en tiempo real. Con las herramientas y ejemplos proporcionados aquí, estás bien preparado para integrar WebSockets en tus aplicaciones de ASP.NET Core, mejorando la interactividad y la experiencia del usuario.