Guía de la API de ASP.NET Signalr hubs: cliente JavaScript

Warning

Esta documentación no es para la versión más reciente de Signalr. Eche un vistazo a ASP.net Core signalr.

En este documento se proporciona una introducción al uso de la API de hubs para Signalr versión 2 en clientes de JavaScript, como aplicaciones de la tienda Windows (WinJS) y exploradores.

Signalr hubs API le permite realizar llamadas a procedimiento remoto (RPC) desde un servidor a clientes conectados y desde clientes al servidor. En el código del servidor, se definen los métodos a los que pueden llamar los clientes y se llama a los métodos que se ejecutan en el cliente. En el código de cliente, se definen los métodos a los que se puede llamar desde el servidor y se llama a los métodos que se ejecutan en el servidor. Signalr se encarga de todas las conexiones de cliente a servidor.

Signalr también ofrece una API de nivel inferior denominada conexiones persistentes. Para ver una introducción a Signalr, hubs y conexiones persistentes, consulte Introducción a signalr.

Versiones de software utilizadas en este tema

Versiones anteriores de este tema

Para obtener información sobre las versiones anteriores de Signalr, consulte versiones anteriores de signalr.

Preguntas y comentarios

Deje comentarios sobre cómo le gustó este tutorial y lo que podríamos mejorar en los comentarios en la parte inferior de la página. Si tiene preguntas que no están directamente relacionadas con el tutorial, puede publicarlas en el foro de ASP.net signalr o stackoverflow.com.

Información general

Este documento contiene las siguientes secciones:

Para obtener documentación sobre cómo programar el servidor o los clientes de .NET, vea los siguientes recursos:

El componente Signalr 2 Server solo está disponible en .NET 4,5 (aunque hay un cliente .NET para Signalr 2 en .NET 4,0).

El proxy generado y lo que hace para usted

Puede programar un cliente de JavaScript para que se comunique con un servicio de Signalr con o sin un proxy que Signalr genera automáticamente. Lo que hace el proxy es simplificar la sintaxis del código que se utiliza para conectarse, escribir métodos a los que llama el servidor y llamar a métodos en el servidor.

Al escribir código para llamar a métodos de servidor, el proxy generado le permite utilizar la sintaxis que parece que estaba ejecutando una función local: puede escribir serverMethod(arg1, arg2) en lugar de invoke('serverMethod', arg1, arg2) . La sintaxis de proxy generada también permite un error de lado cliente inmediato e inteligible si se escribe un nombre de método de servidor invariable. Y si crea manualmente el archivo que define los proxies, también puede obtener compatibilidad con IntelliSense para escribir código que llame a métodos de servidor.

Por ejemplo, supongamos que tiene la siguiente clase de concentrador en el servidor:

public class ContosoChatHub : Hub
{
    public void NewContosoChatMessage(string name, string message)
    {
        Clients.All.addContosoChatMessageToPage(name, message);
    }
}

En los siguientes ejemplos de código se muestra el aspecto del código JavaScript para invocar el NewContosoChatMessage método en el servidor y recibir invocaciones del addContosoChatMessageToPage método desde el servidor.

Con el proxy generado

var contosoChatHubProxy = $.connection.contosoChatHub;
contosoChatHubProxy.client.addContosoChatMessageToPage = function (name, message) {
    console.log(name + ' ' + message);
};
$.connection.hub.start().done(function () {
    // Wire up Send button to call NewContosoChatMessage on the server.
    $('#newContosoChatMessage').click(function () {
         contosoChatHubProxy.server.newContosoChatMessage($('#displayname').val(), $('#message').val());
         $('#message').val('').focus();
     });
});

Sin el proxy generado

var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
contosoChatHubProxy.on('addContosoChatMessageToPage', function(name, message) {
    console.log(name + ' ' + message);
});
connection.start().done(function() {
    // Wire up Send button to call NewContosoChatMessage on the server.
    $('#newContosoChatMessage').click(function () {
        contosoChatHubProxy.invoke('newContosoChatMessage', $('#displayname').val(), $('#message').val());
        $('#message').val('').focus();
                });
    });

