WebSockets: Aplicações Real-Time

Prévia do material em texto

6ºAula
WEBSocket
Objetivos de aprendizagem
Ao término desta aula, vocês serão capazes de:
•	 construir uma aplicação real-time.
Olá, 
Começaremos a aula 06 dando continuidade à disciplina de 
Desenvolvimento Web II. Na aula anterior foi explicado o protocolo 
HTTP e sua funcionalidade de comunicação cliente-servidor 
com arquivos HTML, utilizando módulos nativo ou não. Foram 
desenvolvidos servidores capazes de carregar e enviar conteúdo de 
arquivos HTML externos, manipular formulários e enviar e-mail.
Nesta aula, os WebSockets serão explicados, começando por sua 
funcionalidade e características, seguidos de exemplos de utilização.
Leia atentamente esta aula e se tiver alguma dúvida, use os 
recursos que estão na sua área do aluno.
Boa aula!
Bons estudos!
Desenvolvimento Voltado a Web III 46
1	–	O	que	são	WebSockets?
2 – Implementando WebSockets
1 - O que são WebSockets?
Aplicações real-time são programas cujas funções são 
executadas e retornadas em frações de segundos. A execução 
dessas funções é tão rápida que para o usuário aparenta estar 
acontecendo imediatamente.
Imagine que o cliente faz uma solicitação para o servidor, 
via HTTP. O servidor recebe a requisição, abre a conexão, 
trata a requisição, retorna o resultado para o cliente e encerra a 
requisição. Até parece que isso tudo ocorre rapidamente, mas 
não	o	suficiente	para	aplicações	real-time.
De maneira a solucionar esse problema o WebSocket 
funciona como uma conexão bidirecional persistente. Ela 
se manterá aberta entre clientes e servidores, que poderão se 
comunicar por uma única conexão. Dessa forma, a experiência 
do usuário ao interagir com o sistema se torna muito mais 
fluida,	sem	interrupções	(PEREIRA,	2014).
Figura 1 – Imagem explicando sobre conexão 
bidirecional.
Fonte: PEREIRA, 2014.
Chats e Jogos online são exemplos de aplicações 
que podem ser criados utilizando WebSockets. Enquanto 
o servidor gerencia as conexões, responde e encaminha 
mensagens entre os clientes que estão conectados. 
Copes (2019) explica a diferença entre o protocolo 
HTTP e o WebSocket: enquanto no HTTP o servidor retorna 
alguma informação quando o cliente requisita, no WebSocket 
o servidor pode enviar mensagens para o cliente sem que 
ele tenha explicitamente solicitado. O cliente e o servidor 
podem se comunicar um com o outro simultaneamente, além 
disso, não há sobrecarga nos dados quando se precisa trocar 
mensagens, diminuindo a latência na comunicação.
2 - Implementando WebSockets
O WebSocket é baseado em eventos, então, ao ser 
criado, ele irá aguardar o estabelecimento de uma conexão, e 
quando conectado poderá enviar ou receber mensagens. Para 
exemplificar	a	utilização	de	WebSockets	alguns	modelos	de	
servidor são desenvolvidos abaixo.
Seções de estudo
Primeiro é necessário instalar o módulo ws pelo npm.
npm install ws --save
Antes de iniciar o desenvolvimento de nossa aplicação 
precisamos entender como criar servidor e cliente no Node.
js. Vamos começar pelo servidor. (WS, 2019)
const WebSocket = require(‘ws’);
const server = new WebSocket.Server({ 
port: 8080 });
server.on(‘connection’, function 
connection(ws) {
 ws.on(‘message’, function 
incoming(message) {
 console.log(‘received: %s’, 
message);
 });
 ws.send(‘something’);
});
Vamos entender o que irá acontecer nesse servidor. O 
módulo ws é carregado, e em seguida um servidor WebSocket 
é	 instanciado	 para	 ficar	 escutando	 a	 porta	 8080.	 Quando	
alguma conexão for iniciada uma mensagem é enviada ao 
cliente, e a conexão estará apta a receber mensagens.
Se executarmos o código acima sozinho, nada irá 
acontecer	e	o	servidor	WebSocket	ficará	aguardando	conexões	
que nunca serão estabelecidas. Criaremos então um cliente 
que irá enviar mensagens para esse servidor.
const WebSocket = require(‘ws’);
const client = new WebSocket(‘ws://
localhost:8080’);
client.on(‘open’, function open() {
 ws.send(‘something’);
});
client.on(‘message’, function 
incoming(data) {
 console.log(data);
});
O módulo ws precisa ser carregado também no lado 
do cliente que cria um WebSocket, passando por parâmetro, 
endereço e porta que o servidor está localizado. No caso 
estamos executando cliente e servidor na mesma máquina, por 
isso, localhost. Somente quando a conexão é aberta o cliente 
envia	uma	mensagem	ao	servidor,	além	de	ficar	aguardando	
mensagens.
47
Figura 2 – Cliente e Servidor rodando.
Fonte: Acervo pessoal.
Podemos incrementar o nosso cliente para enviar data e 
hora a cada 10 segundos para o servidor. Dentro do método 
que é chamado quando a conexão é aberta on(‘open’), criamos 
um setInterval(function,interval), onde o primeiro parâmetro 
é uma função que envia a mensagem para o servidor e o 
segundo é o intervalo de tempo em milissegundos que essa 
função será executada.
const WebSocket = require(‘ws’);
var moment = require(‘moment’);
const ws = new WebSocket(‘ws://
localhost:8080’);
ws.on(‘open’, function open() {
 setInterval(()=>{
 w s . s e n d ( m o m e n t ( ) .
format(‘DD/MM/YYYY - hh:mm:ss’));
 },10000);
});
ws.on(‘message’, function 
incoming(data) {
 console.log(data);
});
Figura 3 – Cliente setInterval.
Fonte: Acervo pessoal.
Até aqui um cliente se conectou ao servidor, mas é 
possível que vários clientes estejam conectados. Podemos 
então criar um servidor broadcast, que ao receber a mensagem 
de um cliente retransmite-a para todos os outros clientes.
const WebSocket = require(‘ws’);
const server = new WebSocket.Server({ 
port: 8080 });
var id = 1;
server.on(‘connection’, function 
connection(ws) {
 ws.on(‘message’, function 
incoming(message) {
 console.log(‘received: %s’, 
message);
 server.clients.forEach((client)=>{
 if (client !== ws && client.
readyState === WebSocket.OPEN) {
 client.send(message);
 }
 });
 });
 console.log(‘Cliente ‘+id+’ 
conectado!’);
 ws.send(id++);
});
A inicialização do servidor ainda é a mesma, porém 
as linhas em amarelo foram inseridas para que além da 
possibilidade	da	identificação	do	cliente	conectado,	o	servidor	
retransmita a mensagem que ele recebeu a todos os outros 
clientes conectados, exceto aquele que enviou a mensagem.
A	identificação	dos	clientes	fica	por	conta	da	variável	id	
que é incrementada sempre que uma nova conexão é feita. 
Esse id é enviado na primeira mensagem que o cliente recebe.
Já o envio em broadcast é responsabilidade do método 
forEach, que percorre cada um dos clientes do servidor. 
É	 imprescindível	 que	 seja	 feita	 a	 verificação	 se	o	 status	do	
cliente está como aberto e também se o cliente para o qual a 
mensagem será enviada não será o mesmo que a enviou.
O código do cliente também precisou ser alterado.
const WebSocket = require(‘ws’);
const client = new WebSocket(‘ws://
localhost:8080’);
client.on(‘open’, function open() {
 setInterval(()=>{
 ws.send(‘Oi eu sou o cliente 
‘+id);
 },10000);
});
var first = true;
var id;
client.on(‘message’, function 
incoming(data) {
 if(first){
 id = data;
 first = false;
Desenvolvimento Voltado a Web III 48
 }else{
 console.log(data);
 }
});
O	 cliente	 agora	 tem	 uma	maneira	 de	 se	 identificar,	 a	
variável	 first	 só	 é	 verdadeira	 antes	 da	 primeira	 mensagem	
recebida. Nessa mensagem o servidor envia o id do cliente, 
depois	que	esse	id	é	armazenado	a	variável	first	é	setada	como	
falsa e as mensagens seguintes serão apresentadas no console.
A dinâmica do cliente se mantém. A cada 10 segundos 
ele envia uma mensagem para o servidor, mas dessa vez ele 
concatena	o	seu	id	ao	final	da	mensagem.	Podemos,	então,	
identificar	 na	 Figura	 4,	 três	 clientes	 sendo	 executados	 ao	
mesmo tempo, e cada um recebe a mensagem retransmitida 
pelo	servidor	dos	outros	clientes.	Você	consegue	identificar	
qual o id de cada clientes pelas mensagens que eles receberam.
Figura 4 – Servidor Broadcast.
Fonte: Acervo pessoal.
No mesmo servidor podem coexistir os serviços de 
HTTP e WebSocket. Dessa forma o HTTP fornece a 
página queserá exibida, enquanto o WebSocket fornece a 
comunicação entre clientes e servidor. Veremos esse modelo 
de servidor na aula 08, quando construirmos um Chat para 
comunicação.
Retomando a aula
Chegamos ao final da sexta aula. Vamos recordar?
1 – O que são WebSockets?
Na primeira seção, apresentamos um tipo de conexão 
bidirecional persistente que é capaz de se comunicar de 
maneira	eficiente	o	WebSocket,	principalmente	utilizado	em	
aplicações real-time que necessitam de baixa latência.
2 – Implementando WebSockets
Nesta seção, foram detalhados alguns modelos de 
servidor WebSocket usando o módulo ws, tais como o 
servidor simples, que apenas recebe e envia mensagens para 
um	cliente	específico,	e	o	servidor	de	broadcast,	que	recebe	
a mensagem de um dos clientes e retransmite para todos os 
outros.
LECHETA, R R. Node Essencial, Novatec, 2012.
PEREIRA, C R. Aplicações web real-time com Node. js. 
Editora Casa do Código, 2014.
RUBENS, J. Primeiros passos com Node.js. Editora Casa 
do Código, 2017.
Vale a pena ler
COPES, F. In: The Node.js Handbook, 2019. Disponível 
em: <https://flaviocopes.com/page/ebooks/>. Acesso 
em: 20 mai. 2019.
DELBONO, E. In: Node.js Succinctly, 2016. 
Disponível em: <https://www.syncfusion.com/ebooks/
nodejs>. Acesso em: 20 mai. 2019.
NODE. In: Node.js Tutorial, 2019. Disponível em: 
<https://www.w3schools.com/nodejs/default.asp>. 
Acesso em: 02 jun. 2019.
WEBSOCKET. In: npm websocket, 2018. Disponível 
em: <https://www.npmjs.com/package/websocket>. 
Acesso em: 02 jun. 2019.
WS. In: GitHub ws, 2019. Disponível em: < https://
github.com/websockets/ws>. Acessado em: 02 jun. 2019.
Vale a pena acessar
Vale a pena
Minhas anotações