MVP ShowCast 2013

1. SESSÃO: DESENVOLVIMENTO
TRILHA: DESENVOLVIMENTO WEB
MVP ShowCast 2013
Construindo Apps de tempo real com SignalR
Ivan Paulovich
ASP.NET/IIS
Arquiteto de Softwares – BHS
@ivanpaulovich | http://fb.com/ivanpaulovich
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

2. SESSÃO: DESENVOLVIMENTO
Agenda
♦ O que é SignalR?
♦ Comunicação
♦ Instalação
♦ Demo!
♦ SignalR no servidor e no cliente
♦ Demos e mais demos!
♦ Referências
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

3. SESSÃO: DESENVOLVIMENTO
O que é SignalR?
♦ Uma camada de abstração para comunicação assíncrona
♦ Permite comunicação bi-direcional
♦ O cliente pode chamar métodos no servidor
♦ O servidor pode chamar métodos do cliente em tempo real
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

4. SESSÃO: DESENVOLVIMENTO
TRILHA: DESENVOLVIMENTO WEB
Comunicação
$.connection.JogoHub.server.movimentaJogador(..)
Aplicação HTMl/JS
MovimentaJogador(..)
Clients.All.AtualizaPosicao()
$.connection.JogoHub.client.atualizaPosicao(..)
Aplicação HTML/JS
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

5. SESSÃO: DESENVOLVIMENTO
Instalação
♦ Através Nuget
PM> Install-Package Microsoft.AspNet.SignalR
♦ Ou a partir de arquivos dos tipos
♦ SignalR Hub Class (v2)
♦ SignalR Persistent Connection Class (v2)
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

6. SESSÃO: DESENVOLVIMENTO
Demo
Importante!
Conferir Versão do Javascript do SignalR e
do jQuery
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

7. SESSÃO: DESENVOLVIMENTO
SignalR no servidor e no cliente
♦ Hub Class (servidor)
♦ Hub Proxy (cliente)
♦ Callbacks, Anomyous Methods
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

8. SESSÃO: DESENVOLVIMENTO
TRILHA: DESENVOLVIMENTO WEB
Hub Class (servidor)
♦ Simples definição do Hub
♦ Implementação dos métodos
♦ Uso intensivo de Anonymous Methods
public class ShapeHub : Hub
{
//
// Recebe mensagens do Cliente
//
public void MoveShape(int x, int y)
{
//
// Envia mensagens para o Cliente
//
this.Clients.Others.updateShape(x, y);
}
}
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

9. SESSÃO: DESENVOLVIMENTO
TRILHA: DESENVOLVIMENTO WEB
Hub Proxy (cliente)
♦ Implementação dos métodos
no cliente “.client”
♦ Pode chamar métodos no
servidor “.server”
<script type="text/javascript">
$(function () {
var shape = $("#shape");
$.connection.hub.start().done(function () {
shape.draggable({
drag: function () {
//
// Envia a nova posição para o servidor
//
$.connection.shapeHub.server.moveShape(
shape.position().left,
shape.position().top);
}
});
});
//
// Recebe as mensagens do servidor
//
$.connection.shapeHub.client.updateShape = function (x, y) {
shape.animate({ left: x, top: y }, { queue: false });
}
});
</script>
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

10. SESSÃO: DESENVOLVIMENTO
Demo
♦ Movendo Objetos
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

11. SESSÃO: DESENVOLVIMENTO
Onde você pode usar?
♦ Apps altamente interativas
♦ Dashboards
♦ Apps com colaboração entre clientes
♦ Jogos
♦ Dispositivos
♦
♦
♦
♦
♦
Windows Phone
Mobile
Desktop (Chrome, Opera, Firefox, IE)
Aplicativos .NET
IOs
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

12. SESSÃO: DESENVOLVIMENTO
Demo
♦ ShootR
http://shootr.signalr.net/
♦ JabbR
https://jabbr.net
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

13. SESSÃO: DESENVOLVIMENTO
Demo
♦ Sala de Bate Papo
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

14. SESSÃO: DESENVOLVIMENTO
Demo
♦ Comunicação entre dispositivos diferentes
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

15. SESSÃO: DESENVOLVIMENTO
Demo
♦ Jogo da Velha
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

16. SESSÃO: DESENVOLVIMENTO
Referências
♦ Siga o Damian Edwards
https://twitter.com/damianedwards
♦ ASP.NET
http://asp.net/signalr
♦ SignalR no GitHub
http://gifthub.com/signalr/signalr
♦ Blog 100loop.com
http://100loop.com
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB

17. SESSÃO: DESENVOLVIMENTO
Perguntas & Respostas
© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.
TRILHA: DESENVOLVIMENTO WEB