64

Comet - ReverseAjax com DWR - Resumo

Embed Size (px)

Citation preview

Page 1: Comet - ReverseAjax com DWR - Resumo
Page 2: Comet - ReverseAjax com DWR - Resumo

Handerson Frota – Analista Programador;Sócio Fundador da Triadworks;Atualmente Analista Programador da IVIA;Envolvido na programação desde os 13 anos iniciando com C, web desde 1997 e com Java desde 2001;Entusiasta Java e Ajax;Colunista da DevMedia, com artigos e vídeo aulas;Coordenador e Fundador da Célula Java na Faculdade Lourenço Filho;Já atuou em vários projetos de médio e grande porte exercendo as funções de: Programador, Analista, Arquiteto e Líder Técnico;

Page 3: Comet - ReverseAjax com DWR - Resumo

Conceitos Gerais.O que é COMET ?Mas quem utiliza COMET ?Tecnologias.Recomendações.Algumas implementações.COMET ou ReverseAjax ?Configurando o DWR.Exemplo de um Chat.Exemplo de um Relógio.Exemplo de um Login.Considerações Finais.

Page 4: Comet - ReverseAjax com DWR - Resumo
Page 5: Comet - ReverseAjax com DWR - Resumo

Para falar sobre COMET precisamos antes entender como uma comunicação Ajax funciona;

Entender como os conceitos são aplicados;

E quais os conceitos aplicados;

Page 6: Comet - ReverseAjax com DWR - Resumo

Existem 3 maneiras de comunicar utilizando Ajax:

1.Polling

2. Piggyback

3. Comet

Page 7: Comet - ReverseAjax com DWR - Resumo

Polling – (Ativo)

Quando o navegador(cliente) faz pedidos ao servidor em intervalos regulares e freqüentes.

Gerando assim um tráfico extra e pesado na rede.

Page 8: Comet - ReverseAjax com DWR - Resumo

Servidor você tem alguma atualização pra

mim ?

SIM

NÃO

Page 9: Comet - ReverseAjax com DWR - Resumo

Piggyback – (Passivo)

O servidor tendo alguma atualização para o cliente aguarda até que o cliente faça uma nova solicitação, então ele “aproveita” para enviar juntamente com a respostas do cliente a sua atualização.

Não gera tráfego extra, em contra partida é muito demorado.

Page 10: Comet - ReverseAjax com DWR - Resumo

Servidor me dê um sanduíche.

Receba seu sanduíche e refrigerante.

Tenho refrigerante !

Page 11: Comet - ReverseAjax com DWR - Resumo
Page 12: Comet - ReverseAjax com DWR - Resumo

Comet – (Ativo)

O servidor fica responsável em atualizar a qualquer momento o cliente.

Uma única conexão é aberta e mantida pelo servidor.

Page 13: Comet - ReverseAjax com DWR - Resumo

Ele se utiliza basicamente de duas estratégias:

1.Streaming;

2.Long polling;

Page 14: Comet - ReverseAjax com DWR - Resumo

1. Streaming

O navegador abre uma única conexão persistente

para o servidor para todos os eventos que se utilizam do COMET.

Quando o servidor envia algum evento a conexão

não é fechada.

Page 15: Comet - ReverseAjax com DWR - Resumo

2. Long polling

O navegador faz um pedido para o servidor, que é mantido em aberto até que o servidor tenha novos dados a ser enviado.

Após enviar um evento, o servidor encerra a conexão e imediatamente o navegador abre uma nova.

Page 16: Comet - ReverseAjax com DWR - Resumo

Seja qual for a técnica, o servidor é capaz deenviar novas informações com baixa latência;

Streaming é considerado de melhor desempenho comparado ao Long Polling;

Page 17: Comet - ReverseAjax com DWR - Resumo

Navegador receba novas atualizações.

Opa, tenho novas

atualizações !

Page 18: Comet - ReverseAjax com DWR - Resumo
Page 19: Comet - ReverseAjax com DWR - Resumo
Page 20: Comet - ReverseAjax com DWR - Resumo

Uma aplicação utilizando COMET pode entregar os

dados para o cliente a qualquer momento, não apenas na resposta às informações fornecidas pelo usuário(navegador).

Page 21: Comet - ReverseAjax com DWR - Resumo
Page 22: Comet - ReverseAjax com DWR - Resumo

Programas de Chat: Gmail, Meebo, Yahoo etc.

Page 23: Comet - ReverseAjax com DWR - Resumo

Gmail usa para atualizar as conversas por email;

Page 24: Comet - ReverseAjax com DWR - Resumo

Google Docs usa para exibir as ações de outros colaboradores;

