Heading

O protocolo wss:// não só é encriptado, mas também mais fiável.

Isso porque ws:// os dados não são encriptados, visíveis para qualquer intermediário. Os antigos servidores proxy não sabem sobre WebSocket, podem ver cabeçalhos “estranhos” e abortar a ligação.

Por outro lado, wss:// é WebSocket sobre TLS, (o mesmo que HTTPS é HTTP sobre TLS), a camada de segurança do transporte encripta os dados no remetente e descriptografa no receptor. Assim, os pacotes de dados são passados encriptados através de proxies. Não conseguem ver o que está dentro e deixam-nos passar.

Se o servidor concordar em mudar para WebSocket, deverá enviar o código 101 de resposta:

101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: hsBlbuDTkk24srzEOTBUlZAlC2g=

Aqui Sec-WebSocket-AcceptSec-WebSocket-Key, recodificado usando um algoritmo especial. O navegador usa-o para se certificar de que a resposta corresponde ao pedido.

Depois, os dados são transferidos usando o protocolo WebSocket, veremos a sua estrutura (“frames”) em breve. E isso não é HTTP.

Extensões e sub-protocolos

Podem existir cabeçalhos adicionais Sec-WebSocket-Extensions e Sec-WebSocket-Protocol que descrevem extensões e sub-protocolos.

por exemplo:

• Sec-WebSocket-Extensions: deflate-frame significa que o navegador suporta compressão de dados. Uma extensão é algo relacionado com a transferência dos dados, funcionalidade que estende o protocolo WebSocket. O cabeçalho Sec-WebSocket-Extensions é enviado automaticamente pelo navegador, com a lista de todas as extensões que suporta.

• Sec-WebSocket-Protocol: soap, wamp

Aqui o servidor responde que suporta a extensão “deflate-frame”, e apenas SOAP dos subprotocolos solicitados.

Transferência de dados

Comunicação WebSocket consiste em “frames” – fragmentos de dados, que podem ser enviados de ambos os lados, e podem ser de vários tipos:

• “text frames” – contêm dados de texto que as partes enviam umas às outras.
• “frames de dados binários” – contêm dados binários que as partes enviam umas às outras.
• “frames de ping/pong” são utilizados para verificar a ligação, enviados a partir do servidor, o navegador responde a estes automaticamente.

li> há também “frame de fecho de ligação” e algumas outras frames de serviço.

No browser, trabalhamos directamente apenas com frames de texto ou binários.

WebSocket .send() o método pode enviar tanto texto como dados binários.

uma chamada socket.send(body) permite body em string ou num formato binário, incluindo BlobArrayBuffer, etc. Não são necessárias definições: basta enviá-lo em qualquer formato.

Quando recebemos os dados, o texto vem sempre como string. E para os dados binários, podemos escolher entre Blob e ArrayBuffer formatos.

Isso é definido por socket.binaryType propriedade, é "blob" por defeito, por isso os dados binários vêm como Blob objectos.

Blob é um objecto binário de alto nível, integra-se directamente com <a><img> e outras etiquetas, de modo que é um padrão são. Mas para o processamento binário, para aceder a bytes de dados individuais, podemos alterá-lo para "arraybuffer":

socket.binaryType = "arraybuffer";socket.onmessage = (event) => { // event.data is either a string (if text) or arraybuffer (if binary)};

// every 100ms examine the socket and send more data// only if all the existing data was sent outsetInterval(() => { if (socket.bufferedAmount == 0) { socket.send(moreData()); }}, 100);

Fechamento da ligação

Normalmente, quando uma parte quer fechar a ligação (tanto o browser como o servidor têm direitos iguais), enviam um “frame fechado de ligação” com um código numérico e uma razão textual.

O método para isso é:

socket.close(, );

• code é um código especial de fecho de WebSocket (opcional)
• reason é uma string que descreve o motivo do fecho (opcional)

então a outra parte em close manipulador de eventos obtém o código e o motivo, e.g.:

// closing party:socket.close(1000, "Work complete");// the other partysocket.onclose = event => { // event.code === 1000 // event.reason === "Work complete" // event.wasClean === true (clean close)};

Valores de código mais comuns:

• 1000 – o fecho padrão, normal (utilizado se não code fornecido),
• 1006 – nenhuma forma de definir tal código manualmente, indica que a ligação foi perdida (sem frame de fecho).

Há outros códigos como:

• 1001 – a festa está a ir-se embora, por exemplo o servidor está a fechar, ou um browser deixa a página,
• 1009 – a mensagem é demasiado grande para processar,
• 1011 – erro inesperado no servidor,
• …e assim por diante.

A lista completa pode ser encontrada em RFC6455, §7.4.1.

códigos WebSocket são um pouco como códigos HTTP, mas diferentes. Em particular, quaisquer códigos inferiores a 1000 são reservados, haverá um erro se tentarmos definir tal código.

// in case connection is brokensocket.onclose = event => { // event.code === 1006 // event.reason === "" // event.wasClean === false (no closing frame)};

<!-- message form --><form name="publish"> <input type="text" name="message"> <input type="submit" value="Send"></form><!-- div with messages --><div></div>

let socket = new WebSocket("wss://javascript.info/article/websocket/chat/ws");// send message from the formdocument.forms.publish.onsubmit = function() { let outgoingMessage = this.message.value; socket.send(outgoingMessage); return false;};// message received - show the message in div#messagessocket.onmessage = function(event) { let message = event.data; let messageElem = document.createElement('div'); messageElem.textContent = message; document.getElementById('messages').prepend(messageElem);}