WebSocketTrazendo soquetes para a web

Jackson VeronezeSoftware Developer

jackson@jacksonveroneze.comhttps://jacksonveroneze.comhttps://br.linkedin.com/in/jacksonveroneze

Autores

Mario MendonçaSoftware Developer

mario.mendonca@gmail.comhttps://br.linkedin.com/in/mario-mendonca

O que são Sockets de rede e WebSockets?

WebSockets e Sockets são ambos protocolos de comunicação entre cliente e servidor.

Embora possuam certas semelhanças (além do nome), são especificações distintas para finalidades também diferentes.

Sockets

O protocolo Socket é usado para comunicação entre processos através da rede.

Transmite dados em formato binário.Para a comunicação na rede, ele opera sobre algum protocolo TCP

ou UDP para abstrair as complexidades inerentes do meio de transmissão.

Cada Socket conecta-se a uma porta específica. Sockets são soluções genéricas, geralmente usados para

comunicação de alto desempenho entre diferentes plataformas.

WebSockets

O protocolo WebSocket, por sua vez, possui a finalidade muito mais específica de ser implementado em navegadores web para comunicação persistente do código JavaScript com o servidor web, comunicando-se geralmente através da porta 80 e sempre sobre o protocolo TCP.

O formato do protocolo é em texto e o handshake que inicia a comunicação é muito parecido com o HTTP, assim servidores web podem facilmente servir HTTP e WebSockets na mesma porta.

O que é o Handshake?

Handshake é uma espécie de autorização que o cliente, ao solicitar uma conexão com Servidor WebSocket, envia ao Servidor e por sua vez valida essa autorização. Também é utilizado em vários protocolos da web como: FTP, TCP, HTTP, etc.

O que é WebSocket?

A web tem sido construída com base no conhecido paradigma de solicitação/resposta de HTTP.

Um cliente carrega uma página da web e, em seguida, nada acontece até que o usuário clique na próxima página.

Por volta de 2005, o AJAX começou a deixar a web mais dinâmica. Mesmo assim, toda a comunicação HTTP era direcionada pelo

cliente, o que exigia interação do usuário ou sondagem periódica para carregar novos dados do servidor.

O que é WebSocket?

Web Sockets são um full-duplex, conexão persistente bi-direcional de um navegador web para um servidor.

Depois que uma conexão socket é estabelecida a conexão permanece aberta até que o cliente ou servidor decide encerrar.

O que é WebSocket?

Ao contrário do que o nome indica, o protocolo WebSocket não é apenas sobre a web!

A especificação foi implementada a partir dos sistemas operacionais móveis e tablets, incluindo iOS, Android e Windows.

Isso significa que podemos usar o poder e a velocidade do protocolo WebSocket em um aplicativo de smartphone nativamente.

Os princípios fundamentais permanecem, independentemente de usarmos JavaScript, ou linguagens de programação.

Especificação WebSocket

A especificação WebSocket define uma API que estabelece conexões de "soquete" entre um navegador da web e um servidor.

Em outras palavras, há uma conexão persistente entre o cliente e o servidor e ambas as partes podem começar a enviar dados a qualquer momento.

Fluxo de uma conexão HTTP

Fluxo de uma conexão WebSocket

Estabelecendo uma conexão - Request

Estabelecendo uma conexão - Response

Connection handshake

Temos aqui um "connection handshake". Ou seja, uma comunicação breve entre o cliente e servidor indicando que há suporte para transações com WebSocket.

Não será possível operações com WebSocket a menos que haja um retorno "101"

O header Upgrade

Toda conexão Websocket começa uma requisição HTTP. Essa requisição é como qualquer outra, exceto por conter um

cabeçalho diferente: Upgrade. Ele indica que o cliente deseja atualizar a conexão para outro

protocolo. Nesse caso, Websocket.

Cabeçalhos na requisição do Handshake

No connection handshake são obrigatórios, na requisição, os seguintes cabeçalhos:

1.Upgrade - indicando o protocolo que estamos querendo adotar;2.Connection3.Sec-Websocket-Key - Trata-se de uma chave, com 16 bytes, e em

base 64 que será utilizada para atestar a validade da "atualização" oferecida pelo servidor e impedir ataques "cross protocol"

4.Sec-Websocket-Version

Cabeçalhos na resposta do Handshake

São obrigatórios na resposta os seguintes cabeçalhos:

1.Upgrade

2.Connection

3.Sec-Websocket-Accept - É o retorno que o servidor dá, e o cliente utiliza, para confirmar que o servidor entende o protocolo websocket.

Data Frame

NAVEGADORES

Verificar suporte

Casos de uso

Use o WebSocket sempre que precisar de uma conexão quase em tempo real de baixa latência entre o cliente e o servidor. Alguns exemplos de casos de uso:

Jogos on-line de vários jogadores

Aplicativos de chat

Links para esportes ao vivo

Atualização em tempo real de redes sociais

Abrir conexão

ws:. Conexões inseguras, idem ao http:

wss: Para uma conexão WebSocket segura e, do mesmo modo que https:, é usado para conexões HTTP seguras.

Eventos

A associação imediata de alguns manipuladores de eventos à conexão permite identificar quando a conexão está aberta, quando há mensagens recebidas ou quando há um erro.

onopen

onerror

onmessage

onclose

onopen

Uma vez que tivermos a conexão estabelecida, o evento open() será disparado para a nossa instância WebSocket.

onerror

Também podemos recuperar erros que possam ocorrer no decorrer de um Listener (escuta) que parta de um evento error.

onmessage

Quando uma mensagem é recebida o evento mensagem é disparado.

Este evento inclui uma propriedade chamada de data que poderá ser usada para acessar o conteúdo da mensagem.

onclose

Após termos finalizado a utilização do nosso WebSocket, o que precisamos fazer é encerrar a nossa.

Após a nossa conexão ter sido fechada, o navegador irá disparar um evento close.

Enviando mensagens

Os Websockets, podemos realizar o envio de tanto de textos como dados binários.

Demos

http://www.websocket.org/echo.html

Referências

https://leonardorifeli.com/development/2016/05/29/socket-no-php.html

https://www.html5rocks.com/pt/tutorials/websockets/basics/

http://www.devmedia.com.br/uso-de-websockets-e-html5/32267

http://pt.stackoverflow.com/questions/46839/o-que-s%C3%A3o-sockets-de-rede-e-websockets