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

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;

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.

8. Servidor você tem alguma atualização pra mim ? SIM  NÃO 

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.

10. Tenho refrigerante ! Servidor me dê um sanduíche. Receba seu sanduíche e refrigerante.

12. Comet – (Ativo) O servidor fica responsável em atualizar a qualquer momento o cliente. Uma única conexão é aberta e mantida pelo servidor.

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.

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;

17. Opa, tenho novas atualizações ! Navegador receba novas atualizações.

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

22. Programas de Chat: Gmail, Meebo, Yahoo etc.

23. Gmail usa para atualizar as conversas por email;

24. Google Docs usa para exibir as ações de outros colaboradores; Gpokr para jogos on-line; Linkedin, Polar Rose... Dentre outros...

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.

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;

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

34. package dojox.cometd; public interface Bayeux { void publish(Client formClient, String toChannel, Object data, String idMsg); void subscribe(String toChannel, Client subscriber); ... }

35. Collection sessions = context.getScriptSessionsByPage(url); ScriptProxy proxy = new ScriptProxy(sessions); proxy.addFunctionCall( “updateCallers” , call);

36. Collection sessions = context.getScriptSessionsByPage(url); Effect e = new Effect(sessions); e.fade( “clientId” );

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

38. <p> Conta corrente: <span id =“ contaID ”> </span> <p> import org.directwebremoting.dwr.Util; Util.setValue(“ contaID ”, 100);

39. import org...scriptaculous.Effect; Effect.shake(“ contaID ”, 100); <p> Conta corrente: <span id =“ contaID ”> </span> <p>

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>

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>

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.

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.

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.

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.

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.

50. Ainda no web.xml adicione o seguinte trecho. Depois basta acrescentar na sua página a seguinte linha de código:

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.

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.

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.

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:

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.

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.

59. No exemplo a seguir vamos ver um exemplo de um relógio que servirá para qualquer usuário conectado ao servidor.

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.

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.