Construindo apps de tempo real com SignalR

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

© 2013, MVP ShowCast. Evento organizado por MVPs do Brasil com apoio da Microsoft.

MVP ShowCast 2013

Construindo Apps de tempo real com SignalR

Ivan Paulovich

ASP.NET/IIS

Arquiteto de Softwares – BHS

@ivanpaulovich | http://fb.com/ivanpaulovich

http://fb.com/ivanpaulovich

http://mvp.microsoft.com/pt-br/mvp/Victor%20Cavalcante-4030594

https://twitter.com/vcavalcante




Agenda

♦O que é SignalR?♦Comunicação♦Instalação♦Demo!♦SignalR no servidor e no cliente♦Demos e mais demos!♦Referências




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




Comunicação

Aplicação HTMl/JS

$.connection.JogoHub.server.movimentaJogador(..)

MovimentaJogador(..)

Clients.All.AtualizaPosicao()

$.connection.JogoHub.client.atualizaPosicao(..)

Aplicação HTML/JS




Instalação

♦Através Nuget

♦Ou a partir de arquivos dos tipos♦SignalR Hub Class (v2)♦SignalR Persistent Connection Class (v2)

PM> Install-Package Microsoft.AspNet.SignalR




Demo

Importante!Conferir Versão do Javascript do SignalR e

do jQuery




SignalR no servidor e no cliente

♦Hub Class (servidor)♦Hub Proxy (cliente)♦Callbacks, Anomyous Methods




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);

}

}




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>




Demo

♦Movendo Objetos




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




Demo

♦ShootRhttp://shootr.signalr.net/

♦JabbRhttps://jabbr.net

http://shootr.signalr.net/

https://jabbr.net/




Demo

♦Sala de Bate Papo




Demo

♦Comunicação entre dispositivos diferentes




Demo

♦Jogo da Velha




Referências

♦Siga o Damian Edwardshttps://twitter.com/damianedwards

♦ASP.NEThttp://asp.net/signalr

♦SignalR no GitHubhttp://gifthub.com/signalr/signalr

♦Blog 100loop.comhttp://100loop.com

https://twitter.com/damianedwards

http://asp.net/signalr

http://gifthub.com/signalr/signalr

http://100loop.com/

http://100loop.com/




Perguntas & Respostas

Construindo apps de tempo real com SignalR

Education

Transcript of Construindo apps de tempo real com SignalR