Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

17 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
martes, 20 de octubre de 2020

Todos los usuarios que están utilizando una aplicación Blazor Server mantienen una conexión abierta con el servidor para enviar eventos y recibir las modificaciones de la interfaz de usuario. Y si habéis trabajado algo con Blazor, sabréis que cuando dicha conexión se corta aparece en el navegador un mensaje como el mostrado en la siguiente captura de pantalla:

Mensaje modal indicando que se está intentando reconectar con el servidor

Como se puede ver en la captura anterior, cuando se detecta la desconexión, se añade automáticamente a la página un <div> con el identificador components-reconnect-modal que bloquea la página (observad su posición fija a pantalla completa), mostrando al usuario un mensaje informándole de que se está intentando reconectar.

Si, transcurridos algo más de 30 segundos, la reconexión no ha sido posible, el contenido del <div> cambiará para informar al usuario de que la conexión no pudo ser restablecida, y ofreciendo un botón para reintentarlo y un enlace para recargar la página completa:

Mensaje indicando que la reconexión no ha podido ser restablecida

Podemos comprobar muy fácilmente estos comportamientos si lanzamos la aplicación sin depuración (Ctrl+F5) desde Visual Studio y detenemos IIS Express desde su icono en la barra de herramientas de Windows.

Como comportamiento por defecto la verdad es que no está nada mal, pues nos proporciona una solución out of the box que será suficiente la mayoría de los casos. Sin embargo, la estética es obviamente mejorable... ¿y si quisiéramos modificar visualmente estos mensajes o incluso su comportamiento? Pues es lo que veremos en este post 🙂

Creando nuestra propia UI

Cuando se produce un problema en la conexión, el cliente de Blazor Server (es decir, el código del archivo blazor.server.js que se introduce en _Host.cshtml) busca en la página un elemento con el identificador components-reconnect-modal. En caso de no existir, el sistema se comportará como hemos descrito anteriormente.

Pero si el elemento existe, Blazor irá aplicándole distintas clases CSS en función del estado de la conexión:

Clase CSS Estado
components-reconnect-show Se ha perdido la conexión y el cliente está intentando reconectar. Deberíamos mostrar el mensaje para notificar al usuario de que algo va mal
components-reconnect-hide La conexión ha sido restablecida, por lo que podemos ocultar el mensaje de notificación.
components-reconnect-failed La reconexión falló, probablemente debido a un problema de red, aunque aún podríamos reintentar la reconexión llamando a window.Blazor.reconnect().
components-reconnect-rejected La reconexión fue rechazada; es posible que se haya podido contactar con el servidor, pero éste rechazó la conexión porque el estado del usuario ya no está en memoria, por lo que la única forma de reconectar al usuario es recargando la página.

Puedes leer algo más sobre estos estados en la documentación oficial.

Jugando con estas clases, podemos crear fácilmente una interfaz de usuario más apropiada.

Por ejemplo, considerad el siguiente código de marcado que podríamos añadir a la página contenedora _Host.cshtml de nuestro proyecto Blazor Server:

<div id="components-reconnect-modal">
    <div class="components-messages">
        <div class="components-reconnecting">
            <h2>⚠ Se perdió la conexión</h2>
            <p>Estamos intentando reconectar. Por favor, espere unos segundos...</p>
            <div class="spinner-border"></div>
        </div>
        <div class="components-failed">
            <h2>❌ No ha sido posible reconectar</h2>
            <p>
                No es posible conectar con el servidor, probablemente debido
                a un problema en la red.<br />
                Puede probar <a href="javascript:location.href='';">recargando la página</a> 
                en unos minutos.
            </p>
        </div>
        <div class="components-rejected">
            <h2>❌ No ha sido posible reconectar</h2>
            <p>
                Se ha perdido la conexión con el servidor, probablemente debido a <br/>
                algún error o a que haya sido reiniciado.<br/>
                Debe <a href="javascript:location.href='';">recargar la página</a> 
                para conectar de nuevo.
            </p>
        </div>
    </div>
</div>

Como podéis observar, simplemente hemos añadido el elemento components-reconnect-modal que espera Blazor, y en su interior hemos creado un bloque para cada uno de los estados posibles. La visibilidad de estos bloques podemos modificarla muy fácilmente usando únicamente CSS, como en el siguiente ejemplo:

#components-reconnect-modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
}

    #components-reconnect-modal.components-reconnect-show, 
    #components-reconnect-modal.components-reconnect-failed, 
    #components-reconnect-modal.components-reconnect-rejected {
        display: flex;
    }

    #components-reconnect-modal .components-messages {
        color: #f0f0f0;
        margin: auto;
        text-align: center;
    }

        #components-reconnect-modal .components-messages h2 {
            color: white;
        }

        #components-reconnect-modal .components-messages a {
            color: white;
            text-decoration: none;
            border-bottom: 1px dotted white;
        }


    #components-reconnect-modal .components-reconnecting,
    #components-reconnect-modal .components-failed,
    #components-reconnect-modal .components-rejected {
        display: none;
    }

    #components-reconnect-modal.components-reconnect-show .components-reconnecting,
    #components-reconnect-modal.components-reconnect-failed .components-failed,
    #components-reconnect-modal.components-reconnect-rejected .components-rejected {
        display: block;
    }

Y el resultado luce tan espectacular como el que se puede ver en la siguiente animación:

Mensajes de reconexión y error con la nueva interfaz de usuario

Publicado en: www.variablenotfound.com.

Aún no hay comentarios, ¡sé el primero!