Notificando a clientes desde el lado de servidor usando SignalR
Como pudimos ver en el artículo anterior, SignalR nos provee abstracciones sobre los transportes requeridos para crear aplicaciones de tiempo real. El cual como primera instancia hace uso de Web Sockets y en caso de que no se disponga de esta capacidad, entonces puede hacer un “fallback” hasta encontrar una capa de transporte que él pueda utilizar.
En esta ocasión crearemos una aplicación la cual podrá notificar a sus clientes de alguna actualización ocurrida en el lado del servidor. Si queremos imaginarnos un escenario que nos ayude a ilustrar esta situación, tomemos una aplicación para saber los precios de las acciones para una empresa determinada: Por un lado tenemos el back end el cual accede a la información y se encarga de notificar a los clientes de que se ha producido un cambio en los valores, mientras que por otro lado podríamos tener una aplicación Web la cual se encarga de desplegar la información.
Partamos primero con el HTML, para este caso vamos a hacer algo super sencillo. Básicamente es un DIV con un listado (LI) en el cual presentaremos los valores:
1 <h1>Recibiendo mensajes...</h1>
2 <br />
3
4 <div>
5 <ul id="notificaciones">
6
7 </ul>
8 </div>
Ahora crearemos el back end, encargado de consultar la información para posteriormente notificar a los clientes de la actualización.
1 public class Notificador : Hub
2 {
3 public void SendNotification()
4 {
5 Random rand = new Random();
6
7 while (true)
8 {
9 int value = rand.Next(100);
10
11 string data = string.Format("El valor aleatorio es: {0}", value);
12 Clients.All.getNotification(data);
13
14 //Simulando una conexión a una base de datos...
15 System.Threading.Thread.Sleep(1000);
16 }
17 }
18 }
Aquí podemos ver que creamos una clase llamada "Notificador”, la cual hereda de Hub (namespace Microsoft.AspNet.SignalR.Hubs) como les comentaba en el artículo anterior, está clase nos provee un framework RPC de alto nivel sobre una conexión persistente. Por otra parte “Clients” es un objeto que nos permite tener una relación entre el lado del cliente y el lado del servidor, por lo cual el método getNotification en realidad es un método que existirá en el lado de JavaScript.
Volviendo a nuestro archivo HTML, vamos a incluir los siguientes elementos de JavaScript entre los elementos <head>:
1 <script src="Scripts/jquery-1.6.4.min.js"></script>
2 <script src="Scripts/jquery.signalR-1.0.0-rc1.min.js"></script>
3 <script src='signalr/hubs' type="text/javascript"></script>
4
5 <script type="text/javascript">
6 $(function () {
7 var connection = $.connection.notificador;
8
9 connection.client.getNotification = function (data) {
10 $('#notificaciones').append('<li>' + data + '</li>');
11 }
12
13 $.connection.hub.start().done(function () {
14 connection.server.sendNotification();
15 });
16 });
17 </script>
En esta sección, es importante destacar lo siguiente:
- Necesitamos agregar referencias a jQuery y jQuery.SignalR
- Además hacemos referencias a los Hubs de signalR mediante la siguiente declaración:
- Aquí vemos que se define el método getNotification el cual hacíamos referencia desde C#. Este método lo que hace es utilizar los datos enviados desde el lado del servidor para finalmente desplegarlo dentro del listado (LI).
- Finalmente iniciamos el hub mediante el método start, el cual se encargará de llamar por primera vez al método “sendNotification” existente en el lado de servidor.
Finalmente para que nuestra aplicación funcione, en el archivo global.asax específicamente en el evento Application_Start agregaremos la ruta a los Hubs de signalR.
1 protected void Application_Start(object sender, EventArgs e)
2 {
3 RouteTable.Routes.MapHubs();
4 }
Una vez ejecutada la aplicación veremos como esta comienza a recibir datos periódicamente, lo interesante de SignalR es que si otro cliente visualiza la aplicación al mismo tiempo también recibirá dichas notificaciones.