Cuándo usar el proxy generado

Si desea registrar varios controladores de eventos para un método de cliente al que el servidor llama, no puede usar el proxy generado. De lo contrario, puede elegir usar el proxy generado o no según sus preferencias de codificación. Si decide no utilizarlo, no tiene que hacer referencia a la dirección URL de "signalr/hubs" en un script elemento del código de cliente.

Configuración del cliente

Un cliente de JavaScript requiere referencias a jQuery y al archivo JavaScript de Signalr Core. La versión de jQuery debe ser 1.6.4 o versiones posteriores, como 1.7.2, 1.8.2 o 1.9.1. Si decide usar el proxy generado, también necesitará una referencia al archivo JavaScript del proxy generado por Signalr. En el ejemplo siguiente se muestra el aspecto de las referencias en una página HTML que usa el proxy generado.

<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src="signalr/hubs"></script>

Estas referencias se deben incluir en este orden: primero jQuery, Signalr Core después de eso y los proxies de Signalr en último lugar.

Cómo hacer referencia al proxy generado dinámicamente

En el ejemplo anterior, la referencia al proxy generado por Signalr es el código de JavaScript generado dinámicamente, no un archivo físico. Signalr crea el código JavaScript del proxy sobre la marcha y lo atiende al cliente en respuesta a la dirección URL "/signalr/hubs". Si especificó una dirección URL base diferente para las conexiones de Signalr en el servidor en el MapSignalR método, la dirección URL del archivo de proxy generado dinámicamente es su dirección URL personalizada con "/hubs" anexado.

Note

En el caso de los clientes JavaScript de Windows 8 (tienda Windows), use el archivo de proxy físico en lugar de uno generado dinámicamente. Para obtener más información, vea Cómo crear un archivo físico para el proxy generado por signalr más adelante en este tema.

En una vista de Razor de ASP.NET MVC 4 o 5, use la tilde para hacer referencia a la raíz de la aplicación en la referencia del archivo proxy:

<script src="~/signalr/hubs"></script>

Para obtener más información sobre el uso de Signalr en MVC 5, vea Introducción con signalr y MVC 5.

En una vista de Razor de ASP.NET MVC 3, use Url.Content para la referencia de archivo proxy:

<script src="@Url.Content("~/signalr/hubs")"></script>

En una aplicación de formularios Web Forms ASP.NET, use ResolveClientUrl para la referencia de archivo de servidores proxy o regístrela mediante el ScriptManager mediante una ruta de acceso relativa raíz de la aplicación (empezando por una tilde):

<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>

Como norma general, use el mismo método para especificar la dirección URL "/signalr/hubs" que se usa para los archivos CSS o JavaScript. Si especifica una dirección URL sin usar una tilde, en algunos escenarios la aplicación funcionará correctamente al realizar la prueba en Visual Studio con IIS Express pero se producirá un error 404 al implementar en el IIS completo. Para obtener más información, vea resolver referencias a recursos de Root-Level en servidores Web en Visual Studio para proyectos Web de ASP.net en el sitio de MSDN.

Al ejecutar un proyecto web en Visual Studio 2017 en modo de depuración, y si usa Internet Explorer como explorador, puede ver el archivo de proxy en Explorador de soluciones en scripts.

Para ver el contenido del archivo, haga doble clic en hubs. Si no usa Visual Studio 2012 o 2013 e Internet Explorer, o si no está en modo de depuración, también puede obtener el contenido del archivo si va a la dirección URL "/signalR/hubs". Por ejemplo, si el sitio se ejecuta en http://localhost:56699 , vaya a http://localhost:56699/SignalR/hubs en el explorador.

Cómo crear un archivo físico para el proxy generado por Signalr

Como alternativa al proxy generado dinámicamente, puede crear un archivo físico que tenga el código proxy y hacer referencia a ese archivo. Tal vez desee hacerlo para controlar el comportamiento de almacenamiento en caché o de agrupación, o para obtener IntelliSense cuando se codifican llamadas a métodos de servidor.

