Tutorial: Introducción a SignalR 1.x y MVC 4

  • Artículo

por Patrick Fletcher, Tim Teebken

Advertencia

Esta documentación no es para la última versión de SignalR. Eche un vistazo a ASP.NET Core SignalR.

Este tutorial muestra cómo usar ASP.NET SignalR para crear una aplicación de chat en tiempo real. Agregará SignalR a una aplicación MVC 4 y creará una vista de chat para enviar y mostrar mensajes.

Información general

Este tutorial le introduce al desarrollo de aplicaciones web en tiempo real con ASP.NET SignalR y ASP.NET MVC 4. El tutorial usa el mismo código de aplicación de chat que el Tutorial de introducción a SignalR, pero muestra cómo agregarlo a una aplicación MVC 4 basada en la plantilla de Internet.

En este tema aprenderá las siguientes tareas de desarrollo de SignalR:

  • Adición de la biblioteca SignalR a una aplicación de MVC 4.
  • Creación de una clase de hub para enviar contenidos a los clientes.
  • Uso de la biblioteca jQuery de SignalR en una página web para enviar mensajes y mostrar actualizaciones desde el hub.

La siguiente captura de pantalla muestra la aplicación de chat finalizada ejecutándose en un explorador.

Chat instances

Secciones:

Configuración del proyecto

Requisitos previos:

  • Visual Studio 2010 SP1, Visual Studio 2012 o Visual Studio 2012 Express. Si no tiene Visual Studio, consulte Descargas de ASP.NET para obtener la herramienta de desarrollo gratuita Visual Studio 2012 Express.
  • Para Visual Studio 2010, instale ASP.NET MVC 4.

Esta sección muestra cómo crear una aplicación de ASP.NET MVC 4, agregar la biblioteca SignalR y crear la aplicación de chat.

    1. En Visual Studio cree una aplicación de ASP.NET MVC 4, nómbrela SignalRChat y haga clic en Aceptar.

      Nota:

      En VS 2010, seleccione .NET Framework 4 en la lista desplegable de versión de Framework. El código de SignalR funciona en las versiones 4 y 4.5 de .NET Framework.

      Create mvc web 2. Seleccione la plantilla Aplicación de Internet, desactive la opción Crear un proyecto de prueba unitaria y haga clic en Aceptar.

      Create mvc internet site 3. Abra Herramientas > Administrador de paquetes NuGet> Consola del administrador de paquetes y ejecute el siguiente comando. Este paso agrega al proyecto un conjunto de archivos de scripts y referencias de ensamblados que habilitan la funcionalidad de SignalR.

      install-package Microsoft.AspNet.SignalR -Version 1.1.3 4. En Explorador de soluciones expanda la carpeta Scripts. Tenga en cuenta que se han agregado al proyecto bibliotecas de scripts para SignalR.

      Library references 5. En Explorador de soluciones, haga clic con el botón derecho en el proyecto, seleccione Agregar | Nueva carpeta y agregue una nueva carpeta llamada Hubs. 6. Haga clic con el botón derecho del ratón en la carpeta Hubs, haga clic en Agregar | Clase y cree una nueva clase C# denominada ChatHub.cs. Usará esta clase como hub del servidor de SignalR que envía mensajes a todos los clientes.

Nota:

