construindo apps com asp.net signalr

19
Construindo Apps com ASP.NET SignalR IVAN PAULOVICH - MVP ASP.NET [email protected] http://facebook.com/ivan.paulovich @ivanpaulovich

Upload: ivan-paulovich

Post on 24-May-2015

377 views

Category:

Technology


7 download

TRANSCRIPT

Page 1: Construindo Apps com ASP.NET SignalR

Construindo Apps com ASP.NET SignalRIVAN PAULOVICH - MVP ASP.NET

[email protected]

http://facebook.com/ivan.paulovich

@ivanpaulovich

Page 2: Construindo Apps com ASP.NET SignalR

Ivan Paulovich

Page 3: Construindo Apps com ASP.NET SignalR

Agenda

O que é SignalR?

Demo!

SignalR no servidor e no cliente

Demo!

Demo!

Demo!

Page 4: Construindo Apps com ASP.NET SignalR

O que é SignalR?

Uma camada de abstração para comunicação assíncrona com ASP.NET

Permite comunicação bi-directional

O cliente pode chamar o servidor (trivial)

O servidor pode chamar métodos do cliente em tempo real (incrivelmente simples)

Page 5: Construindo Apps com ASP.NET SignalR

Instalação via Nuget

1. New Empty Web Application

2. Instalar via Nuget

PM> Install-Package Microsoft.AspNet.SignalRPM> Install-Package jquery

Page 6: Construindo Apps com ASP.NET SignalR

Modelo de Comunicação

Page 7: Construindo Apps com ASP.NET SignalR

Demo

Bolsa de Valores

Conferir Versão do Javascript

Page 8: Construindo Apps com ASP.NET SignalR

SignalR no servidor e no cliente

Instalação

Modelo de Comunicação

Hub

Callbacks no Cliente

Page 9: Construindo Apps com ASP.NET SignalR

Hub

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

}

}

Simples definição do Hub

Implementação dos métodos

Uso intensivo de Anonymous Methods

Page 10: Construindo Apps com ASP.NET SignalR

Hub no Cliente

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

Implementação dos métodos no cliente “.client”

Pode chamar métodos no servidor “.server”

Page 11: Construindo Apps com ASP.NET SignalR

Poucas linhas de código para criar um app multicliente . Simplesmente incrível!

Page 12: Construindo Apps com ASP.NET SignalR

Demo

Movendo Objetos

Page 13: Construindo Apps com ASP.NET SignalR

Onde você pode usar?

Apps altamente interativas Dashboards

Apps multicliente

Comunicação em tempo real entre diferentes dispositivos IOs

Windows Phone

Desktop

Mobile

Chrome, Opera, Firefox, IE

Jogos

Page 14: Construindo Apps com ASP.NET SignalR

Demo

ShootRhttp://shootr.signalr.net/

JabbRhttps://jabbr.net

Page 15: Construindo Apps com ASP.NET SignalR

Demo

Sala de Bate Papo

Page 16: Construindo Apps com ASP.NET SignalR

Demo

Clientes em dispositivos diferentes

Page 17: Construindo Apps com ASP.NET SignalR

Demo

Jogo da Velha

Page 18: Construindo Apps com ASP.NET SignalR

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

Page 19: Construindo Apps com ASP.NET SignalR

Obrigado!

Entre em contato no www.100loop.com ou no [email protected]