Para crear un archivo proxy, realice los pasos siguientes:

  1. Instale el paquete NuGet Microsoft. Aspnet. signalr. utils .

  2. Abra un símbolo del sistema y vaya a la carpeta Tools que contiene el archivo de SignalR.exe. La carpeta Tools se encuentra en la siguiente ubicación:

    [your solution folder]\packages\Microsoft.AspNet.SignalR.Utils.2.1.0\tools

  3. Escriba el comando siguiente:

    signalr ghp /path:[path to the .dll that contains your Hub class]

    La ruta de acceso al archivo. dll es normalmente la carpeta bin en la carpeta del proyecto.

    Este comando crea un archivo denominado server.js en la misma carpeta que signalr.exe.

  4. Coloque el archivo de server.js en una carpeta adecuada del proyecto, cambie su nombre según corresponda a la aplicación y agregue una referencia a él en lugar de la referencia "signalr/hubs".

Cómo establecer una conexión

Antes de establecer una conexión, tiene que crear un objeto de conexión, crear un proxy y registrar controladores de eventos para los métodos a los que se puede llamar desde el servidor. Cuando se configuran el proxy y los controladores de eventos, establezca la conexión mediante una llamada al start método.

Si usa el proxy generado, no tiene que crear el objeto de conexión en su propio código porque el código proxy generado lo hace por usted.

Establecer una conexión (con el proxy generado)

var contosoChatHubProxy = $.connection.contosoChatHub;
contosoChatHubProxy.client.addContosoChatMessageToPage = function (name, message) {
    console.log(userName + ' ' + message);
};
$.connection.hub.start()
    .done(function(){ console.log('Now connected, connection ID=' + $.connection.hub.id); })
    .fail(function(){ console.log('Could not Connect!'); });

Establecer una conexión (sin el proxy generado)

var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
contosoChatHubProxy.on('addContosoChatMessageToPage', function(userName, message) {
    console.log(userName + ' ' + message);
});
connection.start()
    .done(function(){ console.log('Now connected, connection ID=' + connection.id); })
    .fail(function(){ console.log('Could not connect'); });

El código de ejemplo utiliza la dirección URL "/signalr" predeterminada para conectarse al servicio Signalr. Para obtener información sobre cómo especificar una dirección URL base diferente, consulte ASP.net signalr hubs API Guide-Server-The/SIGNALR URL.

De forma predeterminada, la ubicación del concentrador es el servidor actual; Si se va a conectar a un servidor diferente, especifique la dirección URL antes de llamar al start método, como se muestra en el ejemplo siguiente:

$.connection.hub.url = '<yourbackendurl>;

Note

Normalmente se registran los controladores de eventos antes de llamar al start método para establecer la conexión. Si desea registrar algunos controladores de eventos después de establecer la conexión, puede hacerlo, pero debe registrar al menos uno de los controladores de eventos antes de llamar al start método. Una razón para esto es que puede haber muchos concentradores en una aplicación, pero no querrá desencadenar el OnConnected evento en cada concentrador si solo va a usar uno de ellos. Cuando se establece la conexión, la presencia de un método de cliente en el proxy de un concentrador es lo que indica a Signalr que desencadene el OnConnected evento. Si no registra ningún controlador de eventos antes de llamar al start método, podrá invocar métodos en el concentrador, pero no OnConnected se llamará al método del concentrador y no se invocará ningún método de cliente desde el servidor.

$. Connection. Hub es el mismo objeto que $. hubConnection () crea

Como puede ver en los ejemplos, al utilizar el proxy generado, $.connection.hub hace referencia al objeto de conexión. Este es el mismo objeto que se obtiene al llamar a $.hubConnection() cuando no se usa el proxy generado. El código proxy generado crea la conexión mediante la ejecución de la siguiente instrucción:

Crear una conexión en el archivo de proxy generado

Cuando se usa el proxy generado, puede hacer todo lo $.connection.hub que pueda hacer con un objeto de conexión cuando no esté utilizando el proxy generado.

Ejecución asincrónica del método Start

