O documento explica a diferença entre sockets e websockets, destacando que enquanto sockets servem para comunicação genérica entre diferentes plataformas, websockets são especificamente projetados para comunicação persistente entre navegadores web e servidores. O processo de handshake é essencial para a validação desse protocolo, permitindo uma conexão de baixa latência e quase em tempo real. Exemplos de uso incluem aplicações de chat, jogos online e atualizações em tempo real em redes sociais.

1. WebSocket
Trazendo soquetes para a web

2. Jackson Veroneze
Software Developer
jackson@jacksonveroneze.com
https://jacksonveroneze.com
https://br.linkedin.com/in/jacksonveroneze
Autores
Mario Mendonça
Software Developer
mario.mendonca@gmail.com
https://br.linkedin.com/in/mario-mendonca

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

11. Fluxo de uma conexão HTTP

12. Fluxo de uma conexão WebSocket

13. Estabelecendo uma conexão - Request

14. Estabelecendo uma conexão - Response

15. 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"

16. 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.

17. 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. Connection
3. 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

18. 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.

19. Data Frame

20. NAVEGADORES

21. Verificar suporte

22. 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

23. 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.

24. 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

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

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

27. 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.

28. 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.

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

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

31. 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