Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Web Socket, Comet, Reverse-Ajax Techniques

HTML5 Web Socket, Comet, Reverse-Ajax Techniques

Apresentação da defesa da cadeira de Projecto/Estágio da Licenciatura de Engenharia Informática.

Ricardo Mendes

November 02, 2012
Tweet

More Decks by Ricardo Mendes

Other Decks in Technology

Transcript

  1. HTML5 Web
    Socket, Comet,
    Reverse-AJAX
    Techniques
    Número Projeto
    20112115
    Aluno
    Ricardo Mendes, 1060516
    Orientador ISEP
    Nuno Bettencourt
    Supervisor Externo
    José António Silva
    Projeto/Estágio
    Licenciatura em Engenharia Informática

    View full-size slide

  2. introdução
    contexto
    requisitos
    solução
    arquitetura
    implementação
    demo
    conclusão

    View full-size slide

  3. introdução
    SaaS BI
    CRM

    View full-size slide

  4. Sistema de Monitorização
    introdução
    HTML5 Web Socket, Comet

    View full-size slide

  5. contexto
    introdução
    requisitos
    solução
    arquitetura
    implementação
    demo
    conclusão

    View full-size slide

  6. contexto
    técnicas de trocas de mensagens
    Smart Documentor
    introdução
    requisitos
    solução
    arquitetura
    implementação

    View full-size slide

  7. Páginas estáticas
    Iniciado no cliente (Pull technology)
    Interação simples
    Modelo
    Clássico
    contexto técnicas de troca de mensagens

    View full-size slide

  8. Modelo
    Ajax
    Asynchronous JavaScript and XML
    Páginas dinâmicas
    Polling
    contexto técnicas de troca de mensagens

    View full-size slide

  9. Modelo
    Comet
    Páginas dinâmicas / clientes Web
    Iniciado pelo servidor (Push technology)
    Web Socket / Stream / XMLHttpRequest
    contexto técnicas de troca de mensagens

    View full-size slide

  10. contexto
    técnicas de trocas de mensagem
    Smart Documentor
    introdução
    requisitos
    solução
    arquitetura
    implementação

    View full-size slide

  11. contexto
    técnicas de trocas de mensagem
    Smart Documentor
    introdução
    requisitos
    solução
    arquitetura
    implementação

    View full-size slide

  12. contexto Smart Documentor
    Process
    Station
    Review
    Station
    Scan
    Station

    View full-size slide

  13. SD SD
    SD SD SD
    SD
    Storage
    contexto Smart Documentor
    facilit.us

    View full-size slide

  14. contexto Smart Documentor

    View full-size slide

  15. requisitos
    introdução
    contexto
    solução
    arquitetura
    implementação
    demo
    conclusão

    View full-size slide

  16. requisitos
    O que se pretende monitorizar/consultar?
    Que dados são necessários recolher?
    Como fazer a recolha dos dados necessários?
    Quais as principais funcionalidades do sistema?

    View full-size slide

  17. requisitos
    Fácil acesso
    Cliente Web
    Fácil utilização
    Interação mínima
    necesárria
    Distribuição
    Comet
    Integração
    ASP.NET MVC, C#

    View full-size slide

  18. solução
    introdução
    contexto
    requisitos
    arquitetura
    implementação
    demo
    conclusão

    View full-size slide

  19. solução
    Servidor Cliente Web
    Aplicações
    Log Monitor Queue Monitor

    View full-size slide

  20. solução
    Servidor Cliente Web
    Aplicações
    Log Monitor Queue Monitor

    View full-size slide

  21. solução
    Servidor Cliente Web
    Aplicações
    Log Monitor Queue Monitor

    View full-size slide

  22. arquitetura
    introdução
    contexto
    requisitos
    solução
    implementação
    demo
    conclusão

    View full-size slide

  23. componentes
    arquitetura
    Servidor
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Smart
    Documentor
    Leitura
    Distribuição
    Visualização

    View full-size slide

  24. componentes
    arquitetura
    Servidor
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Smart
    Documentor
    Leitura
    Distribuição
    Visualização

    View full-size slide

  25. componentes
    arquitetura
    Servidor
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Smart
    Documentor
    Leitura
    Distribuição
    Visualização

    View full-size slide

  26. componentes
    arquitetura
    Servidor
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Smart
    Documentor
    Leitura
    Distribuição
    Visualização

    View full-size slide

  27. Thin Client
    Recebe dados do servidor
    Prepara dados para
    apresentação
    Atualiza a interface
    Recebe dados das
    aplicações
    Processa dados e persiste
    dados em memória para
    Distribui dados pelos
    clientes
    componentes
    arquitetura
    Fat Server

    View full-size slide

  28. implementação
    introdução
    contexto
    requisitos
    solução
    arquitetura
    demo
    conclusão

    View full-size slide

  29. implementação
    design
    código
    introdução
    contexto
    requisitos
    solução
    arquitetura

    View full-size slide

  30. implementação design Queue Monitor
    Cabeçalho

    View full-size slide

  31. implementação design Queue Monitor
    Cabeçalho

    View full-size slide

  32. implementação design Queue Monitor
    Cabeçalho

    View full-size slide

  33. implementação design Queue Monitor
    Cabeçalho

    View full-size slide

  34. implementação design Queue Monitor
    Barra de estados

    View full-size slide

  35. implementação design Queue Monitor
    Fila de Processamento

    View full-size slide

  36. implementação design Queue Monitor
    Fila de Processamento

    View full-size slide

  37. implementação design Queue Monitor
    Fila de Processamento

    View full-size slide

  38. implementação design Queue Monitor
    Fila de Processamento

    View full-size slide

  39. implementação design Queue Monitor
    Fila de Processamento

    View full-size slide

  40. implementação
    design
    código
    introdução
    contexto
    requisitos
    solução
    arquitetura

    View full-size slide

  41. implementação
    design
    código
    introdução
    contexto
    requisitos
    solução
    arquitetura

    View full-size slide

  42. implementação código Queue Monitor
    Servidor Cliente Web

    View full-size slide

  43. implementação código Queue Monitor
    troca de
    mensagens

    View full-size slide

  44. x 20
    Servidor
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Cliente
    Web
    Smart
    Documen
    tor
    3 pedidos/seg
    implementação código Queue Monitor
    Testes de carga

    View full-size slide

  45. introdução
    contexto
    requisitos
    solução
    arquitetura
    implementação
    demo
    conclusão

    View full-size slide

  46. Log Monitor Queue Monitor
    conclusão objetivos realizados
    Servidor
    Cliente Web
    Aplicações Nativas
    Servidor
    Cliente Web

    View full-size slide

  47. PokeIn (Web Socket)
    SignalR
    Server-Sent Events
    Client-Side MV*:
    Emberjs
    Angular
    Knockout
    Servidor Cliente Web
    conclusão trabalho futuro

    View full-size slide

  48. ¿ Q & A ?
    obrigado

    View full-size slide