Aplicaciones interactivas

multiusuario en tiempo real

Jos Mara Aguilar
2
Consultor & Desarrollador independiente
Tutor y autor de cursos de CampusMVP
ASP.NET MVC
Certificacin 70-516 TS (Acceso a datos .NET 4)

www.variablenotfound.com
josemariaaguilar@gmail.com
twitter @jmaguilar
2
Contenidos
Introduccin
Funcionamiento y limitaciones de HTTP
Tecnologa PUSH
Nuevos estndares en el horno
Y qu podemos hacer mientras tanto?
SignalR
Conexiones persistentes /* code */
Hubs /* code */
Hosts /* code */
Clientes /* code */
3
HTTP: el cliente manda
Modelo peticin/respuesta originada en cliente (pull)
4
Admite asincrona (Ajax)
HTTP HTTP HTTP
Web Web Web
Proceso Proceso Proceso
Web
P
e
t
i
c
i

n
P
e
t
i
c
i

n
P
e
t
i
c
i

n H
T
M
L
H
T
M
L
H
T
M
L
HTTP HTTP HTTP HTTP
HTTP
Web Web
Proceso Proceso
P
e
t
i
c
i

n
P
e
t
i
c
i

n H
T
M
L
J
s
o
n
Proceso
P
e
t
i
c
i

nH
T
M
L
Proceso
P
e
t
i
c
i

n
X
M
L
Proceso
P
e
t
i
c
i

n
J
s
o
n
Pero no siempre da la talla
Mensajera instantnea, chats
Herramientas colaborativas
Sistemas de monitorizacin/notificacin
Juegos online multiusuario
Informacin en tiempo real:
bolsa, noticias, deportes, apuestas, estadsticas

HTTP no est orientado al tiempo real!

5
HTTP HTTP HTTP HTTP
HTTP
Web Web
Proceso Proceso
P
e
t
i
c
i

n
P
e
t
i
c
i

n H
T
M
L
J
s
o
n
Proceso
P
e
t
i
c
i

nH
T
M
L
Proceso
P
e
t
i
c
i

n
X
M
L
Proceso
P
e
t
i
c
i

n
J
s
o
n
Aplicaciones multiusuario,
asncronas en tiempo real
Polling: la solucin?
Aprovecha las ventajas de HTTP
Intervalos de actualizacin cortos Muchos recursos
Intervalos de actualizacin largos Peor interaccin




6
H
T
T
P
HTTP

N
o
v
e
d
a
d
e
s
?
N
o
HTTP

N
o
v
e
d
a
d
e
s
?
N
o
HTTP

N
o
v
e
d
a
d
e
s
?

#
1
:

H
o
l
a
!

HTTP

N
o
v
e
d
a
d
e
s
?
N
o
Cliente #1
Cliente #2

H
o
l
a
!

Chat server
C
o
n
e
x
i

n
A
c
t
u
a
l
i
z
a
c
i

n
A
c
t
u
a
l
i
z
a
c
i

n
A
c
t
u
a
l
i
z
a
c
i

n
Proceso servidor
A
c
t
u
a
l
i
z
a
c
i

n
Proceso Proceso Proceso Proceso
Push: la iniciativa es del servidor
Es un concepto.
Servidor Elemento activo en la comunicacin.
"Ideal": comunicacin por sockets iniciada por servidor

7
A
c
t
u
a
l
i
z
a
c
i

n
A
c
t
u
a
l
i
z
a
c
i

n
A
c
t
u
a
l
i
z
a
c
i

n
Proceso servidor
Proceso Proceso
A
c
t
u
a
l
i
z
a
c
i

n
Proceso Proceso
C
o
n
e
x
i

C
o
n
e
x
i

C
o
n
e
x
i

C
o
n
e
x
i

Conexin desde servidor bajo demanda Conexin persistente desde cliente
Estndares (I): WebSockets
Estndares:
API: W3C
Protocolo: IETF
Conexin persistente
iniciada por el cliente
Canal full duplex
Inconvenientes:
No es versin definitiva
No soportado por todos los navegadores
Requiere cambios en servidores, proxies e intermediarios
8
W
e
b
S
o
c
k
e
t
s
Proceso servidor
C
o
n
e
x
i

