HTML5 Tutorial Básico

HTML5 API

HTML5 Mídia

HTML5 Gráficos

HTML(5) Padrão de Escrita de Código HTML5 Eventos Enviados pelo Servidor

HTML5 WebSocket

WebSocket é um protocolo HTML5 um protocolo de comunicação full-duplex em uma única conexão TCP.

WebSocket torna a troca de dados entre o cliente e o servidor mais simples, permitindo que o servidor envie dados ativamente para o cliente. No WebSocket API, o navegador e o servidor precisam apenas completar um handshake, e eles podem criar uma conexão persistente diretamente e realizar transmissão de dados bidirecional.

No WebSocket API, o navegador e o servidor precisam fazer apenas um gesto de handshake, e então, um canal rápido é formado entre o navegador e o servidor. Eles podem transferir dados diretamente entre si.

Atualmente, muitos sites usam Ajax Polling para implementar tecnologias de push. Polling é feito em intervalos de tempo específicos (por exemplo, a cada1segundo), o navegador envia uma solicitação HTTP para o servidor, e em seguida, o servidor retorna os dados mais recentes para o navegador do cliente. Este modelo tradicional traz claramente várias desvantagens, como a necessidade contínua do navegador de enviar solicitações para o servidor, enquanto as solicitações HTTP podem conter cabeçalhos longos, onde os dados realmente úteis podem ser apenas uma pequena parte, o que claramente consumirá muitos recursos de largura de banda e outros.

HTML5 o protocolo WebSocket definido, pode economizar melhor recursos do servidor e largura de banda, e pode se comunicar de forma mais real-time.

O navegador envia uma solicitação de conexão WebSocket para o servidor usando JavaScript. Após a conexão ser estabelecida, o cliente e o servidor podem trocar dados diretamente por meio de conexão TCP.

Depois de obter a conexão WebSocket, você pode send() método para enviar dados para o servidor e onmessage para receber dados retornados pelo servidor.

A API é usada para criar objetos WebSocket.

var Socket = new WebSocket(url, [protocol]);

O primeiro parâmetro do código acima, url, especifica o URL da conexão. O segundo parâmetro, protocol, é opcional e especifica o subprotocolo aceito.

Propriedades WebSocket

A seguir estão as propriedades do objeto WebSocket. Supondo que tenhamos usado o código acima para criar o objeto Socket:

Propriedade	Descrição
Socket.readyState	Propriedade apenas de leitura readyState Indica o estado da conexão e pode ser um dos seguintes valores: 0 - Indica que a conexão ainda não foi estabelecida. 1 - Indica que a conexão já foi estabelecida e pode ser usada para comunicação. 2 - Indica que a conexão está em processo de encerramento. 3 - Indica que a conexão já foi encerrada ou que a conexão não pode ser aberta.
Socket.bufferedAmount	Propriedade apenas de leitura bufferedAmount Já foi colocado no buffer pela função send() e está esperando para ser transmitido, mas ainda não foi enviado UTF-8 Número de bytes de texto.

Eventos WebSocket

A seguir estão os eventos do objeto WebSocket. Supondo que tenhamos usado o código acima para criar o objeto Socket:

Evento	Gerenciador de eventos	Descrição
open	Socket.onopen	Disparado ao estabelecer a conexão
message	Socket.onmessage	Disparado ao receber dados do servidor pelo cliente
error	Socket.onerror	Disparado quando ocorre um erro de comunicação
close	Socket.onclose	Disparado ao fechar a conexão

Métodos WebSocket

A seguir estão os métodos do objeto WebSocket. Supondo que tenhamos usado o código acima para criar o objeto Socket:

Método	Descrição
Socket.send()	Enviar dados usando conexão
Socket.close()	Fechar conexão

Exemplo de WebSocket

O protocolo WebSocket é essencialmente um protocolo baseado em TCP.

