Hola!

Hoy toca un repaso a algo que puede ser bastante molesto con signalR:

La necesidad de utilizar un hub signalR desde un cliente web, alojado en una dirección diferente del server de SignalR

Cuando tenemos algo parecido en WPF, Win8, u otro cliente .Net; la solución es simple: se declaran 2 conexiones y 2 hubs diferentes

   1: _connection = new HubConnection("http://localhost:50000/");

   2: _myHub = _connection.CreateHubProxy("MyHub");

   3: _connection.Start().Wait();

   4:  

   5: _connection2 = new HubConnection("http://localhost:50001/");

   6: _myHub2 = _connection2.CreateHubProxy("MyHub");

   7: _connection2.Start().Wait();

Sin embargo en JavaScript, el tema cambia un poco. Veamos el siguiente ejemplo. En el mismo, desde una url httl://localhost:1234, necesito utilizar un Hub signalR alojado en http://localhost:4316.

   1: <script type="text/javascript">

   2:     $(function () {

   3:         $.support.cors = true;

   4:         $.connection.hub.url = 'http://localhost:4316/signalr/hubs';

   5:         var chat = $.connection.myHub;

   6:         $.connection.hub.start({ jsonp: true}).done(function () {

   7:             console.log("connection started");

   8:             $('#sendmessage').click(function () {

   9:                 chat.server.publishMessage($('#message').val());

  10:             });

  11:         });

  12:     });

  13: </script>

Un resumen sería el siguiente:

  • Habilitar cors en javascript (línea 3)
  • Definir la url de la conexión (línea 4)
  • Inicio la conexión, utilizando jsonp (esto solo es necesario en Chrome)

Sin embargo, esta solución es solo el 50%. Lo siguiente es habilitar las llamadas cross-domain en el server. Antes de la versión 2.0, existía una propiedad del hub bastante autoexplicativa:

var config = new HubConfiguration { EnableCrossDomain = true };

Ahora con SignalR 2.0, también debemos modificar la configuración por defecto de los Hubs, pero en este caso habilitando JSONP.

   1: public partial class Startup

   2: {

   3:     public void Configuration(IAppBuilder app)

   4:     {

   5:         var configuration = new HubConfiguration

   6:         {

   7:             EnableJSONP = true

   8:         };

   9:         app.MapSignalR(configuration);

  10:         ConfigureAuth(app);

  11:     }

  12: }

Done !!! ya tenemos cross domain habilitado para llamadas a hubs de SignalR.

 

Saludos @ Home

El Bruno

image image image Google

2 responses to “[#SIGNALR] HowTo: Utilizar SignalR con llamadas cross-domain entre diferentes websites”

  1. José Guillermo Avatar
    José Guillermo

    Super bien explicado, ya lo probé y si funciona como debe. Lo probé con la aplicación de chat que está en los ejemplos sólo que con el servidor en un proyecto y el cliente en otro.

    Mi siguiente paso es publicarlo y hacer la prueba.
    ¡Muchas gracias!

    Like

    1. Mucha suerte! Verás que con AZURE la publication es genial 😀

      Like

Leave a comment

Discover more from El Bruno

Subscribe now to keep reading and get access to the full archive.

Continue reading