El start método se ejecuta de forma asincrónica. Devuelve un objeto de jQuery diferido, lo que significa que puede agregar funciones de devolución de llamada llamando a métodos como pipe , done y fail . Si tiene código que desea ejecutar una vez establecida la conexión, como una llamada a un método de servidor, coloque ese código en una función de devolución de llamada o llámelo desde una función de devolución de llamada. El .done método de devolución de llamada se ejecuta una vez establecida la conexión y después de que se complete la ejecución de cualquier código que tenga en el OnConnected método de control de eventos en el servidor.

Si coloca la instrucción "ahora conectada" del ejemplo anterior como la siguiente línea de código después de la start llamada al método (no en una .done devolución de llamada), la console.log línea se ejecutará antes de que se establezca la conexión, como se muestra en el ejemplo siguiente:

Manera incorrecta de escribir código que se ejecute una vez establecida la conexión

Cómo establecer una conexión entre dominios

Normalmente, si el explorador carga una página desde http://contoso.com , la conexión de signalr está en el mismo dominio, en http://contoso.com/signalr . Si la página de http://contoso.com realiza una conexión a http://fabrikam.com/signalr , es una conexión entre dominios. Por motivos de seguridad, las conexiones entre dominios están deshabilitadas de forma predeterminada.

En Signalr 1. x, las solicitudes entre dominios se controlaban mediante una sola marca EnableCrossDomain. Esta marca controla las solicitudes JSONP y CORS. Para mayor flexibilidad, se ha quitado toda la compatibilidad con CORS del componente de servidor de Signalr (los clientes de JavaScript todavía usan CORS normalmente si se detecta que el explorador lo admite) y se ha puesto a disposición un nuevo middleware OWIN para admitir estos escenarios.

Si se requiere JSONP en el cliente (para admitir solicitudes entre dominios en exploradores anteriores), deberá habilitarse explícitamente estableciendo EnableJSONP en el HubConfiguration objeto en true , como se muestra a continuación. JSONP está deshabilitado de forma predeterminada, ya que es menos seguro que CORS.

Agregando Microsoft. Owin. CORS al proyecto: Para instalar esta biblioteca, ejecute el siguiente comando en la consola del administrador de paquetes:

Install-Package Microsoft.Owin.Cors

Este comando agregará la versión de 2.1.0 del paquete al proyecto.

Llamando a UseCors

En el fragmento de código siguiente se muestra cómo implementar conexiones entre dominios en Signalr 2.

Implementación de solicitudes entre dominios en Signalr 2

En el código siguiente se muestra cómo habilitar CORS o JSONP en un proyecto Signalr 2. En este ejemplo Map de código se usa y RunSignalR en lugar de MapSignalR , para que el middleware de CORS solo se ejecute para las solicitudes de signalr que requieren compatibilidad con CORS (en lugar de para todo el tráfico en la ruta de acceso especificada en MapSignalR ). Map también se puede usar para cualquier otro middleware que deba ejecutarse para un prefijo de dirección URL específico, en lugar de para toda la aplicación.

using Microsoft.AspNet.SignalR;
using Microsoft.Owin.Cors;
using Owin;
namespace MyWebApplication
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Branch the pipeline here for requests that start with "/signalr"
            app.Map("/signalr", map =>
            {
                // Setup the CORS middleware to run before SignalR.
                // By default this will allow all origins. You can 
                // configure the set of origins and/or http verbs by
                // providing a cors options with a different policy.
                map.UseCors(CorsOptions.AllowAll);
                var hubConfiguration = new HubConfiguration 
                {
                    // You can enable JSONP by uncommenting line below.
                    // JSONP requests are insecure but some older browsers (and some
                    // versions of IE) require JSONP to work cross domain
                    // EnableJSONP = true
                };
                // Run the SignalR pipeline. We're not using MapSignalR
                // since this branch already runs under the "/signalr"
                // path.
                map.RunSignalR(hubConfiguration);
            });
        }
    }
}

