COMUNICAÇÃO
Os seres partilham diferentes
informações entre si, tornando o
ato de comunicar uma atividade
essencial.
Slide 5
Slide 5 text
EMISSOR RECEPTOR
Slide 6
Slide 6 text
PROCESSO DE
COMUNICAÇÃO
Transmissão de informação entre
um emissor e um receptor que
decodifica uma determinada
mensagem.
Slide 7
Slide 7 text
MÁQUINAS
Nos anos quarenta é criado o
Colossus, primeiro computador
elétrico programável.
Slide 8
Slide 8 text
MÁQUINA
EMISSORA
MÁQUINA
RECEPTORA
Slide 9
Slide 9 text
REDES DE
COMPUTADORES
Slide 10
Slide 10 text
CAMADAS
As redes são compostas de
diversas camadas cada qual com
suas responsabilidades.
Slide 11
Slide 11 text
PROTOCOLOS
Cada camada possui seus próprios
protocolos que convencionam
como será a transferência de
informações.
Slide 12
Slide 12 text
(
Um pequeno parênteses
para falar sobre a Web.
Slide 13
Slide 13 text
WORLD WIDE WEB
Sistema de documentos
interligados por links que podem
ser acessadas através da internet.
Slide 14
Slide 14 text
INTERNET
Rede mundial de computadores
que utiliza os protocolos TCP/IP
como meio de comunicação.
Slide 15
Slide 15 text
) TCP/IP
URL E URI
HTTP
HTML
Slide 16
Slide 16 text
CAMADA DE REDE
REDES DE COMPUTADORES
Slide 17
Slide 17 text
Envio de mensagens destinadas à
máquina cujo endereço de IP
consta no cabeçalho do pacote.
INTERNET
PROTOCOL (IP)
Slide 18
Slide 18 text
Não há garantia de tempo
despendido e até mesmo se a
mensagem chegará ao destino
INTERNET
PROTOCOL (IP)
A
B
Slide 19
Slide 19 text
2 6 1
4
5
Slide 20
Slide 20 text
CAMADA DE
TRANSPORTE
REDES DE COMPUTADORES
Slide 21
Slide 21 text
1. CAMADA DE REDE
2. CAMADA DE TRANSPORTE
Slide 22
Slide 22 text
Protocolo orientado a conexão para
troca de informação.
TRANSMISSION
CONTROL
PROTOCOL (TCP)
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
A B
Iniciar
conexão TCP
Requisitar
objeto
Slide 25
Slide 25 text
Toda transferência se dá de forma
confiável fim-a-fim: sem desordens,
faltas ou duplicatas de mensagens.
TCP
Slide 26
Slide 26 text
3 2 1
4
3
Slide 27
Slide 27 text
CAMADA DE
APLICAÇÃO
REDES DE COMPUTADORES
Slide 28
Slide 28 text
1. CAMADA DE REDE
2. CAMADA DE TRANSPORTE
3. CAMADA DE APLICAÇÃO
Slide 29
Slide 29 text
Protocolo para distribuição de objetos de
hipermídia referenciados por uma URL.
HYPERTEXT
TRANSFER
PROTOCOL (HTTP)
Slide 30
Slide 30 text
A B
Iniciar
conexão TCP
GET /index.html
HTTP/1.1
Fechar
conexão TCP
Processamento
Slide 31
Slide 31 text
COMUNIQUE-SE
CORDIALMENTE
Saiba qual a requisição e código
de resposta adequados para
cada tipo de ação e objeto.
Slide 32
Slide 32 text
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.
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
text/html
CONTENT TYPE
HTML
http://www.freeformatter.com/mime-types-list.html
application/xml XML
application/json JSON
video/mp4 MP4
Slide 35
Slide 35 text
charset=utf8
CONTENT TYPE
(CHARSET)
UTF8
charset=iso-8859-1 Latin1
Slide 36
Slide 36 text
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.
Slide 37
Slide 37 text
HTTP É
STATELESS
O servidor não armazena
informações entre as requisições.
Slide 38
Slide 38 text
HTTP: QUERYSTRING
Pela URL consigo identificar uma busca e até
mesmo um usuário através de um código.
http://website/?user=j8d21nd9k0m1nd9ja1n3
Slide 39
Slide 39 text
HTTP: COOKIES
Slide 40
Slide 40 text
PERFORMANCE
Abrir uma conexão TCP para
cada requisição de objeto toma
tempo.
Slide 41
Slide 41 text
A B
Iniciar
conexão TCP
GET /index.html
HTTP/1.1
Fechar
conexão TCP
Processamento
Slide 42
Slide 42 text
A B
Iniciar
conexão TCP
GET /index.html
HTTP/1.1
Fechar
conexão TCP
GET /main.css
HTTP/1.1
KEEP ALIVE
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
A B
MULTIPLEXING HTTP 2.0
Slide 45
Slide 45 text
A B
SERVER PUSH HTTP 2.0
index.html
index.html
main.css
application.js
Slide 46
Slide 46 text
SERVER HINT
Slide 47
Slide 47 text
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
, …
Slide 48
Slide 48 text
APLICAÇÕES DE
TEMPO REAL
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
• 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.
Slide 51
Slide 51 text
XML HTTP
REQUEST (XHR)
API JavaScript que permite que os
navegadores requisitar objetos ao servidor
através de chamadas HTTP
.
Slide 52
Slide 52 text
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.
Slide 53
Slide 53 text
XHR (LONG-)POLLING
Cliente periodicamente envia uma requisição
para checar atualizações. Custoso e grosseiro.
Slide 54
Slide 54 text
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
Slide 55
Slide 55 text
• 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.
Slide 56
Slide 56 text
TCP É FULL-DUPLEX
O protocolo permite a troca de informações
na direção cliente para servidor ao mesmo
tempo e vice-versa.
Slide 57
Slide 57 text
WEBSOCKETS
APLICAÇÕES DE TEMPO REAL
Slide 58
Slide 58 text
"EXTENSÃO" DO HTTP
Protocolo independente cujo handshake é via
HTTP
. É compatível com a infraestrutura já
utilizada pela web.
Slide 59
Slide 59 text
A B
Iniciar
conexão TCP
GET /socket
HTTP/1.1 Wowww!
\o/
Slide 60
Slide 60 text
var ws = new WebSocket('ws://localhost:8001');
ws.onmessage = function (event) {
document.writeln('
' + event.data);
}
CLIENT
.JS
Apenas recebe mensagens e imprime na tela.
Slide 61
Slide 61 text
var ws = new WebSocket('ws://localhost:8001');
ws.onopen = function () {
var i = 0;
setInterval(function () {
ws.send(i++);
}, 1000);
};
CLIENT
.JS
Envia mensagens periodicamente.
Slide 62
Slide 62 text
SERVIDOR
É necessário que o servidor
entenda o protocolo.
Slide 63
Slide 63 text
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
Slide 64
Slide 64 text
NODE.JS - WS
Módulo que implementa o protocolo
WebSocket 13 - RFC-6455.
https://github.com/einaros/ws
npm install ws
Slide 65
Slide 65 text
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.
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
COMPATIBILIDADE
Diversas variações do protocolo com diferentes
compatibilidades.
Suporte da versão 13 - RFC 6455
10 11 14 6 12.1
Slide 68
Slide 68 text
SUPORTE
Precisamos de alternativas para
os navegadores que não dão
suporte.
Slide 69
Slide 69 text
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
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
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
Slide 72
Slide 72 text
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
Slide 73
Slide 73 text
COMUNICAR MELHOR
Podemos comunicar de uma
maneira otimizada.
Slide 74
Slide 74 text
SOCKET
.IO: JSON
socket.json.send({ num: i++ });
O formato mais popular para troca de
informações na interwebs.
Slide 75
Slide 75 text
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.
Slide 76
Slide 76 text
SOCKET
.IO: BROADCAST
socket.broadcast('die', ‘Good Bye');
Um cliente conversando com todos os outros
por intermédio do server.
Slide 77
Slide 77 text
SOCKET
.IO - 1.0
Nova engine e suporte a dados binários.
http://socket.io/blog/introducing-socket-io-1-0
Slide 78
Slide 78 text
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
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
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