Tutorial: Chat en tiempo real con SignalR 2 y MVC 5

Artículo
03/24/2024

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

En este tutorial, hizo lo siguiente:

Configuración del proyecto
Ejecución del ejemplo
Examen del código

Advertencia

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

Requisitos previos

Visual Studio 2017 con la carga de trabajo de ASP.NET y desarrollo web.

Configuración del proyecto

En esta sección se muestra cómo usar Visual Studio 2017 y SignalR 2 crear una aplicación ASP.NET MVC 5 vacía, agregar la biblioteca SignalR y crear la aplicación de chat.

En Visual Studio, cree una aplicación ASP.NET de C# destinada a .NET Framework 4.5, asígnele el nombre SignalRChat y haga clic en Aceptar.
En Nueva aplicación web ASP.NET - SignalRMvcChat, seleccione MVC y después Cambiar autenticación.
En Cambiar autenticación, seleccione Sin autenticación y haga clic en Aceptar.
En Nueva aplicación web ASP.NET: SignalRMvcChat, seleccione Aceptar.
En el Explorador de soluciones, haga clic con el botón derecho en el proyecto y seleccione Agregar>nuevo elemento.
En Agregar nuevo elemento - SignalRChat, seleccione Instalado>Visual C#>Web>SignalR y después Clase de concentrador de SignalR (v2).
Asigne el nombre ChatHub a la clase y agréguela al proyecto.

En este paso se crea el archivo de clase ChatHub.cs y se agrega al proyecto un conjunto de archivos de script y referencias de ensamblado que admiten SignalR.

Reemplace el código del nuevo archivo de clase ChatHub.cs por este 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);
        }
    }
}

En el Explorador de soluciones, haga clic con el botón derecho en el proyecto y seleccione Agregar>clase.
Asigne el nombre Startup a la nueva clase y agréguela al proyecto.

Reemplace el código del archivo de clase Startup.cs por este código:

using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

En el Explorador de soluciones, seleccione Controladores>HomeController.cs.
Agregue este método a HomeController.cs.
```
public ActionResult Chat()
{
    return View();
}
```
Este método devuelve la vista Chat que creará en un paso posterior.
En el Explorador de soluciones, haga clic con el botón derecho en Vistas>Inicio y seleccione Agregar>Vista.
En Agregar vista, asigne el nombre Chat a la nueva vista y seleccione Agregar.

Reemplace el contenido de Chat.cshtml por el código siguiente:

@{
    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-2.1.0.min.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>
}

En el Explorador de soluciones, expanda Scripts.

Las bibliotecas de scripts para jQuery y SignalR son visibles en el proyecto.

Importante

Es posible que el administrador de paquetes haya instalado una versión posterior de los scripts de SignalR.

Compruebe que las referencias de script en el bloque de código se corresponden con las versiones de los archivos de script del proyecto.

Referencias de script del bloque de código original:

<!--Script references. -->
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>

Si no coinciden, actualice el archivo .cshtml.
En la barra de menús, seleccione Archivo>Guardar todo.

Ejecución del ejemplo

En la barra de herramientas, active Depuración de scripts y, después, seleccione el botón de reproducción para ejecutar el ejemplo en modo de depuración.
Cuando se abra el explorador, escriba un nombre para la identidad del chat.
Copie la dirección URL del explorador, abra otros dos exploradores y pegue las direcciones URL en las barras de dirección.
En cada explorador, escriba un nombre único.
Ahora, agregue un comentario y seleccione Enviar. Repita la operación en los demás exploradores. Los comentarios aparecen en tiempo real.

Nota:

Esta sencilla aplicación de chat no mantiene el contexto de discusión en el servidor. El centro 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 hayan unido.

Vea cómo se ejecuta la aplicación de chat en tres exploradores diferentes. Cuando Tom, Anand y Susan envían mensajes, todos los exploradores se actualizan en tiempo real:
En el Explorador de soluciones, inspeccione el nodo Documentos de scripts de la aplicación en ejecución. Hay un archivo de script llamado hubs que la biblioteca SignalR genera de forma dinámica en tiempo de ejecución. Este archivo administra la comunicación entre el script de jQuery y el código del lado del servidor.

Examen del código

La aplicación de chat de SignalR muestra dos tareas básicas de desarrollo de SignalR. Muestra cómo crear un centro de conectividad. El servidor usa ese centro como objeto de coordinación principal. El centro usa la biblioteca jQuery de SignalR para enviar y recibir mensajes.

Centros de SignalR en ChatHub.cs

En el ejemplo de código, la clase ChatHub deriva de la clase Microsoft.AspNet.SignalR.Hub. La derivación de la clase Hub es una forma útil de compilar una aplicación de SignalR. Puede crear métodos públicos en la clase de centro y después acceder a esos métodos si los llama desde scripts 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 centro envía el mensaje a todos los clientes mediante una llamada a Clients.All.addNewMessageToPage.

El método Send demuestra varios conceptos del centro:

Declaración de métodos públicos en un centro para que los clientes puedan llamarlos.
Uso de la propiedad dinámica Microsoft.AspNet.SignalR.Hub.Clients para comunicarse con todos los clientes conectados a este centro.

Llamada a una función en el cliente (como addNewMessageToPage) para actualizar los clientes.

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

SignalR y jQuery Chat.cshtml

En el archivo de vista Chat.cshtml del código de ejemplo se muestra cómo usar la biblioteca jQuery de SignalR para comunicarse con un centro de SignalR. El código lleva a cabo muchas tareas importantes. Crea una referencia al proxy generado automáticamente para el centro, declara una función a la que el servidor puede llamar para insertar contenido en los clientes e inicia una conexión para enviar mensajes al centro.

var chat = $.connection.chatHub;

Nota:

En JavaScript, la referencia a la clase de servidor y sus miembros tienen formato camelCase. En el ejemplo de código se hace referencia a la clase ChatHub de C# en JavaScript como chatHub.

En este bloque de código, creará una función de devolución de llamada en el script.

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

La clase de centro en el 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. Es una manera de evitar la inyección de scripts.

Este código abre una conexión con el centro.

$.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();
    });
});

Nota:

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

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.

Obtención del código

Descarga del proyecto completado

Recursos adicionales

Para más información sobre SignalR, vea los siguientes recursos:

Pasos siguientes

En este tutorial ha:

Configuración del proyecto
Ejecución del ejemplo
Examen del código

Vaya al siguiente artículo para aprender a crear una aplicación web que use SignalR 2 de ASP.NET para proporcionar funcionalidad de mensajería de alta frecuencia.

Aplicación web con mensajería de alta frecuencia

Tutorial: Chat en tiempo real con SignalR 2 y MVC 5

Requisitos previos

Configuración del proyecto

Ejecución del ejemplo

Examen del código

Centros de SignalR en ChatHub.cs

SignalR y jQuery Chat.cshtml

Obtención del código

Recursos adicionales

Pasos siguientes

Comentarios

Comentarios

Recursos adicionales