Note

  • No establezca en jQuery.support.cors true en el código.

    No establezca jQuery. support. CORS en true

    Signalr controla el uso de CORS. Si jQuery.support.cors se establece en true, se deshabilita JSONP porque hace que signalr asuma que el explorador es compatible con CORS.

  • Cuando se conecta a una dirección URL de localhost, Internet Explorer 10 no la considerará una conexión entre dominios, por lo que la aplicación funcionará localmente con IE 10 aunque no haya habilitado las conexiones entre dominios en el servidor.

  • Para obtener información sobre el uso de conexiones entre dominios con Internet Explorer 9, vea este subproceso de stackoverflow.

  • Para obtener información sobre el uso de conexiones entre dominios con Chrome, vea este subproceso de stackoverflow.

  • El código de ejemplo utiliza la dirección URL "/signalr" predeterminada para conectarse al servicio Signalr. Para obtener información sobre cómo especificar una dirección URL base diferente, consulte ASP.net signalr hubs API Guide-Server-The/SIGNALR URL.

Cómo configurar la conexión

Antes de establecer una conexión, puede especificar parámetros de cadena de consulta o especificar el método de transporte.

Cómo especificar parámetros de cadena de consulta

Si desea enviar datos al servidor cuando el cliente se conecta, puede agregar parámetros de cadena de consulta al objeto de conexión. En los siguientes ejemplos se muestra cómo establecer un parámetro de cadena de consulta en el código de cliente.

Establecer un valor de cadena de consulta antes de llamar al método Start (con el proxy generado)

$.connection.hub.qs = { 'version' : '1.0' };

Establecer un valor de cadena de consulta antes de llamar al método Start (sin el proxy generado)

var connection = $.hubConnection();
connection.qs = { 'version' : '1.0' };

En el ejemplo siguiente se muestra cómo leer un parámetro de cadena de consulta en el código del servidor.

public class ContosoChatHub : Hub
{
    public override Task OnConnected()
    {
        var version = Context.QueryString['version'];
        if (version != '1.0')
        {
            Clients.Caller.notifyWrongVersion();
        }
        return base.OnConnected();
    }
}

Cómo especificar el método de transporte

Como parte del proceso de conexión, un cliente de Signalr normalmente negocia con el servidor para determinar el mejor transporte compatible con el servidor y el cliente. Si ya sabe qué transporte desea usar, puede omitir este proceso de negociación especificando el método de transporte cuando llame al start método.

Código de cliente que especifica el método de transporte (con el proxy generado)

$.connection.hub.start( { transport: 'longPolling' });

Código de cliente que especifica el método de transporte (sin el proxy generado)

var connection = $.hubConnection();
connection.start({ transport: 'longPolling' });

Como alternativa, puede especificar varios métodos de transporte en el orden en el que desea que Signalr los pruebe:

Código de cliente que especifica un esquema de reserva de transporte personalizado (con el proxy generado)

$.connection.hub.start( { transport: ['webSockets', 'longPolling'] });

Código de cliente que especifica un esquema de reserva de transporte personalizado (sin el proxy generado)

var connection = $.hubConnection();
connection.start({ transport: ['webSockets', 'longPolling'] });

Puede usar los siguientes valores para especificar el método de transporte:

  • WebSockets
  • "foreverFrame"
  • "serverSentEvents"
  • "longPolling"

En los siguientes ejemplos se muestra cómo averiguar qué método de transporte está utilizando una conexión.

Código de cliente que muestra el método de transporte utilizado por una conexión (con el proxy generado)

$.connection.hub.start().done(function () {
    console.log("Connected, transport = " + $.connection.hub.transport.name);
});

Código de cliente que muestra el método de transporte utilizado por una conexión (sin el proxy generado)

var connection = $.hubConnection();
connection.hub.start().done(function () {
    console.log("Connected, transport = " + connection.transport.name);
});

Para obtener información sobre cómo comprobar el método de transporte en el código del servidor, consulte ASP.net signalr hubs API Guide-Server: How to get Information about the Client from the Context Property. Para obtener más información sobre los transportes y los respaldos, vea Introducción a signalr-transportes y reservas.

Cómo obtener un proxy para una clase de concentrador

Cada objeto de conexión que se crea encapsula información sobre una conexión a un servicio de Signalr que contiene una o más clases de concentrador. Para comunicarse con una clase de concentrador, se usa un objeto proxy que se crea (si no se usa el proxy generado) o que se genera automáticamente.