n
A
c
t
u
a
l
i
z
a
c
i

n
A
c
t
u
a
l
i
z
a
c
i

n
A
c
t
u
a
l
i
z
a
c
i

n
Proceso Proceso Proceso
Estndares (I): WebSockets
9
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function () {
// Web Socket is connected, send data using send()
ws.send("Message to send");
alert("Message is sent...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("Message is received...");
};
ws.onclose = function () {
// websocket is closed.
alert("Connection is closed...");
};
Implementacin (javascript):
Estndares (y II): Server-sent events
API de la W3C
Canal unidireccional
Servidor Cliente
Iniciado por el cliente
mediante script
Usa el content-type
text/event-stream
Inconvenientes:
Es un borrador
No soportado por todos los navegadores
Puede requerir cambios en proxies e intermediarios
10
H
T
T
P
Proceso servidor
S
u
s
c
r
i
p
c
i

n
E
v
e
n
t
o
E
v
e
n
t
o
Proceso Proceso
E
v
e
n
t
o
Proceso
Estndares (y II): Server-sent events
Implementacin (javascript):
11
var source = new EventSource('/getevents');
source.onmessage = function (event) {
alert(event.data);
};
Push hoy
Necesitamos:
Conseguir las funciones Push
Soporte de navegadores e infraestructura
Aprovechar las ventajas de HTTP
Muchas tecnologas:
Comet, HTTP Push, Reverse Ajax, Ajax Push,
Two-way web, HTTP Streaming
Mltiples tcnicas (no todas aplicables de forma universal):
Long polling
Forever frame
XHR Streaming

12
Long polling
Similar al polling
Conexin abierta mientras
no haya actualizaciones
Ventajas:
Usa HTTP
Crossbrowser
Bajo retardo
Ms eficiente que polling
Inconvenientes:
Recursos de conexin abierta
Timeouts
13
H
T
T
P
HTTP

N
o
v
e
d
a
d
e
s
?

#
1
:

H
o
l
a
!

HTTP

N
o
v
e
d
a
d
e
s
?
Cliente #1
Cliente #2

H
o
l
a
!

Chat server
H
T
T
P

S
o
y

J
u
a
n

#
1
:

S
o
y

J
u
a
n

HTTP

N
o
v
e
d
a
d
e
s
?
Conexin abierta forever
"Streaming" de scripts
Ventajas:
Crossbrowser
Menor retardo
Inconvenientes
Conexin abierta
Timeouts / buffering
Deteccin de problemas de conexin
Uso de memoria en conexiones largas (tamao del frame)


Forever frame
14
H
T
T
P
HTTP G
E
T

/
f
o
r
e
v
e
r
<script>
addMsg(1, Hola!);
</script>
Cliente #1
Cliente #2

H
o
l
a
!

Chat server
H
T
T
P

S
o
y

J
u
a
n

<iframe src=/forever>
<script>
addMsg(1, Soy Juan);
</script>
Pero Push no es todo
Otros requisitos de aplicaciones multiusuario,
asncronas, interactivas, y en tiempo real:
Gestionar usuarios conectados
Gestionar "suscripciones"
Recibir y procesar acciones
Realizar seguimiento de envos

Demasiado trabajo, no?
15
Introducing SignalR
"Async signaling library for .NET to help build
real-time, multi-user interactive web applications"
Creado por dos miembros del equipo de ASP.NET
David Fowler
Damian Edwards
Versin 0.5 (mayo 2012)
Ejemplo en http://jabbr.net
Open source: Licencia MIT
Cdigo en GitHub: http://github.com/signalr
En el futuro, parte de ASP.NET





16
Qu ofrece SignalR?
17
Envo de mensajes en tiempo real cliente <-> servidor
sobre una "conexin persistente"
Usando la mejor opcin disponible:
Capacidades del Cliente & Servidor
Modelo de programacin unificado
Bus de mensajera
Bibliotecas cliente

Long polling
Server-sent
events
Forever
frame
WebSockets
Conexin SignalR
Dos niveles de abstraccin
18
Transportes
Conexiones persistentes
Long polling
Server-sent
events
Forever
frame
WebSockets
Hubs
Protocolos internet
A
b
s
t
r
a
c
c
i

n
Conexiones persistentes
19
Bajo nivel
Experiencia similar a sockets
Conexin
Desconexin
Envo
Recepcin asncrona de mensajes
Mensajes de bajo nivel ("raw")
Nosotros interpretamos los mensajes

Transportes
Conexiones persistentes
Long polling
Server-sent
events
Forever
frame
WebSockets
Hubs
Protocolos internet
A
b
s
t
r
a
c
c
i

n
Funcionamiento
20
Servidor (Conexin persistente) Cliente (javascript)
var conn = $.connection(MyConn);
conn.start();
conn.send(hi, all!);
conn.receive(function(text) {
$(#log)
.append(<li>+text+</li>);
});
class MyConn: PersistentConnection
{
override Task OnConnectedAsync() { }
override Task OnReceivedAsync(string data)
{
return Connection.Broadcast(data);
}
override Task OnDisconnectAsync() { ... }
}
Demo 1: Conexiones persistentes
21

Creacin de un Web Chat

Hubs
22
Mucha mayor abstraccin
Diferencias:
Heredan de "Hub"
No hace falta routing
Mensajes de alto nivel
Llamadas a mtodos entre cliente y servidor
Ilusin de continuidad


Transportes
Conexiones persistentes
Long polling
Server-sent
events
Forever
frame
WebSockets
Hubs
Protocolos internet
A
b
s
t
r
a
c
c
i

n
Funcionamiento
23
Servidor
(Hub)
Cliente (javascript)
var chat = $.connection.chatHub;
$.connection.hub.start();
chat.enviar(hi, all!);
chat.recibir = function(text) {
$(#log)
.append(<li>+text+</li>);
};
Proxy
class ChatHub: Hub
{
public void enviar(string text)
{
Clients.recibir(text);
}
}
Demos 2-3: Hubs
24

Pizarra compartida
Hoja de clculo multiusuario

Hubs desde otros procesos
25
Hasta ahora, realizamos envos desde el propio hub
Respuesta a acciones de clientes
Es posible desde componentes externos
Se obtiene una referencia al Hub
Se invocan los mtodos de cliente



Tambin es vlido para conexiones persistentes
var hub = SignalR.GlobalHost
.ConnectionManager.GetHubContext<MyHub>();

hub.Clients.myMethod(a, b, c);
Demos 5-6-7: Uso externo de hubs
26
Envo de datos desde proceso background
Envo de datos desde Webforms
Barra de progreso en tiempo real

Self-hosting
27
Cualquier aplicacin .NET servidor SignalR
Paquete SignalR.Hosting.Self
class Program
{
static void Main(string[] args)
{
var server = new Server("http://localhost:6666/");
server.MapHubs();

server.Start();
Console.WriteLine("Servidor activo.");
Console.ReadKey();
server.Stop();
}
}
Clientes SignalR
28
SignalR no est limitado a clientes web
Varias implementaciones:
Aplicaciones .NET
Windows Phone
Silverlight
iOS (Objective-C)
Android (basado en Monodroid)
Java

Demo 8: Cliente Signalr
29

Cliente de Pizarra compartida
Windows Forms

Y por ltimo
30
Escalabilidad:
Performance tunning (IIS/ASP.NET)
Azure Service Bus
Redis
Futuro: NServiceBus, SQL Server Service Broker

Prximos pasos:
Performance Improvements In the box WebSockets support for Windows8 Windows
8 .NET Client .NET Micro Framework Client Web API Host Build time hubs.js
generation (instead of runtime) Better network availability handling Better Mobile
support (optimized for battery life) Web Forms control


Enlaces
WebSockets
IEFT: http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17
W3C: http://dev.w3.org/html5/websockets/
Server-Sent Events
W3C: http://dev.w3.org/html5/eventsource
jQuery/Scripts:
jQuery: http://jquery.org
jQuery deferred object: http://api.jquery.com/category/deferred-object/
HighCharts: http://www.highcharts.com/
SignalR:
En Github: http://github.com/SignalR
Performance tunning: https://github.com/SignalR/SignalR/wiki/Performance
Demo: http://jabbr.net/
31
Muchas gracias! :-)
www.variablenotfound.com
josemariaaguilar@gmail.com
twitter @jmaguilar
32
Jos Mara Aguilar