$30 off During Our Annual Pro Sale. View Details »

Protocolos de comunicação que fazem parte da web

Protocolos de comunicação que fazem parte da web

Qual a importância da livre troca de mensagens entre dois pontos de conexão? Entenda do TCP e HTTP e saiba da necessidade e uso de protocolos adicionais como WebSockets.

Jean Carlo Emer

November 19, 2013
Tweet

More Decks by Jean Carlo Emer

Other Decks in Technology

Transcript

  1. PROTOCOLOS DE
    COMUNICAÇÃO
    QUE FAZEM PARTE DA WEB

    View Slide

  2. jcemer.com
    github.com/jcemer
    twitter.com/jcemer
    speakerdeck.com/jcemer

    View Slide

  3. View Slide

  4. COMUNICAÇÃO
    Os seres partilham diferentes
    informações entre si, tornando o
    ato de comunicar uma atividade
    essencial.

    View Slide

  5. EMISSOR RECEPTOR

    View Slide

  6. PROCESSO DE
    COMUNICAÇÃO
    Transmissão de informação entre
    um emissor e um receptor que
    decodifica uma determinada
    mensagem.

    View Slide

  7. MÁQUINAS
    Nos anos quarenta é criado o
    Colossus, primeiro computador
    elétrico programável.

    View Slide

  8. MÁQUINA
    EMISSORA
    MÁQUINA
    RECEPTORA

    View Slide

  9. REDES DE
    COMPUTADORES

    View Slide

  10. CAMADAS
    As redes são compostas de
    diversas camadas cada qual com
    suas responsabilidades.

    View Slide

  11. PROTOCOLOS
    Cada camada possui seus próprios
    protocolos que convencionam
    como será a transferência de
    informações.

    View Slide

  12. (
    Um pequeno parênteses
    para falar sobre a Web.

    View Slide

  13. WORLD WIDE WEB
    Sistema de documentos
    interligados por links que podem
    ser acessadas através da internet.

    View Slide

  14. INTERNET
    Rede mundial de computadores
    que utiliza os protocolos TCP/IP
    como meio de comunicação.

    View Slide

  15. ) TCP/IP
    URL E URI
    HTTP
    HTML

    View Slide

  16. CAMADA DE REDE
    REDES DE COMPUTADORES

    View Slide

  17. Envio de mensagens destinadas à
    máquina cujo endereço de IP
    consta no cabeçalho do pacote.
    INTERNET
    PROTOCOL (IP)

    View Slide

  18. Não há garantia de tempo
    despendido e até mesmo se a
    mensagem chegará ao destino
    INTERNET
    PROTOCOL (IP)
    A
    B

    View Slide

  19. 2 6 1
    4
    5

    View Slide

  20. CAMADA DE
    TRANSPORTE
    REDES DE COMPUTADORES

    View Slide

  21. 1. CAMADA DE REDE
    2. CAMADA DE TRANSPORTE

    View Slide

  22. Protocolo orientado a conexão para
    troca de informação.
    TRANSMISSION 

    CONTROL 

    PROTOCOL (TCP)

    View Slide

  23. View Slide

  24. A B
    Iniciar 

    conexão TCP
    Requisitar

    objeto

    View Slide

  25. Toda transferência se dá de forma
    confiável fim-a-fim: sem desordens,
    faltas ou duplicatas de mensagens.
    TCP

    View Slide

  26. 3 2 1
    4
    3

    View Slide

  27. CAMADA DE
    APLICAÇÃO
    REDES DE COMPUTADORES

    View Slide

  28. 1. CAMADA DE REDE
    2. CAMADA DE TRANSPORTE
    3. CAMADA DE APLICAÇÃO

    View Slide

  29. Protocolo para distribuição de objetos de
    hipermídia referenciados por uma URL.
    HYPERTEXT

    TRANSFER 

    PROTOCOL (HTTP)

    View Slide

  30. A B
    Iniciar 

    conexão TCP
    GET /index.html
    HTTP/1.1
    Fechar 

    conexão TCP
    Processamento

    View Slide

  31. COMUNIQUE-SE
    CORDIALMENTE
    Saiba qual a requisição e código
    de resposta adequados para
    cada tipo de ação e objeto.

    View Slide

  32. GET
    VERBOS DE REQUISIÇÃO
    Mais comum, solicita um objeto para o
    servidor.
    PUT Escrever registro com propriedade de
    idempotência. Ex: x = 5
    POST Escrever registro sem propriedade de
    idempotência. Ex: x++
    DELETE Remove algum registro.

    View Slide

  33. 200
    STATUS DE RESPOSTA
    Ok, tudo certo.
    301 Redirect permanente.
    404 Não encontrado ou desconhecido.
    500 Erro no servidor.
    201 Registro criado.
    304 Registro não modificado.
    http://httpstatus.es

    View Slide

  34. text/html
    CONTENT TYPE
    HTML
    http://www.freeformatter.com/mime-types-list.html
    application/xml XML
    application/json JSON
    video/mp4 MP4

    View Slide

  35. charset=utf8
    CONTENT TYPE 

    (CHARSET)
    UTF8
    charset=iso-8859-1 Latin1

    View Slide

  36. CACHE DOS OBJETOS
    http://tableless.com.br/workflow-para-cuidar-dos-seus-assets
    Os cabeçalhos permitem definir a data de
    expiração dos arquivos.

    View Slide

  37. HTTP É 

    STATELESS
    O servidor não armazena

    informações entre as requisições.

    View Slide

  38. HTTP: QUERYSTRING
    Pela URL consigo identificar uma busca e até
    mesmo um usuário através de um código.
    http://website/?user=j8d21nd9k0m1nd9ja1n3

    View Slide

  39. HTTP: COOKIES

    View Slide

  40. PERFORMANCE
    Abrir uma conexão TCP para
    cada requisição de objeto toma
    tempo.

    View Slide

  41. A B
    Iniciar 

    conexão TCP
    GET /index.html
    HTTP/1.1
    Fechar 

    conexão TCP
    Processamento

    View Slide

  42. A B
    Iniciar 

    conexão TCP
    GET /index.html
    HTTP/1.1
    Fechar 

    conexão TCP
    GET /main.css

    HTTP/1.1
    KEEP ALIVE

    View Slide

  43. A B
    Iniciar 

    conexão TCP
    GET /index.html
    HTTP/1.1
    Fechar 

    conexão TCP
    GET /main.css

    HTTP/1.1
    A B
    Iniciar 

    conexão TCP
    GET /main.js HTTP/
    1.1
    GET /image.jpg

    HTTP/1.1
    CRIAR MÚLTIPLAS
    CONEXÕES

    View Slide

  44. A B
    MULTIPLEXING HTTP 2.0

    View Slide

  45. A B
    SERVER PUSH HTTP 2.0
    index.html
    index.html
    main.css
    application.js

    View Slide

  46. SERVER HINT



    View Slide

  47. 1. CAMADA DE REDE
    2. CAMADA DE TRANSPORTE
    3. CAMADA DE APLICAÇÃO
    IP (IPv4 IPv6), OSPF, ICMP
    , ICMPv6, ECN, IGMP
    , …
    TCP, UDP
    , DCCP
    , SCTP
    , RSVP
    , …
    DNS, FTP
    , HTTP, WebSokets, IMAP
    , SSH, POP
    , SMTP
    , …

    View Slide

  48. APLICAÇÕES DE
    TEMPO REAL

    View Slide

  49. http://conferenciaweb.w3c.br/conheca-a-especificacao-
    websockets-e-suas-possibilidades-com-jean-carlo-emer
    O cenário começa a mudar a partir do
    momento em que o servidor [e mesmo o
    cliente] não tem disponível toda a informação
    que possa nos interessar em um dado instante.
    Jean Carlo Emer

    View Slide

  50. • Lance a lance de uma partida de futebol.
    • Cobertura ao vivo do lançamento de novos
    gadgets.
    • Painel real-time do Google Analytics.
    • Ferramentas de edição colaborativa.
    • Jogos multiplayer.

    View Slide

  51. XML HTTP 

    REQUEST (XHR)
    API JavaScript que permite que os
    navegadores requisitar objetos ao servidor
    através de chamadas HTTP
    .

    View Slide

  52. SERVIDOR HTTP É
    UM OUVINTE
    Não existe maneira de o servidor
    iniciar uma conexão com um
    cliente ou responder sem que
    haja requisição.

    View Slide

  53. XHR (LONG-)POLLING
    Cliente periodicamente envia uma requisição
    para checar atualizações. Custoso e grosseiro.

    View Slide

  54. SERVER-SENT 

    EVENTS (SSE)
    API que permite ao cliente receber notificações
    do servidor através de eventos.
    https://developer.mozilla.org/en-US/docs/Server-
    sent_events/Using_server-sent_events
    - 6 9 5 11

    View Slide

  55. • Lance a lance de uma partida de futebol.
    • Cobertura ao vivo do lançamento de novos
    gadgets.
    • Painel real-time do Google Analytics.
    • Ferramentas de edição colaborativa.
    • Jogos multiplayer.

    View Slide

  56. TCP É FULL-DUPLEX
    O protocolo permite a troca de informações
    na direção cliente para servidor ao mesmo
    tempo e vice-versa.

    View Slide

  57. WEBSOCKETS
    APLICAÇÕES DE TEMPO REAL

    View Slide

  58. "EXTENSÃO" DO HTTP
    Protocolo independente cujo handshake é via
    HTTP
    . É compatível com a infraestrutura já
    utilizada pela web.

    View Slide

  59. A B
    Iniciar 

    conexão TCP
    GET /socket

    HTTP/1.1 Wowww!

    \o/

    View Slide

  60. var ws = new WebSocket('ws://localhost:8001');
    ws.onmessage = function (event) {
    document.writeln('' + event.data);
    }
    CLIENT
    .JS
    Apenas recebe mensagens e imprime na tela.

    View Slide

  61. var ws = new WebSocket('ws://localhost:8001');
    ws.onopen = function () {
    var i = 0;
    setInterval(function () {
    ws.send(i++);
    }, 1000);
    };
    CLIENT
    .JS
    Envia mensagens periodicamente.

    View Slide

  62. SERVIDOR
    É necessário que o servidor
    entenda o protocolo.

    View Slide

  63. NODE.JS
    Ideal para aplicações de rede suportando mais
    de um milhão de conexões concorrentes com
    uma latência a cerca de 70ms. Servidor
    assíncrono: não bloqueia esperando por I/O.
    http://blog.caustik.com/2012/08/19/node-js-w1m-
    concurrent-connections

    View Slide

  64. NODE.JS - WS
    Módulo que implementa o protocolo
    WebSocket 13 - RFC-6455.
    https://github.com/einaros/ws
    npm install ws

    View Slide

  65. var WebSocketServer = require('ws').Server;
    var server = new WebSocketServer({ port: 8001 });
    server.on('connection', function (socket) {
    socket.on('message', function (message) {
    socket.send('Server received: ' + message);
    });
    socket.send('Welcome!');
    });
    SERVER.JS COM WS
    Cumprimenta novos clientes e responde a suas
    mensagens.

    View Slide

  66. View Slide

  67. COMPATIBILIDADE
    Diversas variações do protocolo com diferentes
    compatibilidades.
    Suporte da versão 13 - RFC 6455
    10 11 14 6 12.1

    View Slide

  68. SUPORTE
    Precisamos de alternativas para
    os navegadores que não dão
    suporte.

    View Slide

  69. NODE.JS - SOCKET
    .IO
    Camada de transporte com suporte a
    WebSocket, FlashSockets e Long-polling.
    Versão 1.0 (beta) depende do engine.io.
    https://github.com/learnboost/socket.io
    npm install socket.io

    View Slide

  70. var socket = new io.connect();
    socket.on('connect', function () {
    socket.send('Hello to server!');
    socket.on('message', function (data) {
    document.writeln('' + data + '');
    });
    });
    CLIENT
    .JS COM SOCKET
    .IO

    View Slide

  71. NODE.JS - EXPRESS
    Framework para fazer aplicações web. Auxilia
    na definição de rotas, tratamento de cookies e
    muito mais.
    https://github.com/visionmedia/express
    npm install express

    View Slide

  72. var app = require('express')();
    var server = require('http').Server(app).listen(8003);
    var io = require('socket.io').listen(server);
    app.configure(function(){
    app.use(require('express').static(__dirname));
    });
    io.on('connection', function (socket) {
    socket.on('message', function (message) {
    socket.send(message);
    });
    socket.send('Welcome!');
    });
    SERVER.JS COM SOCKET
    .IO

    View Slide

  73. COMUNICAR MELHOR
    Podemos comunicar de uma
    maneira otimizada.

    View Slide

  74. SOCKET
    .IO: JSON
    socket.json.send({ num: i++ });
    O formato mais popular para troca de
    informações na interwebs.

    View Slide

  75. SOCKET
    .IO: EVENTOS
    socket.emit('welcome', 'Welcome!');
    socket.emit('response', ':)');
    socket.on('welcome', function (data) {
    // ...
    });
    socket.on('response', function (data) {
    // ...
    });
    Tratar a comunicação entre cliente e servidor
    como uma troca através de eventos.

    View Slide

  76. SOCKET
    .IO: BROADCAST
    socket.broadcast('die', ‘Good Bye');
    Um cliente conversando com todos os outros
    por intermédio do server.

    View Slide

  77. SOCKET
    .IO - 1.0
    Nova engine e suporte a dados binários.
    http://socket.io/blog/introducing-socket-io-1-0

    View Slide

  78. SOCKET
    .IO - ENGINE.IO
    Camada de transporte com suporte a
    WebSockets (com módulo ws), FlashSockets e
    Long-polling.
    https://github.com/LearnBoost/engine.io
    npm install engine.io

    View Slide

  79. View Slide

  80. Redes de computadores e a Internet

    James F. Kurose e Keith W. Ross
    HTTP - The Definitive Guide

    David Gourley e Brian Totty
    High-Performance Browser Networking

    Ilya Grigorik
    http://chimera.labs.oreilly.com/books/1230000000545

    View Slide

  81. OBRIGADO
    SEJAM CORDIAIS E EFICIENTES

    View Slide