SignalR en asp.net

SignalRApp

SignalR es una libreria para Asp.Net que simplifica los procesos para adiconar funcionalidades en tiempo real a nuestras aplicaciones.  Imaginemos el caso simple de un chat el cual envia mensajes en tiempo real entre varios usuarios. para este tipo de aplicacion se puede implementar Signalr; Con esta libreria puedes implementar .Net Framework como servidor de BakEnd  y Javascript entre como servidor de FontEnd.

Para implementar un simple proyecto con SignalR se realizan los siguientes pasos:
1) Con la consola de de administracion de paquetes primero instalamos todos los paquetes necesarios de SignalR
Install-Package Microsoft.AspNet.SignalR

2) Una vez realizada la instalacion de los paquetes de Signal Creamos nuestra clase que hereda de Hub.

  public class Chat : Hub
  {
       public void Send(string message)
      {
          // Call the addMessage method on all clients
          Clients.All.addMessage(message);
      }
  }

3) Despues se configura la tabla de ruta en el archivo Global.asax

using System;
using System.Web.Routing;

namespace SampleWebApplication
{
    public class Global : System.Web.HttpApplication
    {
        protected void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.MapHubs();
        }
    }
}

4) Ahora la configuracion por parte del cliente, adicion del codigo Javascript y Html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.signalR-1.0.1.min.js"></script>
<!--  If this is an MVC project then use the following -->
<!--  <script src="~/signalr/hubs" type="text/javascript"></script> -->
<script type="text/javascript" src="signalr/hubs"></script>
<script type="text/javascript">// <![CDATA[
    $(function () {
        // Proxy created on the fly
        var chat = $.connection.chat;

        // Declare a function on the chat hub so the server can invoke it
        chat.client.addMessage = function (message) {
            $('#messages').append('<li>' + message + '</li>');
        };

        // Start the connection
        $.connection.hub.start().done(function() {
            $("#broadcast").click(function () {
                // Call the chat method on the server
                chat.server.send($('#msg').val());
            });
        });
    });
// ]]></script></pre>
<div><input id="msg" type="text" />
 <input id="broadcast" type="button" value="broadcast" />
<ul id="messages"></ul>
</div>
<pre>

Tener en cuenta:

  • Realizar la referencia javascript al jquery.signalR
  • <script type="text/javascript" src="Scripts/jquery.signalR-1.0.1.min.js"></script>
  • Realizar la referencia javascript al maproute
  • <script type="text/javascript" src="signalr/hubs"></script>
  • Inicializar el Hub
  • var chat = $.connection.chat;

Al terminar el proyecto compilamos y obtendremos un simple chat construido con SignalR.

Espero sea productivo el post, para mayor informacion recomiendo visitar las siguietnes paginas.

Anuncios