En el cliente, el nombre del proxy es una versión con mayúsculas y minúsculas Camel del nombre de la clase de concentrador. Signalr realiza este cambio automáticamente para que el código JavaScript pueda ajustarse a las convenciones de JavaScript.

Clase hub en el servidor

public class ContosoChatHub : Hub

Obtener una referencia al proxy de cliente generado para el concentrador

var myHubProxy = $.connection.contosoChatHub

Crear proxy de cliente para la clase de concentrador (sin el proxy generado)

var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');

Si decora la clase hub con un HubName atributo, use el nombre exacto sin cambiar mayúsculas de minúsculas.

Clase hub en el servidor con el atributo HubName

[HubName("ContosoChatHub")]
public class ChatHub : Hub

Obtener una referencia al proxy de cliente generado para el concentrador

var contosoChatHubProxy = $.connection.ContosoChatHub

Crear proxy de cliente para la clase de concentrador (sin el proxy generado)

var contosoChatHubProxy = connection.createHubProxy('ContosoChatHub');

Cómo definir métodos en el cliente a los que el servidor puede llamar

Para definir un método al que el servidor pueda llamar desde un concentrador, agregue un controlador de eventos al proxy del concentrador mediante la client propiedad del proxy generado o llame al on método si no está utilizando el proxy generado. Los parámetros pueden ser objetos complejos.

Agregue el controlador de eventos antes de llamar al start método para establecer la conexión. (Si desea agregar controladores de eventos después de llamar al start método, vea la nota de cómo establecer una conexión anteriormente en este documento y use la sintaxis que se muestra para definir un método sin usar el proxy generado).

La coincidencia de nombres de método no distingue mayúsculas de minúsculas. Por ejemplo, Clients.All.addContosoChatMessageToPage en el servidor se ejecutará AddContosoChatMessageToPage , addContosoChatMessageToPage o addcontosochatmessagetopage en el cliente.

Define el método en el cliente (con el proxy generado)

var contosoChatHubProxy = $.connection.contosoChatHub;
contosoChatHubProxy.client.addContosoChatMessageToPage = function (userName, message) {
    console.log(userName + ' ' + message);
};
$.connection.hub.start()
    .done(function(){ console.log('Now connected, connection ID=' + $.connection.hub.id); })
    .fail(function(){ console.log('Could not Connect!'); });

Manera alternativa de definir el método en el cliente (con el proxy generado)

$.extend(contosoChatHubProxy.client, {
    addContosoChatMessageToPage: function(userName, message) {
    console.log(userName + ' ' + message);
    };
});

Define el método en el cliente (sin el proxy generado o al agregar después de llamar al método Start)

var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
contosoChatHubProxy.on('addContosoChatMessageToPage', function(userName, message) {
    console.log(userName + ' ' + message);
});
connection.start()
    .done(function(){ console.log('Now connected, connection ID=' + connection.id); })
    .fail(function(){ console.log('Could not connect'); });

Código de servidor que llama al método de cliente

public class ContosoChatHub : Hub
{
    public void NewContosoChatMessage(string name, string message)
    {
        Clients.All.addContosoChatMessageToPage(name, message);
    }
}

En los ejemplos siguientes se incluye un objeto complejo como parámetro de método.

Define el método en el cliente que toma un objeto complejo (con el proxy generado)

var contosoChatHubProxy = $.connection.contosoChatHub;
contosoChatHubProxy.client.addMessageToPage = function (message) {
    console.log(message.UserName + ' ' + message.Message);
});

Define el método en el cliente que toma un objeto complejo (sin el proxy generado)

var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('contosoChatHub');
chatHubProxy.on('addMessageToPage', function (message) {
    console.log(message.UserName + ' ' + message.Message);
});

Código de servidor que define el objeto complejo

public class ContosoChatMessage
{
    public string UserName { get; set; }
    public string Message { get; set; }
}

Código de servidor que llama al método de cliente mediante un objeto complejo

public void SendMessage(string name, string message)
{
    Clients.All.addContosoChatMessageToPage(new ContosoChatMessage() { UserName = name, Message = message });
}