Si utiliza Visual Studio 2012 y tiene instalada la actualización ASP.NET and Web Tools 2012.2, puede usar la nueva plantilla de elementos de SignalR para crear la clase de hub. Para ello, haga clic con el botón derecho del ratón en la carpeta Hubs, haga clic en Agregar | Nuevo elemento, seleccione Clase SignalR Hub (v1) y asigne a la clase el nombre ChatHub.cs.

  1. Reemplace el código de la clase ChatHub por el siguiente código.

    using System;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the addNewMessageToPage method to update clients.
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}

  2. Abra el archivo Global.asax del proyecto y agregue una llamada al método RouteTable.Routes.MapHubs(); como primera línea de código en el método Application_Start. Este código registra la ruta predeterminada para los hubs de SignalR y debe invocarse antes de registrar cualquier otra ruta. El método Application_Start completado tiene un aspecto similar al del ejemplo siguiente.

    protected void Application_Start()
{
    RouteTable.Routes.MapHubs();
    AreaRegistration.RegisterAllAreas();

    WebApiConfig.Register(GlobalConfiguration.Configuration);
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
    AuthConfig.RegisterAuth();
}

  3. Edite la clase HomeController que se encuentra en Controllers/HomeController.cs y agregue el siguiente método a la clase. Este método devuelve la vista Chat que creará en un paso posterior.

    public ActionResult Chat()
{
    return View();
}

  4. Haga clic con el botón derecho del ratón dentro del método Chat que acaba de crear y haga clic en Agregar vista para crear un nuevo archivo de vista.

  5. En el cuadro de diálogo Agregar vista, asegúrese de que está seleccionada la casilla para Usar un diseño o página maestra (desactive las demás casillas de verificación), y después haga clic en Agregar.

    Add a view

  6. Edite el nuevo archivo de vista llamado Chat.cshtml. Después de la etiqueta <h2>, pegue la siguiente sección <div> y el bloque de código @section scripts en la página. Este script permite que la página envíe mensajes de chat y muestre mensajes desde el servidor. El código completo de la vista de chat aparece en el siguiente bloque de código.

    Importante

    Cuando agregue SignalR y otras bibliotecas de scripts a su proyecto de Visual Studio, es posible que el administrador de paquetes instale versiones de los scripts más recientes que las versiones mostradas en este tema. Asegúrese de que las referencias a scripts de su código coinciden con las versiones de las bibliotecas de scripts instaladas en su proyecto.

    @{
    ViewBag.Title = "Chat";
}

<h2>Chat</h2>

<div class="container">
    <input type="text" id="message" />
    <input type="button" id="sendmessage" value="Send" />
    <input type="hidden" id="displayname" />
    <ul id="discussion">
    </ul>
</div>

@section scripts {
    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-1.0.1.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.--> 
    <script>
        $(function () {
            // Reference the auto-generated proxy for the hub.  
            var chat = $.connection.chatHub;
            // Create a function that the hub can call back to display messages.
            chat.client.addNewMessageToPage = function (name, message) {
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + htmlEncode(name) 
                    + '</strong>: ' + htmlEncode(message) + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.  
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub. 
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment. 
                    $('#message').val('').focus();
                });
            });
        });
        // This optional function html-encodes messages for display in the page.
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

  7. Guarde todo para el proyecto.

Ejecución de la muestra

  1. Presione F5 para ejecutar el proyecto en modo de depuración.

  2. En la línea de dirección del explorador, anexe /home/chat a la URL de la página predeterminada para el proyecto. La página de chat se carga en una instancia del explorador y solicita un nombre de usuario.

    Enter user name

  3. Escriba un nombre de usuario.

  4. Copie la URL de la línea de dirección del explorador y úsela para abrir dos instancias más del explorador. En cada instancia del explorador, escriba un nombre de usuario único.

  5. En cada instancia del explorador, agregue un comentario y haga clic en Enviar. Los comentarios deberían mostrarse en todas las instancias del explorador.

    Nota:

    Esta sencilla aplicación de chat no mantiene el contexto de discusión en el servidor. El hub transmite comentarios a todos los usuarios actuales. Los usuarios que se unan al chat más tarde verán los mensajes agregados desde el momento en que se unieron.

  6. La siguiente captura de pantalla muestra la aplicación de chat ejecutándose en un explorador.

    Chat browsers

  7. En Explorador de soluciones, inspeccione el nodo Documentos de scripts de la aplicación en ejecución. Este nodo es visible en modo de depuración si está usando Internet Explorer como explorador. Existe un archivo de scripts llamado hubs que la biblioteca SignalR genera dinámicamente en runtime. Este archivo administra la comunicación entre el script de jQuery y el código del lado del servidor. Si usa un explorador que no sea Internet Explorer, también puede acceder al archivo dinámico hubs navegando hasta él directamente, por ejemplo http://mywebsite/signalr/hubs.

    Generated hub script

