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.

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

November 19, 2013
Tweet

Transcript

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

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

  3. None
  4. COMUNICAÇÃO Os seres partilham diferentes informações entre si, tornando o

    ato de comunicar uma atividade essencial.
  5. EMISSOR RECEPTOR

  6. PROCESSO DE COMUNICAÇÃO Transmissão de informação entre um emissor e

    um receptor que decodifica uma determinada mensagem.
  7. MÁQUINAS Nos anos quarenta é criado o Colossus, primeiro computador

    elétrico programável.
  8. MÁQUINA EMISSORA MÁQUINA RECEPTORA

  9. REDES DE COMPUTADORES

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

    com suas responsabilidades.
  11. PROTOCOLOS Cada camada possui seus próprios protocolos que convencionam como

    será a transferência de informações.
  12. ( Um pequeno parênteses para falar sobre a Web.

  13. WORLD WIDE WEB Sistema de documentos interligados por links que

    podem ser acessadas através da internet.
  14. INTERNET Rede mundial de computadores que utiliza os protocolos TCP/IP

    como meio de comunicação.
  15. ) TCP/IP URL E URI HTTP HTML

  16. CAMADA DE REDE REDES DE COMPUTADORES

  17. Envio de mensagens destinadas à máquina cujo endereço de IP

    consta no cabeçalho do pacote. INTERNET PROTOCOL (IP)
  18. Não há garantia de tempo despendido e até mesmo se

    a mensagem chegará ao destino INTERNET PROTOCOL (IP) A B
  19. 2 6 1 4 5

  20. CAMADA DE TRANSPORTE REDES DE COMPUTADORES

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

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


    CONTROL 
 PROTOCOL (TCP)
  23. None
  24. A B Iniciar 
 conexão TCP Requisitar
 objeto

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

    faltas ou duplicatas de mensagens. TCP
  26. 3 2 1 4 3

  27. CAMADA DE APLICAÇÃO REDES DE COMPUTADORES

  28. 1. CAMADA DE REDE 2. CAMADA DE TRANSPORTE 3. CAMADA

    DE APLICAÇÃO
  29. Protocolo para distribuição de objetos de hipermídia referenciados por uma

    URL. HYPERTEXT
 TRANSFER 
 PROTOCOL (HTTP)
  30. A B Iniciar 
 conexão TCP GET /index.html HTTP/1.1 Fechar

    
 conexão TCP Processamento
  31. COMUNIQUE-SE CORDIALMENTE Saiba qual a requisição e código de resposta

    adequados para cada tipo de ação e objeto.
  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.
  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
  34. text/html CONTENT TYPE HTML http://www.freeformatter.com/mime-types-list.html application/xml XML application/json JSON video/mp4

    MP4
  35. charset=utf8 CONTENT TYPE 
 (CHARSET) UTF8 charset=iso-8859-1 Latin1

  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.
  37. HTTP É 
 STATELESS O servidor não armazena
 informações entre

    as requisições.
  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
  39. HTTP: COOKIES

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

    toma tempo.
  41. A B Iniciar 
 conexão TCP GET /index.html HTTP/1.1 Fechar

    
 conexão TCP Processamento
  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
  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
  44. A B MULTIPLEXING HTTP 2.0

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

  46. SERVER HINT <link rel="subresource" href="main.js"> <link rel="prefetch" href="http://www.example.com/"> <link rel="dns-prefetch"

    href="http://example.com/">
  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 , …
  48. APLICAÇÕES DE TEMPO REAL

  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
  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.
  51. XML HTTP 
 REQUEST (XHR) API JavaScript que permite que

    os navegadores requisitar objetos ao servidor através de chamadas HTTP .
  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.
  53. XHR (LONG-)POLLING Cliente periodicamente envia uma requisição para checar atualizações.

    Custoso e grosseiro.
  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
  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.
  56. TCP É FULL-DUPLEX O protocolo permite a troca de informações

    na direção cliente para servidor ao mesmo tempo e vice-versa.
  57. WEBSOCKETS APLICAÇÕES DE TEMPO REAL

  58. "EXTENSÃO" DO HTTP Protocolo independente cujo handshake é via HTTP

    . É compatível com a infraestrutura já utilizada pela web.
  59. A B Iniciar 
 conexão TCP GET /socket
 HTTP/1.1 Wowww!


    \o/
  60. var ws = new WebSocket('ws://localhost:8001'); ws.onmessage = function (event) {

    document.writeln('<p>' + event.data); } CLIENT .JS Apenas recebe mensagens e imprime na tela.
  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.
  62. SERVIDOR É necessário que o servidor entenda o protocolo.

  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
  64. NODE.JS - WS Módulo que implementa o protocolo WebSocket 13

    - RFC-6455. https://github.com/einaros/ws npm install ws
  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.
  66. None
  67. COMPATIBILIDADE Diversas variações do protocolo com diferentes compatibilidades. Suporte da

    versão 13 - RFC 6455 10 11 14 6 12.1
  68. SUPORTE Precisamos de alternativas para os navegadores que não dão

    suporte.
  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
  70. var socket = new io.connect(); socket.on('connect', function () { socket.send('Hello

    to server!'); socket.on('message', function (data) { document.writeln('<p>' + data + '</p>'); }); }); CLIENT .JS COM SOCKET .IO <script src="/socket.io/socket.io.js"></script>
  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
  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
  73. COMUNICAR MELHOR Podemos comunicar de uma maneira otimizada.

  74. SOCKET .IO: JSON socket.json.send({ num: i++ }); O formato mais

    popular para troca de informações na interwebs.
  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.
  76. SOCKET .IO: BROADCAST socket.broadcast('die', ‘Good Bye'); Um cliente conversando com

    todos os outros por intermédio do server.
  77. SOCKET .IO - 1.0 Nova engine e suporte a dados

    binários. http://socket.io/blog/introducing-socket-io-1-0
  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
  79. None
  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
  81. OBRIGADO SEJAM CORDIAIS E EFICIENTES