Gpokr para jogos on-line;

Linkedin, Polar Rose...

Dentre outros...

Page 25: Comet - ReverseAjax com DWR - Resumo
Page 26: Comet - ReverseAjax com DWR - Resumo

Jetty (Java) Twisted Python Grizzly – Glassfish Plugin Lighttpd Perbal

Page 27: Comet - ReverseAjax com DWR - Resumo

Cometd(Bayeux) mod_pubsub Lightstreamer

Page 28: Comet - ReverseAjax com DWR - Resumo

DWR(Java) Juggernaut(Rails) Nevow(Python)

Page 29: Comet - ReverseAjax com DWR - Resumo
Page 30: Comet - ReverseAjax com DWR - Resumo

O COMET pode ser utilizado em vários tipos de ambientes e plataformas compatíveis.

Mas existem determinados frameworks e servidores que tem uma integração maior com

ele;

Essa integração pode ser em forma de facilidade na codificação, performance dos métodos e facilidade de implementar.

Page 31: Comet - ReverseAjax com DWR - Resumo

Temos N frameworks e API´s que trabalham com COMET, mas alguns se destacam por todos os parâmetros citados anteriormente.

Jetty, DWR e COMETD(Bayeux) são os que mais possuem benefícios para esse método;

Page 32: Comet - ReverseAjax com DWR - Resumo
Page 33: Comet - ReverseAjax com DWR - Resumo

Dojo client implementation