Examen del código

La aplicación de chat de SignalR demuestra dos tareas básicas de desarrollo de SignalR: crear un hub como objeto principal de coordinación en el servidor y usar la biblioteca jQuery de SignalR para enviar y recibir mensajes.

Concentradores de SignalR

En el código de ejemplo, la clase ChatHub deriva de la clase Microsoft.AspNet.SignalR.Hub. Derivar de la clase Hub es una forma útil de desarrollar una aplicación de SignalR. Puede crear métodos públicos en su clase de hub y después acceder a esos métodos llamándolos desde scripts de jQuery en una página web.

En el código del chat, los clientes llaman al método ChatHub.Send para enviar un nuevo mensaje. A su vez, el hub envía el mensaje a todos los clientes llamando a Clients.All.addNewMessageToPage.

El método Send demuestra varios conceptos de hub:

  • Declare métodos públicos en un hub para que los clientes puedan llamarlos.

  • Use la propiedad Microsoft.AspNet.SignalR.Hub.Clients para acceder a todos los clientes conectados a este hub.

  • Llame a una función jQuery en el cliente (como la función addNewMessageToPage) para actualizar los clientes.

    public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        Clients.All.addNewMessageToPage(name, message);
    }
}

SignalR y jQuery

El archivo de vista Chat.cshtml del código de ejemplo muestra cómo usar la biblioteca jQuery de SignalR para comunicarse con un hub de SignalR. Las tareas esenciales del código son crear una referencia al proxy autogenerado para el hub, declarar una función a la que el servidor pueda llamar para enviar contenidos a los clientes e iniciar una conexión para enviar mensajes al hub.

El siguiente código declara un proxy para un hub.

var chat = $.connection.chatHub;

Nota:

En jQuery la referencia a la clase de servidor y sus miembros está en camelCase. El código de ejemplo hace referencia a la clase ChatHub de C# en jQuery como chatHub. Si quiere hacer referencia a la clase ChatHub en jQuery con el sistema PascalCase convencional como lo haría en C#, edite el archivo de clase ChatHub.cs. Agregue una instrucción using para hacer referencia al espacio de nombres Microsoft.AspNet.SignalR.Hubs. Después agregue el atributo HubName a la clase ChatHub, por ejemplo [HubName("ChatHub")]. Por último, actualice la referencia de jQuery a la clase ChatHub.

El siguiente código muestra cómo crear una función de devolución de llamada en el script. La clase de hub del servidor llama a esta función para enviar las actualizaciones de contenido a cada cliente. La llamada opcional a la función htmlEncode muestra una forma de codificar en HTML el contenido del mensaje antes de mostrarlo en la página, como forma de evitar la inyección de scripts.

chat.client.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</li>');
};

El siguiente código muestra cómo abrir una conexión con el hub. El código inicia la conexión y después le pasa una función para que controle el evento de clic en el botón Enviar de la página de chat.

Nota:

Este enfoque asegura que la conexión se establezca antes de que se ejecute el controlador de eventos.

$.connection.hub.start().done(function () {
    $('#sendmessage').click(function () {
        // Call the Send method on the hub. 
        chat.server.send($('#displayname').val(), $('#message').val());
        // Clear text box and reset focus for next comment. 
        $('#message').val('').focus();
    });
});

Pasos siguientes

Ha aprendido que SignalR es un marco para desarrollar aplicaciones web en tiempo real. También ha aprendido varias tareas de desarrollo de SignalR: cómo agregar SignalR a una aplicación de ASP.NET, cómo crear una clase de hub y cómo enviar y recibir mensajes desde el hub.

Para aprender conceptos más avanzados de desarrollo de SignalR, visite los siguientes sitios para obtener el código fuente y los recursos de SignalR: