<ul><li>Handerson Frota – Analista Programador; </li></ul><ul><li>Sócio Fundador da Triadworks; </li></ul><ul><li>Atualmen...
<ul><li>Conceitos Gerais. </li></ul><ul><li>O que é COMET ? </li></ul><ul><li>Mas quem utiliza COMET ? </li></ul><ul><li>T...
 
Para falar sobre COMET precisamos antes entender como uma comunicação Ajax funciona; Entender como os conceitos são aplica...
<ul><li>Existem 3 maneiras de comunicar utilizando Ajax: </li></ul><ul><li>Polling </li></ul><ul><li>2.  Piggyback </li></...
Polling – (Ativo) Quando o navegador(cliente) faz pedidos ao servidor em intervalos regulares e freqüentes. Gerando assim ...
Servidor você tem alguma atualização pra mim ? SIM   NÃO  
Piggyback – (Passivo) O servidor tendo alguma atualização para o cliente aguarda até que o cliente faça uma nova solicitaç...
Tenho refrigerante ! Servidor me dê um sanduíche. Receba seu sanduíche e  refrigerante.
 
Comet – (Ativo) O servidor fica responsável em atualizar a qualquer momento o cliente. Uma única conexão é aberta e mantid...
<ul><li>Ele se utiliza basicamente de duas estratégias: </li></ul><ul><li>Streaming; </li></ul><ul><li>Long polling; </li>...
<ul><li>Streaming </li></ul><ul><li>O navegador abre uma única conexão persistente </li></ul><ul><li>para o servidor para ...
2. Long polling O navegador faz um pedido para o servidor, que é mantido em aberto até que o servidor tenha novos dados a ...
Seja qual for a técnica, o servidor é capaz de enviar novas informações com baixa latência; Streaming é considerado de mel...
Opa, tenho novas atualizações ! Navegador receba novas atualizações.
 
 
Uma aplicação utilizando COMET pode entregar os  dados para o cliente a qualquer momento, não  apenas na resposta às infor...
 
Programas de Chat: Gmail, Meebo, Yahoo etc.
Gmail usa para atualizar as conversas por email;
Google Docs usa para exibir as ações de outros  colaboradores; Gpokr para jogos on-line; Linkedin, Polar Rose... Dentre ou...
 
<ul><li>Jetty (Java) </li></ul><ul><li>Twisted Python </li></ul><ul><li>Grizzly – Glassfish Plugin </li></ul><ul><li>Light...
<ul><li>Cometd(Bayeux) </li></ul><ul><li>mod_pubsub </li></ul><ul><li>Lightstreamer </li></ul>
<ul><li>DWR(Java) </li></ul><ul><li>Juggernaut(Rails) </li></ul><ul><li>Nevow(Python) </li></ul>
 
O COMET pode ser utilizado em vários tipos de  ambientes e plataformas compatíveis. Mas existem determinados frameworks e ...
Temos N frameworks e API´s que trabalham com  COMET, mas alguns se destacam por todos os  parâmetros citados anteriormente...
 
Dojo client implementation dojox.cometd.init( serverUrl ); dojox.cometd.publish (“/topic”,   {/* payload */} ); dojox.come...
package dojox.cometd; public interface Bayeux { void publish(Client formClient, String toChannel, Object data, String idMs...
Collection sessions = context.getScriptSessionsByPage(url); ScriptProxy proxy = new ScriptProxy(sessions); proxy.addFuncti...
Collection sessions = context.getScriptSessionsByPage(url); Effect e = new Effect(sessions); e.fade( “clientId” );
Collection sessions = context.getScriptSessionsByPage(url); Server server = GI.getServer(sessions,  “appname” ); Button bu...
<p> Conta corrente: <span  id =“ contaID ”> </span> <p> import  org.directwebremoting.dwr.Util; Util.setValue(“ contaID ”,...
import  org...scriptaculous.Effect; Effect.shake(“ contaID ”, 100); <p> Conta corrente: <span  id =“ contaID ”> </span> <p>
import  jsx3.gui.*; Server s = GI.getServer(“app”); Button b = s.getJSXById(“ id ”, Button.class); b.setEnabled(Form.STATE...
import  org.dojotoolkit.dijit.Dijit; import  org.dojotoolkit.dijit.Editor; Editor e = Dijit.byId(“ contaID ”, Editor.class...
 
Algumas pessoas fazem essa pergunta: Comet é a mesma coisa de Reverse Ajax ? A resposta é: SIM. O DWR chama a técnica de C...
 
<ul><li>Por padrão o DWR começa com o Reverse Ajax(Comet) desligado, permitindo apenas a transferência via Piggyback. </li...
Para ativar o Reverse Ajax na sua aplicação, é muito simples. São apenas dois passos: 1. Basta acrescentar o treco de códi...
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...
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...
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...
Ainda no web.xml adicione o seguinte trecho. Depois basta acrescentar na sua página a seguinte linha de código:
No modo Early Closing ele irá manter a conexão aberta  assim como na Full Streaming, no entanto ele ocupa apenas  a conexã...
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á ...
Caso este modo esteja sendo utilizado em aplicações com  um elevada taxa de transferência de dados(servidor-cliente)  se f...
Se por algum motivo você deseje utilizar essa técnica,  também é bem simples configurar. Além da configuração padrão:  web...
Você deve definir o PollingServerLoadMonitor. No modo Polling o default é de 5 segundos, mas é  recomendado que você alter...
 
Neste exemplo iremos simular um chat simples. Apenas para exemplificar o uso do Reverse Ajax com DWR e  ver como é simples...
 
No exemplo a seguir vamos ver um exemplo de um relógio  que servirá para qualquer usuário conectado ao servidor.
 
No exemplo a seguir, vou demonstrar mais uma utilidade para o Reverse Ajax com DWR. Não teremos nenhuma validação, iremos ...
 
Como vimos o DWR tem um excelente suporte a Reverse  Ajax(Comet) em geral. Bem simples de se utilizar, fácil de  configura...
 
Upcoming SlideShare
Loading in …5
×

Comet - ReverseAjax com DWR - Resumo

3,140
-1

Published on

Junção e resumo de duas palestras: Comet e ReverseAjax com DWR.

Published in: Technology
3 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total Views
3,140
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
46
Comments
3
Likes
1
Embeds 0
No embeds

No notes for slide

Comet - ReverseAjax com DWR - Resumo

  1. 2. <ul><li>Handerson Frota – Analista Programador; </li></ul><ul><li>Sócio Fundador da Triadworks; </li></ul><ul><li>Atualmente Analista Programador da IVIA; </li></ul><ul><li>Envolvido na programação desde os 13 anos iniciando com C, web desde 1997 e com Java desde 2001; </li></ul><ul><li>Entusiasta Java e Ajax; </li></ul><ul><li>Colunista da DevMedia, com artigos e vídeo aulas; </li></ul><ul><li>Coordenador e Fundador da Célula Java na Faculdade Lourenço Filho; </li></ul><ul><li>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; </li></ul>
  2. 3. <ul><li>Conceitos Gerais. </li></ul><ul><li>O que é COMET ? </li></ul><ul><li>Mas quem utiliza COMET ? </li></ul><ul><li>Tecnologias. </li></ul><ul><li>Recomendações. </li></ul><ul><li>Algumas implementações. </li></ul><ul><li>COMET ou ReverseAjax ? </li></ul><ul><li>Configurando o DWR. </li></ul><ul><li>Exemplo de um Chat. </li></ul><ul><li>Exemplo de um Relógio. </li></ul><ul><li>Exemplo de um Login. </li></ul><ul><li>Considerações Finais. </li></ul>
  3. 5. 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;
  4. 6. <ul><li>Existem 3 maneiras de comunicar utilizando Ajax: </li></ul><ul><li>Polling </li></ul><ul><li>2. Piggyback </li></ul><ul><li>3. Comet </li></ul>
  5. 7. 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.
  6. 8. Servidor você tem alguma atualização pra mim ? SIM  NÃO 
  7. 9. 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.
  8. 10. Tenho refrigerante ! Servidor me dê um sanduíche. Receba seu sanduíche e refrigerante.
  9. 12. Comet – (Ativo) O servidor fica responsável em atualizar a qualquer momento o cliente. Uma única conexão é aberta e mantida pelo servidor.
  10. 13. <ul><li>Ele se utiliza basicamente de duas estratégias: </li></ul><ul><li>Streaming; </li></ul><ul><li>Long polling; </li></ul>
  11. 14. <ul><li>Streaming </li></ul><ul><li>O navegador abre uma única conexão persistente </li></ul><ul><li>para o servidor para todos os eventos que se </li></ul><ul><li>utilizam do COMET. </li></ul><ul><li>Quando o servidor envia algum evento a conexão </li></ul><ul><li>não é fechada. </li></ul>
  12. 15. 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.
  13. 16. Seja qual for a técnica, o servidor é capaz de enviar novas informações com baixa latência; Streaming é considerado de melhor desempenho comparado ao Long Polling;
  14. 17. Opa, tenho novas atualizações ! Navegador receba novas atualizações.
  15. 20. 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).
  16. 22. Programas de Chat: Gmail, Meebo, Yahoo etc.
  17. 23. Gmail usa para atualizar as conversas por email;
  18. 24. Google Docs usa para exibir as ações de outros colaboradores; Gpokr para jogos on-line; Linkedin, Polar Rose... Dentre outros...
  19. 26. <ul><li>Jetty (Java) </li></ul><ul><li>Twisted Python </li></ul><ul><li>Grizzly – Glassfish Plugin </li></ul><ul><li>Lighttpd </li></ul><ul><li>Perbal </li></ul>
  20. 27. <ul><li>Cometd(Bayeux) </li></ul><ul><li>mod_pubsub </li></ul><ul><li>Lightstreamer </li></ul>
  21. 28. <ul><li>DWR(Java) </li></ul><ul><li>Juggernaut(Rails) </li></ul><ul><li>Nevow(Python) </li></ul>
  22. 30. 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.
  23. 31. 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;
  24. 33. Dojo client implementation dojox.cometd.init( serverUrl ); dojox.cometd.publish (“/topic”, {/* payload */} ); dojox.cometd.subscribe( “/topic” , function(){/* ... /* } );
  25. 34. package dojox.cometd; public interface Bayeux { void publish(Client formClient, String toChannel, Object data, String idMsg); void subscribe(String toChannel, Client subscriber); ... }
  26. 35. Collection sessions = context.getScriptSessionsByPage(url); ScriptProxy proxy = new ScriptProxy(sessions); proxy.addFunctionCall( “updateCallers” , call);
  27. 36. Collection sessions = context.getScriptSessionsByPage(url); Effect e = new Effect(sessions); e.fade( “clientId” );
  28. 37. Collection sessions = context.getScriptSessionsByPage(url); Server server = GI.getServer(sessions, “appname” ); Button button = server.getJSXById( “button” , Button.class); Button.setEnabled(Form.STATEDISABLED, true);
  29. 38. <p> Conta corrente: <span id =“ contaID ”> </span> <p> import org.directwebremoting.dwr.Util; Util.setValue(“ contaID ”, 100);
  30. 39. import org...scriptaculous.Effect; Effect.shake(“ contaID ”, 100); <p> Conta corrente: <span id =“ contaID ”> </span> <p>
  31. 40. 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>
  32. 41. 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>
  33. 43. 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.
  34. 45. <ul><li>Por padrão o DWR começa com o Reverse Ajax(Comet) desligado, permitindo apenas a transferência via Piggyback. </li></ul><ul><li>O Reverse Ajax do DWR possui dois modos: Ativo e Passivo. </li></ul><ul><li>O Modo Ativo possui ainda mais 3 modos: </li></ul><ul><li>Full Streaming(Comet - Streaming) </li></ul><ul><li>Early Closing (Comet - Long Polling) </li></ul><ul><li>Polling </li></ul>
  35. 46. 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.
  36. 47. 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.
  37. 48. 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.
  38. 49. 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.
  39. 50. Ainda no web.xml adicione o seguinte trecho. Depois basta acrescentar na sua página a seguinte linha de código:
  40. 51. 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.
  41. 52. 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.
  42. 53. 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.
  43. 54. 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:
  44. 55. 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.
  45. 57. Neste exemplo iremos simular um chat simples. Apenas para exemplificar o uso do Reverse Ajax com DWR e ver como é simples o seu uso.
  46. 59. No exemplo a seguir vamos ver um exemplo de um relógio que servirá para qualquer usuário conectado ao servidor.
  47. 61. 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.
  48. 63. 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×