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.

1. PROTOCOLOS DE COMUNICAÇÃO QUE FAZEM PARTE DA WEB
2. jcemer.com github.com/jcemer twitter.com/jcemer speakerdeck.com/jcemer
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)
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.
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
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