Para estabelecer uma conexão WebSocket, o navegador do cliente deve primeiro enviar uma solicitação HTTP para o servidor. Essa solicitação é diferente das solicitações HTTP comuns, pois contém algumas informações de cabeçalho adicionais. A informação de cabeçalho adicional "Upgrade: WebSocket" indica que essa é uma solicitação HTTP de solicitação de atualização de protocolo. O servidor analisa essas informações de cabeçalho adicionais e gera uma mensagem de resposta para retornar ao cliente. Assim, a conexão WebSocket entre o cliente e o servidor é estabelecida e ambos podem passar informações livremente por esse canal de conexão. Essa conexão permanecerá ativa até que um dos lados, cliente ou servidor, encerre voluntariamente a conexão.

HTML e JavaScript do cliente

A maioria dos navegadores suporta a interface WebSocket(), você pode tentar o exemplo nos seguintes navegadores: Chrome, Mozilla, Opera e Safari。

w3Conteúdo do arquivo codebox_websocket.html

Exemplo

<!DOCTYPE HTML>
<html>
　　　<head>
　　　<meta charset="utf-8">
　　　<title>Métodos de uso do WebSocket, site de tutoriais básicos(oldtoolbag.com)</title>
　　　　
　　　　　　<script type="text/javascript">
　　　　　　　　　function WebSocketTest()
　　　　　　　　　{
　　　　　　　　　var x = document.getElementById("websocket");
　　　　　　　　　　　　if ("WebSocket" in window)
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　x.innerHTML="Seu navegador suporta WebSocket!";
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　//　Abrir um websocket
　　　　　　　　　　　　　　　var ws = new WebSocket("ws://echo.websocket.org");
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onopen = function()
　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　//　WebSocket conectado, envie dados usando o método send()
　　　　　　　　　　　　　　　　　　ws.send("Enviar dados");
　　　　　　　　　　　　　　　　　　x.innerHTML="Os dados estão sendo enviados...";
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onmessage = function(evt)　
　　　　　　　　　　　　　　　{　
　　　　　　　　　　　　　　　　　　var received_msg = evt.data;
　　　　　　　　　　　　　　　　　　x.innerHTML="Os dados foram recebidos, tutorial básico(oldtoolbag.com)...";
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onclose = function()
　　　　　　　　　　　　　　　{　
　　　　　　　　　　　　　　　　　　//　Fechar websocket
　　　　　　　　　　　　　　　　　　x.innerHTML="A conexão foi encerrada...";　
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　else
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　//　Seu navegador não suporta WebSocket
　　　　　　　　　　　　　　　x.innerHTML="Seu navegador não suporta WebSocket!";
　　　　　　　　　　　　}
　　　　　　　　　}
　　　　　　</script>
　　　　　　　　
　　　</head>
　　　<body>
　　　　　　　
　　　　　　<div id="sse"><
　　　　　　　　　<input type="button" onclick="WebSocketTest()" value="运行 WebSocket">
　　　　　　</div>
　　　　　　<div id="websocket"></div>
　　　　　　
　　　</body>
</html>

Teste veja ‹/›

Os resultados do teste estão na figura a seguir:

Diferenças entre WebSocket e Socket

A comunicação de software tem sete camadas de estrutura, as três camadas inferiores são mais voltadas para a comunicação de dados, as três camadas superiores são mais voltadas para o processamento de dados, e a camada de transmissão é a ponte entre as três camadas superior e inferior, cada uma realiza diferentes trabalhos, e os protocolos de camada superior dependem dos protocolos de camada inferior. Baseado no conceito dessa estrutura de comunicação.
Socket na verdade não é um protocolo, é uma camada de aplicação e TCP/A família de protocolos IP é uma camada de abstração intermediária de comunicação, que é um conjunto de interfaces. Quando dois hosts comunicam-se, o Socket organiza os dados para que sejam compatíveis com o protocolo especificado. A conexão TCP depende mais do protocolo IP de baixa camada, enquanto a conexão IP depende de camadas mais baixas, como a camada de enlace.
WebSocket é um protocolo de camada de aplicação típico.

Socket é um protocolo de camada de controle de transmissão
WebSocket é um protocolo de camada de aplicação

HTML(5) Padrão de Escrita de Código HTML5 Eventos Enviados pelo Servidor