Descargar para leer sin conexión
Subido porMariano Sánchez
Introducción a SignalR
El documento habla sobre la necesidad de aplicaciones en tiempo real y las tecnologías disponibles para lograrlo, como HTML5 WebSockets y SignalR. SignalR abstrae el modelo subyacente de polling y provee un solo modelo de programación para establecer conexiones persistentes entre clientes y servidores utilizando el mejor transporte disponible, ya sea WebSockets o polling. El documento también explica cómo SignalR permite comunicaciones de un-a-muchos a través de Hubs, donde los métodos del servidor pueden invocarse desde el cliente y viceversa.
Más contenido relacionado
Similar a Introducción a SignalR
Introducción a SignalR
- 1.
- 2. ¿Por que necesitamosaplicaciones real-time?
- 5. ¡Los usuarios quierenla ultima informacion AHORA! Twitter – live searches/updates Stock streamers Auctions Live scores Real-time notifications Interactive games Collaborative apps Live user analytics … 6
- 6.
- 7. HTTP no estapreparado… Nunca se diseño para comunicaciones real-time La web es request-response La web es stateless Para solucionar esto se invento HTML5 WebSockets
- 8. HTTP/1.1 200 OK Content-Type:text/plain Transfer-Encoding: chunked Forever Frame – El server le dice al cliente que el response es chuncked – El cliente mantiene la coneccion abierta hasta que el servidor la cierra – El servidor envia los datos al cliente seguido de un 0 – Este proceso consume threads del servidor <script>eval("... ")</script>0 <script>eval("... ")</script>0
- 9. Periodic polling – Cadacierto tiempo el cliente pregunta si hay nuevos datos al servidor utilizando Ajax – El tiempo de latencia minimo esta determiando por el “polling interval” – Desperdicia ancho de banda y latencia Polling interval
- 10. Long polling – Elcliente pregunta pero el servidor no responde hasta que tenga datos nuevos para enviar – El cliente pregunta de nuevo cuando los datos son recibidos o despues de que hay una time out en al coneccion – Consume threads y conexiones del servidor
- 11.
- 12. En definitiva: ¡Muchas opciones! •Forever Frame • Periodic polling • Long polling • HTML5 WebSockets
- 13. SignalR ¡3 en uno! •Conexiones “persistentes” entre cliente y servidor sobre el mejor transporte • Abstrae el modelo de poolling subyasente • Provee un solo modelo de programacion
- 14.
- 15. ¿Que paso? • Elservidor hizo broadcasting del mensaje enviado • Los clientes recibieron los mensajes • ¡El codigo para todo esto es facil! • No hay polling (por lo menos no en el codigo)
- 16. Dos modelos deconexion PersistentConnection Comunica 1..N clientes Es un IHttpHandler Requiere que se defina una ruta Limitado a enviar mensajes El usuario define el “protocolo” Hubs Comunica 1..N clientes Abstraccion sobre PersistentConnection Las rutas se mapean automaticamente (/signalr/hubs) Se pueden enviar mensajes y llamar a metodos SignalR define el protocolo
- 17. Hubs • Los metodosde un Hub se pueden llamar desde el cliente • Los metodos de un cliente se pueden llamar desde el servidor – Se pueden llamar a clientes individuales – Se pueden llamar todos clientes – Se pueden llamar a grupos de clientes
- 18.
- 19.
- 20. Clientes En el servidor Sepuede hostear en cualquier aplicacion ASP.NET En el cliente JavaScript Pero hay mas…
- 21. Clientes En el servidor “SelfHost” WindowsAzure En el cliente JavaScript Cualquier aplicacion .NET Cualquier dispositivo Windows Phone iOS Android
- 22.
- 23.
Notas del editor
- #6 How do you implement these today?
- #10 DEMO: Fiddler con hootsuit.com
- #11 DEMO: Fiddler con facebook.com
- #13 That’s a lot of options, a lot of things to account for and a lot of different programming models. Are you going to do this? Are you still writing separate getDocumentById and AttachEvent methods to work with the DOM? What about jQuery?
- #19 Open the previously created sample Install-Package jQuery.UI.Combined Add a class: [HubName("worker")] public class WorkerHub : Hub { public void startProcessing(Event e) { Caller.notify("We've started processing " + e.EventName); Clients.setProgress(10); for (int i = 0; i <= 100; i++) { SignalR.Hubs.Hub.GetClients<WorkerHub>().setProgress(i); Thread.Sleep(100); } } } Add some HTML: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rel="stylesheet" href="Content/themes/base/jquery.ui.all.css" /> <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR.js" type="text/javascript"></script> <script src="signalr/hubs" type="text/javascript"></script> <script type="text/javascript"> $(function () { var workerHub = $.connection.worker; $('#progressbar').progressbar({ value: 0 }); $('#startWorkTrigger').bind('click', function () { workerHub.startProcessing({ eventName: 'UAN12' }) .fail(function (e) { alert("An error occured: " + e); }); }); workerHub.notify = function (message) { $('#notifications').html(message); }; workerHub.setProgress = function (progress) { $('#progressbar').progressbar({ value: progress }); }; $.connection.hub.start(); }); </script> </head> <body> <div id="progressbar" style="width: 200px;"></div> <div id="notifications" style="width: 200px;"></div> <button id="startWorkTrigger">Start work</button></body> </html>