dojox.cometd.init(serverUrl);dojox.cometd.publish(“/topic”, {/* payload */});dojox.cometd.subscribe(“/topic”, function(){/* ... /* });

Page 34: Comet - ReverseAjax com DWR - Resumo

package dojox.cometd;

public interface Bayeux {

void publish(Client formClient, String toChannel,Object data, String idMsg);

void subscribe(String toChannel, Client subscriber);

...}

Page 35: Comet - ReverseAjax com DWR - Resumo

Collection sessions = context.getScriptSessionsByPage(url);

ScriptProxy proxy = new ScriptProxy(sessions);proxy.addFunctionCall(“updateCallers”, call);

Page 36: Comet - ReverseAjax com DWR - Resumo

Collection sessions = context.getScriptSessionsByPage(url);

Effect e = new Effect(sessions);e.fade(“clientId”);

Page 37: Comet - ReverseAjax com DWR - Resumo

Collection sessions = context.getScriptSessionsByPage(url);

Server server = GI.getServer(sessions, “appname”);Button button = server.getJSXById(“button”, Button.class);Button.setEnabled(Form.STATEDISABLED, true);

Page 38: Comet - ReverseAjax com DWR - Resumo

<p>Conta corrente:<span id=“contaID”></span>

<p>

import org.directwebremoting.dwr.Util;

Util.setValue(“contaID”, 100);

Page 39: Comet - ReverseAjax com DWR - Resumo

import org...scriptaculous.Effect;

Effect.shake(“contaID”, 100);

<p>Conta corrente:<span id=“contaID”></span>

<p>

Page 40: Comet - ReverseAjax com DWR - Resumo

import jsx3.gui.*;

Server s = GI.getServer(“app”);Button b = s.getJSXById(“id”,

Button.class);b.setEnabled(Form.STATEDISABLED,

true);

<p>Conta corrente:<span id=“contaID”></span>

<p>

Page 41: Comet - ReverseAjax com DWR - Resumo

import org.dojotoolkit.dijit.Dijit;import org.dojotoolkit.dijit.Editor;

Editor e = Dijit.byId(“contaID”, Editor.class);

e.setValue(200);

<p>Conta corrente:<span id=“contaID”></span>

<p>

Page 42: Comet - ReverseAjax com DWR - Resumo
Page 43: Comet - ReverseAjax com DWR - Resumo

Algumas pessoas fazem essa pergunta: Comet é a mesma coisa de Reverse Ajax ?

A resposta é: SIM.

O DWR chama a técnica de Comet de Reverse Ajax, e ele utiliza também o Polling e Piggyback.

Ele consegue detectar de forma transparente qual tipo de interação por ajax que o cliente está utilizando, deixando transparente para o programador.

Page 44: Comet - ReverseAjax com DWR - Resumo
Page 45: Comet - ReverseAjax com DWR - Resumo

Por padrão o DWR começa com o Reverse Ajax(Comet) desligado, permitindo apenas a transferência via Piggyback.

O Reverse Ajax do DWR possui dois modos: Ativo e Passivo.

O Modo Ativo possui ainda mais 3 modos:

1.Full Streaming(Comet - Streaming)2.Early Closing (Comet - Long Polling)3.Polling

Page 46: Comet - ReverseAjax com DWR - Resumo

Para ativar o Reverse Ajax na sua aplicação, é muito simples. São apenas dois passos:

1. Basta acrescentar o treco de código no seu web.xml. Com isso você ativa o Reverse Ajax.

Page 47: Comet - ReverseAjax com DWR - Resumo

2. Depois de ativado no web.xml, agora no segundo passo você vai definir qual a página que vai se utilizar do Reverse Ajax.

Basta acrescentar na sua página a seguinte linha de código:

Você poderá adicionar no onload da página ou no início de um arquivo JS, ou apenas como Script na página.

Page 48: Comet - ReverseAjax com DWR - Resumo

Este é o modo padrão quando o Reverse Ajax é ativado para

as versões 2.0.3 e anteriores.

A partir da versão 2.0.4 o padrão é a Early Closing.

Ele tem como características respostas mais rápidas,

porque ele fecha a conexão apenas uma vez a cada 60

segundos, ou verifica se o browser ainda está ativo.

Page 49: Comet - ReverseAjax com DWR - Resumo

Para ativar o modo Full Streaming na versão DWR 2.0.4 em

diante, basta seguir as configurações:

No web.xml ative o uso de Reverse Ajax.

Page 50: Comet - ReverseAjax com DWR - Resumo

Ainda no web.xml adicione o seguinte trecho.

Depois basta acrescentar na sua página a seguinte linha de código:

Page 51: Comet - ReverseAjax com DWR - Resumo

No modo Early Closing ele irá manter a conexão aberta

assim como na Full Streaming, no entanto ele ocupa apenas

a conexão durante 60 segundos, se não houver uma saída

para o navegador.

Esse modo nas versões DWR 2.0.4 e superiores, não se faz

necessária nenhuma configuração adicional.

Para as versões 2.0.3 para baixo é preciso adicionar o

seguinte trecho.

Page 52: Comet - ReverseAjax com DWR - Resumo

Neste caso o DWR irá manter a conexão aberta por mais de

500 milissegundos após a primeira saída, depois ele fecha e

já solicita o a sua reabertura. Ele faz isso antes de forçar um

flush.

Page 53: Comet - ReverseAjax com DWR - Resumo

Caso este modo esteja sendo utilizado em aplicações com

um elevada taxa de transferência de dados(servidor-cliente)

se faz necessário em alguns casos aumentar o tempo de

conexão aberta com o servidor.

Bastando alterar o valor no maxWaitAfterWrite = 1000 ou

Mais, dependendo da sua necessidade.

Page 54: Comet - ReverseAjax com DWR - Resumo

Se por algum motivo você deseje utilizar essa técnica,

também é bem simples configurar.

Além da configuração padrão: web.xml(activeReverseAjaxEnabled=true) é

preciso adicionar dois init-params, veja a seguir:

Page 55: Comet - ReverseAjax com DWR - Resumo

Você deve definir o PollingServerLoadMonitor.

No modo Polling o default é de 5 segundos, mas é

recomendado que você altere esse valor, pelo menos para 60

segundos. Isso para as versões DWR 2.0.3 em diante.

Page 56: Comet - ReverseAjax com DWR - Resumo
Page 57: Comet - ReverseAjax com DWR - Resumo

Neste exemplo iremos simular um chat simples.

Apenas para exemplificar o uso do Reverse Ajax com DWR

e ver como é simples o seu uso.

Page 58: Comet - ReverseAjax com DWR - Resumo
Page 59: Comet - ReverseAjax com DWR - Resumo

No exemplo a seguir vamos ver um exemplo de um relógio

que servirá para qualquer usuário conectado ao servidor.

Page 60: Comet - ReverseAjax com DWR - Resumo
Page 61: Comet - ReverseAjax com DWR - Resumo

No exemplo a seguir, vou demonstrar mais uma utilidade para o Reverse Ajax com DWR.

Não teremos nenhuma validação, iremos acessar dois

browser(IE e Firefox) e mostrar o seu funcionamento.

Page 62: Comet - ReverseAjax com DWR - Resumo
Page 63: Comet - ReverseAjax com DWR - Resumo

Como vimos o DWR tem um excelente suporte a Reverse

Ajax(Comet) em geral. Bem simples de se utilizar, fácil de

configurar e robusto.

O DWR 3.0 promete muito mais, com novas features,

suporte a Rest, melhor integração com Spring, suporte ao

Google Gears e Dojo Offline,Aptana Jaxer, OpenAjax,

PubSub, Bayeux etc.

Page 64: Comet - ReverseAjax com DWR - Resumo