Cómo llamar a métodos de servidor desde el cliente

Para llamar a un método de servidor desde el cliente, use la server propiedad del proxy generado o el invoke método en el proxy de concentrador si no está utilizando el proxy generado. El valor devuelto o los parámetros pueden ser objetos complejos.

Pase una versión en mayúsculas y minúsculas Camel del nombre del método en el concentrador. Signalr realiza este cambio automáticamente para que el código JavaScript pueda ajustarse a las convenciones de JavaScript.

En los siguientes ejemplos se muestra cómo llamar a un método de servidor que no tiene un valor devuelto y cómo llamar a un método de servidor que tiene un valor devuelto.

Método de servidor sin atributo HubMethodName

public class ContosoChatHub : Hub
{
    public void NewContosoChatMessage(ChatMessage message)
    {
        Clients.All.addContosoChatMessageToPage(message);
    }
}

Código de servidor que define el objeto complejo pasado en un parámetro

public class ChatMessage
{
    public string UserName { get; set; }
    public string Message { get; set; }
}

Código de cliente que invoca el método de servidor (con el proxy generado)

contosoChatHubProxy.server.newContosoChatMessage({ UserName: userName, Message: message}).done(function () {
        console.log ('Invocation of NewContosoChatMessage succeeded');
    }).fail(function (error) {
        console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);
    });

Código de cliente que invoca el método de servidor (sin el proxy generado)

contosoChatHubProxy.invoke('newContosoChatMessage', { UserName: userName, Message: message}).done(function () {
        console.log ('Invocation of NewContosoChatMessage succeeded');
    }).fail(function (error) {
        console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);
    });

Si decora el método de concentrador con un HubMethodName atributo, use ese nombre sin cambiar mayúsculas de minúsculas.

Método de servidor con un atributo HubMethodName

public class ContosoChatHub : Hub
{
    [HubMethodName("NewContosoChatMessage")]
    public void NewContosoChatMessage(string name, string message)
    {
        Clients.All.addContosoChatMessageToPage(name, message);
    }
}

Código de cliente que invoca el método de servidor (con el proxy generado)

contosoChatHubProxy.server.NewContosoChatMessage(userName, message).done(function () {
        console.log ('Invocation of NewContosoChatMessage succeeded');
    }).fail(function (error) {
        console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);
    });

Código de cliente que invoca el método de servidor (sin el proxy generado)

contosoChatHubProxy.invoke('NewContosoChatMessage', userName, message).done(function () {
        console.log ('Invocation of NewContosoChatMessage succeeded');
    }).fail(function (error) {
        console.log('Invocation of NewContosoChatMessage failed. Error: ' + error);
    });

En los ejemplos anteriores se muestra cómo llamar a un método de servidor que no tiene ningún valor devuelto. En los siguientes ejemplos se muestra cómo llamar a un método de servidor que tiene un valor devuelto.

Código de servidor para un método que tiene un valor devuelto

public class StockTickerHub : Hub
{
    public IEnumerable<Stock> GetAllStocks()
    {
        return _stockTicker.GetAllStocks();
    }
}

La clase stock utilizada para el valor devuelto

public class Stock
{
    public string Symbol { get; set; }
    public decimal Price { get; set; }
}

Código de cliente que invoca el método de servidor (con el proxy generado)

function init() {
    return stockTickerProxy.server.getAllStocks().done(function (stocks) {
        $.each(stocks, function () {
            var stock = this;
            console.log("Symbol=" + stock.Symbol + " Price=" + stock.Price);
        });
    }).fail(function (error) {
        console.log('Error: ' + error);
    });
}

Código de cliente que invoca el método de servidor (sin el proxy generado)

function init() {
    return stockTickerProxy.invoke('getAllStocks').done(function (stocks) {
        $.each(stocks, function () {
            var stock = this;
            console.log("Symbol=" + stock.Symbol + " Price=" + stock.Price);
        });
    }).fail(function (error) {
        console.log('Error: ' + error);
    });
}

Cómo controlar los eventos de duración de la conexión

