Este artigo se mostra útil para desenvolvedores que desejam implementar recursos de mensageria assíncrona full-duplex em suas aplicações web via WebSockets.
A arquitetura full-duplex se caracteriza pelo envio e recebimento de mensagens ou outros tipos de dados do cliente para o servidor e vice-versa, quebrando o velho conceito HTTP onde as respostas só chegam ao cliente quando requisitadas antes.
O exemplo mais comum disso está nos chats web, já que precisamos saber sempre que alguém enviou uma mensagem e não podemos recarregar o browser o tempo todo, pois o custo disso seria muito alto.
Ao final deste você saberá como integrar suas APIs tanto no front-end quanto no back-end, verá que linguagens de programação implementam tal recurso, bem como entenderá como implementar todos os serviços usando o SockJS, a API mais usada para WebSockets em JavaScript.
A web tem sido largamente construída em torno do chamado paradigma de request/response (requisição/resposta) da HTTP. Um cliente carrega uma página web e, em seguida, nada acontece até que o usuário clique para a próxima página.
Por volta de 2005, o Ajax começou a fazer a web ficar mais dinâmica, com seus processamentos assíncronos, sem a necessidade de recarregar as páginas sempre que algo deve ser buscado no servidor.
Ainda assim, toda a comunicação HTTP sempre foi dirigida pelo cliente, o que exigia a interação do usuário ou de sondagem periódica (existem vários algoritmos JavaScript para isso) para carregar novos dados a partir do servidor, como por exemplo nos casos de páginas de jornais ou notícias que precisam mostrar ao cliente informações em tempo real sem que o mesmo precise estar recarregando a página o tempo todo.
A solução via Ajax, se beneficiava de um recarregamento simples que simulava o click no botão de load do browser via JavaScript. Todavia, as tecnologias que permitem ao servidor enviar dados para o cliente, no exato momento em que ele sabe que novos dados estarão disponíveis, é algo bem recente no universo de programação front-end.
Os nomes mais comuns para defini-las são "Push" ou "Comet" (essa última representa um novo modelo de protocolo, baseado no HTTP, que permite ao servidor enviar dados para um browser, sem a necessidade de uma requisição).
Um dos hacks mais comuns para criar a ilusão de uma conexão de servidor iniciada é chamado de long polling (ou chamada seletiva, em tradução livre). Com ele, o cliente abre uma conexão HTTP com o servidor que a mantém aberta até que o envio da resposta seja efetuado.
Sempre que o servidor realmente tem novos dados ele envia a resposta (outras técnicas envolvem Flash, requests multipart do tipo XHR e os chamados HtmlFiles).
O long polling e as outras técnicas funcionam muito bem. Um dos usos mais famosos desse tipo de tecnologia está no chat do Gmail, já que o Google adota a mesma em várias de suas ferramentas e soluções.
No entanto, todas estas soluções alternativas compartilham um problema: elas precisam lidar com o overhead (sobrecarga) que a HTTP traz consigo, o que as tornam inadequadas para aplicações de baixa latência. Por exemplo, pense em um jogo multiplayer de tiro em primeira pessoa no browser ou qualquer outro jogo on-line com componentes em tempo real; o protocolo HTTP é muito pesado para lidar com o tráfego de tantas informações pesadas e oferecer um retorno eficiente ao mesmo tempo.
Para ir de encontro a esse problema, o W3C lançou em meados de 2011 a tecnologia dos WebSockets, que basicamente é um novo protocolo que fornece canais de comunicação full-duplex (nas duas direções – servidor e cliente) sobre uma conexão TCP (Transmission Control Protocol).
O TCP é o protocolo núcleo do IPS (Internet Protocol Suite), famoso pela sua combinação com o IP (Internet Protocol) para formar o modelo mais usado nas redes de computadores: TCP/IP. Ele é extremamente mais rápido que o HTTP e, ao contrário deste, não precisa criar pacotes de cabeçalhos e configurações nas requisições para que o servidor reconheça os pedidos e devolva respostas apropriadas.
A tecnologia em si é dividia em duas partes: a WebSocket API (que fornece todo o código fonte necessário para implementações via JavaScript) e o WebSocket Protocol (que padroniza a forma como todos os browsers devem implementar a tecnologia).
Na seção Links do artigo você encontra as URLs oficiais de cada parte. Ambas são um padrão no mundo front-end e, portanto, estão disponíveis nos principais browsers do mercado, como Chrome, Safari, IE e Firefox.
Enquanto os WebSockets foram projetados originalmente para ser implementados em ambos navegador e servidor web, os mesmos fornecem benefícios arquiteturais significativos para o ambiente cliente-servidor em si, mas também para arquiteturas de aplicações móveis que precisam se comunicar diretamente com os servidores, ou entre os próprios dispositivos.
Na Figura 1 temos uma representação de como os WebSockets estão arranjados dentro da web. A melhor maneira de pensar no WebSocket é como uma camada de transporte no topo do qual qualquer outro protocolo pode ser executado.
A API do WebSocket suporta a capacidade de definir sub-protocolos: bibliotecas do protocolo que possam interpretar protocolos mais específicos. Exemplos destes incluem XMPP, STOMP e AMQP.
Desta forma, os desenvolvedores não têm que pensar em termos de paradigma solicitação-resposta da HTTP, mas em vez disso, eles podem escolher o protocolo mais apropriado para o tipo de aplicações que estão escrevendo.
O único requisito do lado do navegador é executar uma biblioteca JavaScript que pode interpretar os pacotes do WebSocket, estabelecer e manter uma conexão com o mesmo e interpretar protocolos específicos que venham a ser usados.
No lado do servidor, o padrão da indústria é a utilização de bibliotecas do protocolo existentes que rodam em cima do TCP e que implementam algum gateway WebSocket de terceiros, como os protocolos da Kaazing WebSocket Gateways, por exemplo.
As implementações nos lados cliente e servidor que temos exibidas na figura usam bibliotecas específicas para tratar os WebSockets. Na Tabela 1 você encontra uma relação das tecnologias que os suportam, suas APIs oficiais e a URL para cada uma.
Tecnologia | API Suportada | URLs |
---|---|---|
Node.js |
Socket.IO WebSocket-Node Ws |
http://socket.io/ https://github.com/Worlize/WebSocket-Node https://github.com/einaros/ws |
Java | Jetty | http://www.eclipse.org/jetty/ |
Confira outros conteúdos:
Black November
Desconto exclusivo para as primeiras 200 matrículas!
Pagamento anual
12x no cartão
De: R$ 69,00
Por: R$ 59,00
Total: R$ 708,00
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- 12 meses de acesso
Pagamento recorrente
Cobrado mensalmente no cartão
De: R$ 79,00
Por: R$ 64,00 /mês
Total: R$ 768,00
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- Fidelidade de 12 meses
- Não compromete o limite do seu cartão
<Perguntas frequentes>
Nossos casos de sucesso
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa bagagem consegui um estágio logo no início do meu primeiro período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma é bem intuitiva e muuuuito didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda não tinha visto. A didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado, adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É um passo a passo incrível. Só não aprende quem não quer. Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da programação, irei assinar meu contrato como programador graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na área.
Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.