La evolución en el mundo de las Aplicaciones es constante y rápido y los usuarios cada vez requieren funcionalidades más exigentes. Muchas de las Applicaciones destacadas en la tienda hacen un correcto uso de respuesta inmediata, famosos chats, famosos juegos donde ambos oponentes dibujan en tiempo real, etc. ¿Quieres aprender a realizar este tipo de Aplicaciones?. Si quieres aprender como realizar en Windows Phone 8 y Windows 8 Aplicaciones que funcionen en tiempo real utilizando SignalR, no te pierdas esta sesión!

1. SignalR y Apps
móviles
Introducción al desarrollo de apps
móviles real time haciendo uso de
signalR
Javier Suárez @JSuarezRuiz
CartujaDotNet

2. El problema
®

3. El problema
®

4. ¿HTTP al rescate?
¡HTTP no está orientado al tiempo real!
®

5. Polling: ¿la solución?
• Aprovecha las ventajas de HTTP
• Intervalos de actualización cortos  Muchos recursos
®
• Intervalos de actualización largos  Peor interacción

6. Web Sockets
®

7. Push hoy
®

8. Pero no es todo…
®

9. Demasiado, ¿verdad?

10. Real-time SignalR

11. ¿Qué es SignalR?
Librerías open-source que añaden una capa de
abstracción alrededor de las conexiones
[Y en castellano, por favor]
persistentes HTTP
SignalR permite crear Apps en tiempo real de una
manera sumamente fácil
®

12. SignalR
 Código en GitHub: http://github.com/signalr
®

13. ¿Que nos aporta?
®

14. SignalR
®

15. Basicamente…
®

16. Nos centramos en la parte
servidor y cliente Jquery

17. Requisitos para el servidor
Windows Server 2012 (WebSockets)
• Windows Server 2008 r2.
• Windows 8 (WebSockets)
• Windows 7
•
.NET 4
• .NET 4.5 (WebSockets)
•
•
IIS 7* / 8
Microsoft /web
®

18. Comenzamos. Instalación.
RouteTabRouteTable.Routes.MapHubs()
®
Application_Start

19. Comenzamos. Configuración.
protected void Application_Start()
{
RouteTable.Routes.MapHubs();
//More code
}
<script src=http://code.jquery.com/jquery-1.8.2.min.js
type="text/javascript"></script>
<script src="Scripts/jquery.signalR-2.0.0.0.min.js"
type="text/javascript"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
®

20. Comenzamos. Connection y Hub.
®

21. Conexiones vs Hubs
•
Conexiones persistentes
Bajo nivel
Experiencia similar a sockets
• Conexión
• Desconexión
• Envío
• Mensajes de bajo nivel ("raw")
 Nosotros interpretamos los mensajes
•
•
•
Hubs
•
•
Mucha mayor abstracción
Diferencias:
•
•
•
Heredan de "Hub"
No hace falta routing
Mensajes de alto nivel
 Llamadas a métodos entre cliente y servidor
 Ilusión de continuidad
Microsoft /web
®
Abstracción
Hubs
Conexiones persistentes
Transportes
Forever
frame
Long polling
Server-sent
events
Protocolos internet
WebSockets

22. Conexiones
Cliente (javascript)
var conn = $.connection(“MyConn”);
conn.start();
Servidor (Conexión persistente)
class MyConn: PersistentConnection
{
override Task OnConnectedAsync() { … }
conn.send(“hi, all!”);
conn.receive(function(text) {
$(“#log”)
.append(“<li>”+text+”</li>”);
});
Microsoft /web
®
override Task OnReceivedAsync(string data)
{
return Connection.Broadcast(data);
}
override Task OnDisconnectAsync() { ... }
}

23. Hubs
Cliente (javascript)
Servidor
(Hub)
var chat = $.connection.chatHub;
$.connection.hub.start();
Proxy
chat.enviar(“hi, all!”);
chat.recibir = function(text) {
$(“#log”)
.append(“<li>”+text+”</li>”);
};
Microsoft /web
®
class ChatHub: Hub
{
public void enviar(string text)
{
Clients.recibir(text);
}
}

24. Comenzamos. Hub.
®

25. Comenzamos. Cliente.
Clients
public void SendMessage(string message)
{
var msg = string.Format("{0}: {1}",
Context.ConnectionId, message);
Clients.All.newMessage(msg);
}
®

26. Comenzamos. Cliente Jquery.
/signalr/hubs
$.connection
$.connection.chatHub
$.connection.hub.start()
$.connection.hub.start({ transport: 'longPolling'});
var chat = $.connection.chat;
chat.server.joinRoom('private');
®

27. Comenzamos. Cliente Jquery.
var chat = $.connection.chat;
chat.client.newMessage = onNewMessage;
function addMessage(message) {
$('#messages').append(message);
}
®

28. Demo
Crear un Chat con SignalR.
Cliente Jquery.

29. SignalR no está limitado a
clientes web
Otros Clientes

30. Se puede usar en
®

31. SignalR
CLIENTES
HOSTS
®

32. Demo
Clientes Windows Phone 8 y
Windows 8 de nuestro Chat

33. Preguntas y respuestas
¿Dudas?
P&R
33

34. Más Información
• @SignalR
• Twitter feed
• Signalr.net
• Website
• ASP.NET/SignalR
• Microsoft’s content/tutorials
• http://t.co/oHWaZb2a47
• E-Book de Jose María Aguilar

35. 10% de descuento
En todos nuestros cursos y libros
Sólo durante los próximos 15 días
Introduce el cupón ESRM5NUB al realizar
tu compra en nuestra tienda online.
www.campusmvp.es
CURSO ONLINE: Aplicaciones móviles con HTML5, Backbone y PhoneGap
CURSO ONLINE : Single Page Applications
CURSO ONLINE : Desarrollo Web con ASP.NET MVC4 …. Y muchos más

36. Contacto
• Web
• www.javiersuarezruiz.wordpress.com
• http://geeks.ms/blogs/jsuarez/
• Email
• javiersuarezruiz@hotmail.com
• Twitter
• @jsuarezruiz

37. Gracias por vuestro tiempo!
SignalR y Apps
móviles