Signalr proporciona los siguientes eventos de duración de conexión que puede controlar:

  • starting: Se genera antes de que se envíen datos a través de la conexión.
  • received: Se genera cuando se reciben datos en la conexión. Proporciona los datos recibidos.
  • connectionSlow: Se genera cuando el cliente detecta una conexión de eliminación lenta o con frecuencia.
  • reconnecting: Se genera cuando se inicia la reconexión del transporte subyacente.
  • reconnected: Se genera cuando se vuelve a conectar el transporte subyacente.
  • stateChanged: Se genera cuando cambia el estado de la conexión. Proporciona el estado anterior y el nuevo estado (conexión, conexión, reconexión o desconexión).
  • disconnected: Se genera cuando la conexión se ha desconectado.

Por ejemplo, si desea mostrar mensajes de advertencia cuando hay problemas de conexión que pueden provocar retrasos perceptibles, controle el connectionSlow evento.

Controlar el evento connectionSlow (con el proxy generado)

$.connection.hub.connectionSlow(function () {
    console.log('We are currently experiencing difficulties with the connection.')
});

Controlar el evento connectionSlow (sin el proxy generado)

var connection = $.hubConnection();
connection.connectionSlow(function () {
    console.log('We are currently experiencing difficulties with the connection.')
});

Para obtener más información, consulte Descripción y control de eventos de duración de conexión en signalr.

Cómo controlar errores

El cliente de Signalr JavaScript proporciona un error evento para el que puede Agregar un controlador. También puede utilizar el método FAIL para agregar un controlador para los errores resultantes de una invocación de método de servidor.

Si no se habilitan explícitamente los mensajes de error detallados en el servidor, el objeto de excepción que Signalr devuelve después de un error contiene información mínima sobre el error. Por ejemplo, si se produce un error en una llamada a newContosoChatMessage , el mensaje de error del objeto de error contiene " There was an error invoking Hub method 'contosoChatHub.newContosoChatMessage'. " no se recomienda enviar mensajes de error detallados a los clientes en producción por motivos de seguridad, pero si desea habilitar mensajes de error detallados para la solución de problemas, use el siguiente código en el servidor.

var hubConfiguration = new HubConfiguration();
hubConfiguration.EnableDetailedErrors = true;
app.MapSignalR(hubConfiguration);

En el ejemplo siguiente se muestra cómo agregar un controlador para el evento de error.

Agregar un controlador de errores (con el proxy generado)

$.connection.hub.error(function (error) {
    console.log('SignalR error: ' + error)
});

Agregar un controlador de errores (sin el proxy generado)

var connection = $.hubConnection();
connection.error(function (error) {
    console.log('SignalR error: ' + error)
});

En el ejemplo siguiente se muestra cómo controlar un error desde una invocación de método.

Controlar un error desde una invocación de método (con el proxy generado)

contosoChatHubProxy.newContosoChatMessage(userName, message)
    .fail(function(error) { 
        console.log( 'newContosoChatMessage error: ' + error) 
    });

Controlar un error desde una invocación de método (sin el proxy generado)

contosoChatHubProxy.invoke('newContosoChatMessage', userName, message)
    .fail(function(error) { 
        console.log( 'newContosoChatMessage error: ' + error) 
    });

Si se produce un error en la invocación de un método, error también se produce el evento, por lo que se ejecutaría el código en el error controlador del método y en la .fail devolución de llamada del método.

Cómo habilitar el registro del lado cliente

Para habilitar el registro del lado cliente en una conexión, establezca la logging propiedad en el objeto de conexión antes de llamar al start método para establecer la conexión.

Habilitar el registro (con el proxy generado)

$.connection.hub.logging = true;
$.connection.hub.start();

Habilitar el registro (sin el proxy generado)

var connection = $.hubConnection();
connection.logging = true;
connection.start();

Para ver los registros, abra las herramientas de desarrollo del explorador y vaya a la pestaña consola. Para ver un tutorial en el que se muestran instrucciones paso a paso y capturas de pantalla que muestran cómo hacerlo, consulte difusión del servidor con ASP.net signalr-habilitar el registro.