Construindo apps de tempo real com SignalR

Post on 27-Jun-2015

312 views 2 download

description

MVP ShowCast 2013

Transcript of 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

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

Agenda

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

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

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

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

Comunicação

Aplicação HTMl/JS

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

MovimentaJogador(..)

Clients.All.AtualizaPosicao()

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

Aplicação HTML/JS

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

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

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

Demo

Importante!Conferir Versão do Javascript do SignalR e

do jQuery

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

SignalR no servidor e no cliente

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

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

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

}

}

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

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>

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

Demo

♦Movendo Objetos

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

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

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

Demo

♦ShootRhttp://shootr.signalr.net/

♦JabbRhttps://jabbr.net

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

Demo

♦Sala de Bate Papo

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

Demo

♦Comunicação entre dispositivos diferentes

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

Demo

♦Jogo da Velha

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

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

SESSÃO: DESENVOLVIMENTO

TRILHA: DESENVOLVIMENTO WEB

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

Perguntas & Respostas