Post on 15-Apr-2017
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.
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