Tutorial de uso básico de HTML5 WebSockets

Autor：Eve Cole Data da Última Atualização：2010-10-07 18:43:37

Um dos novos recursos interessantes do HTML5 são os WebSockets, que nos permitem conversar com o servidor sem solicitações AJAX. Hoje, o Bin Go permitirá que você execute o WebSocket através do lado do servidor do ambiente PHP, crie um cliente e envie e receba informações do lado do servidor através do protocolo WebSockets.

O que são WebSockets?

WebSockets é uma tecnologia para comunicação bidirecional em uma interface (TCP), tipo tecnologia PUSH. Ao mesmo tempo, os WebSockets ainda serão baseados no padrão W3C. Até agora, as versões mais recentes dos navegadores Chrome e Safari já suportam WebSockets.

O que os WebSockets substituirão? WebSockets podem substituir Long Polling (tecnologia push de servidor PHP), que é um conceito interessante. O cliente envia uma solicitação ao servidor. Agora, o servidor não responderá aos dados que não estiverem prontos. Ele manterá a conexão aberta até que os últimos dados estejam prontos para serem enviados. solicitar. . Isto tem seus benefícios: reduz a latência em qualquer conexão e elimina a necessidade de criar uma nova conexão quando uma já estiver aberta. Mas o Long-Polling não é uma tecnologia sofisticada. Ainda é possível que ocorra a suspensão da solicitação, portanto, uma nova conexão precisará ser estabelecida.

Alguns aplicativos AJAX usam as técnicas acima - isso geralmente é atribuído à baixa utilização de recursos.

Imagine só, que ótimo seria se o servidor iniciasse sozinho pela manhã e enviasse dados aos clientes que desejam recebê-los sem ter que configurar previamente algumas portas de conexão! Bem-vindo ao mundo da tecnologia PUSH!

Etapa 1: Obtenha o servidor WebSocket

Este tutorial se concentrará mais na criação do cliente, em vez da execução no lado do servidor e outras operações.

Estou usando o XAMPP no Windows 7 para executar o PHP localmente. phpwebsockets é um servidor PHP WebSocket. (Na minha experiência, esta versão tem alguns pequenos problemas. Fiz algumas modificações nela e carreguei os arquivos de origem para compartilhar com todos) As diferentes versões abaixo também podem implementar o WebSocket. Se uma não funcionar, você pode tentar outras versões. Ou continue com o tutorial abaixo.

jWebSocket (Java)

web-socket-ruby (ruby)

Nó IO de soquete (node.js)

Inicie o servidor Apache

Etapa 2: modificar URLs e portas

Modifique o servidor com base na sua instalação anterior. Aqui está um exemplo de setup.class.php:

função pública __construct($host='localhost',$port=8000,$max=100)
{
$this->createSocket($host,$porta);
}

Navegue pelo arquivo e faça alterações, se apropriado.

Etapa 3: comece a criar o cliente

Vamos criar o modelo básico. Este é meu arquivo client.php:

<!DOCTYPEhtml>
<html>
<cabeça>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<title>Cliente WebSockets</title>
</head>
<corpo>
<div id="wrapper">
<div id="contêiner">
<h1>Cliente WebSockets</h1>
<div id="chatLog">
</div>
<p id="examples">por exemplo, tente 'oi', 'nome', 'idade', 'hoje'</p>
<input id="texto" type="texto" />
<button id="disconnect">Desconectar</button>
</div>
</div>
</body>
</html>

Criamos o modelo básico: um contêiner de log de bate-papo, uma caixa de entrada e um botão para desconectar.

Etapa 4: adicione algum CSS

Não existe um código sofisticado, apenas manipule o estilo do rótulo.

corpo {
família de fontes:Arial, Helvetica, sans-serif;
}
#recipiente{
borda: 5px cinza sólido;
largura:800px;
margem:0 automático;
preenchimento: 10px;
}
#chatLog{
preenchimento: 5px;
borda: 1px preto sólido;
}
#chatLog p {
margem:0;
}
.evento{
cor:#999;
}
.aviso{
peso da fonte: negrito;
cor:#CCC;
}

Etapa 5: WebSocket

Eventos Primeiro, vamos tentar entender o conceito de eventos WebSocket:

Eventos WebSocket:

Usaremos três eventos WebSocket:

onopen: Quando a interface é aberta

onmessage: Quando uma mensagem é recebida

onclose: Quando a interface está fechada

Como podemos conseguir isso?

Primeiro crie o objeto WebSocket

var soquete = new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");

Em seguida, detecte o evento da seguinte maneira

soquete.onopen=função(){
alert("O soquete foi aberto!");
}

Faça isso quando recebermos informações:

socket.onmessage = function(msg){
alerta(mensagem); //Incrível!
}

Mas ainda tentamos evitar o uso de alertas e agora podemos integrar o que aprendemos na página do cliente.

Etapa 6: JavaScript

Primeiro colocamos o código na função document.ready do jQuery e depois também verificamos se o navegador do usuário suporta WebSocket. Se não for compatível, adicionaremos um link para a página do Chrome.

Como você pode ver, se o navegador do usuário suportar WebSocket, executaremos a função connect(). Aqui está a funcionalidade principal: começaremos a criar eventos de abertura, fechamento e recebimento.

Definiremos a URL em nosso servidor.

soquete var;
var host = "ws://localhost:8000/socket/server/startDaemon.php";

Você pode descobrir que não há http no URL? Bem, sim, esta é uma URL WebSocket, usando um protocolo diferente.

Vamos continuar com a função connect(). Colocamos o código em um bloco try/catch para que, se houver algum problema com o código, possamos avisar o usuário. Criamos um WebSocket e passamos as informações para a função message(), que será explicada posteriormente. Criamos nossas funções onopen, onmessage e onclose. Deve-se observar que fornecemos o status da porta para o usuário. Isso não é obrigatório, mas o inserimos principalmente para facilitar a depuração.

CONECTANDO = 0
ABERTO = 1
FECHADO = 2
função conectar(){
tentar{
soquete var;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
var soquete = novo WebSocket(host);
mensagem('<p class="event">Status do soquete: '+socket.readyState);
soquete.onopen=função(){
mensagem('<p class="event">Status do soquete: '+socket.readyState+' (aberto)');
}
socket.onmessage = function(msg){
mensagem('<p class="message">Recebida: '+msg.data);
}
soquete.onclose=função(){
mensagem('<p class="event">Status do soquete: '+socket.readyState+' (Fechado)');
}
} capturar(exceção){
mensagem('<p>Erro'+exceção);
}
}

A função message() é muito simples, ela preenche o contêiner de log do chat com o texto que queremos exibir ao usuário. Criamos a classe apropriada para a tag de parágrafo (<p>) na função de evento de soquete e só temos uma tag de fechamento de parágrafo na função de mensagem.

função mensagem(mensagem){
$('#chatLog').append(msg+'</p>');
}

Resultados atuais

Se você seguiu passo a passo o tutorial acima, ótimo, criamos o template HTML/CSS , criamos e estabelecemos a conexão Websocket e mantivemos o progresso do usuário atualizado criando a conexão.

Etapa 7: enviar dados

Agora temos um botão de envio, mas também precisamos monitorar o evento quando o usuário pressiona o teclado e executa a função de envio. O '13' abaixo é o código ASCII correspondente à tecla Enter.

$('#texto').keypress(function(evento) {
if (event.keyCode == '13') {
enviar();
}
});

Aqui está a função send():

função enviar(){
var texto = $('#text').val();
if(texto==""){
mensagem('<p class="warning">Por favor insira uma mensagem');
retornar ;
}
tentar{
soquete.send(texto);
mensagem('<p class="event">Enviado: '+texto)
} capturar(exceção){
mensagem('<p class="warning"> Erro:' + exceção);
}
$('#texto').val("");
}

Abaixo precisamos:

soquete.send();

O código extra faz o seguinte: detecta se o usuário clica em retornar após não inserir nada, limpa a caixa de entrada e executa a função message().

Etapa 8: fechar o soquete

Fechar o Socket é bastante simples, basta adicionar um ouvinte de evento click para o botão de desconexão.

$('#disconnect').click(function(){
soquete.close();
});

Código JavaScript completo

$(documento).ready(function() {
if(!("WebSocket" na janela)){
$('#chatLog, entrada, botão, #exemplos').fadeOut("rápido");
$('<p>Ah, não, você precisa de um navegador que suporte WebSockets. Que tal o <a href=" Google'>http://www.google.com/chrome">Google Chrome</a>?</p >').appendTo('#container');
}outro{
//O usuário possui WebSockets
conectar();
função conectar(){
soquete var;
var host = "ws://localhost:8000/socket/server/startDaemon.php";
tentar{
var soquete = novo WebSocket(host);
mensagem('<p class="event">Status do soquete: '+socket.readyState);
soquete.onopen=função(){
mensagem('<p class="event">Status do soquete: '+socket.readyState+' (aberto)');
}
socket.onmessage = function(msg){
mensagem('<p class="message">Recebida: '+msg.data);
}
soquete.onclose=função(){
mensagem('<p class="event">Status do soquete: '+socket.readyState+' (Fechado)');
}
} capturar(exceção){
mensagem('<p>Erro'+exceção);
}
função enviar(){
var texto = $('#text').val();

if(texto==""){
mensagem('<p class="warning">Por favor insira uma mensagem');
retornar ;
}
tentar{
soquete.send(texto);
mensagem('<p class="event">Enviado: '+texto)
} capturar(exceção){
mensagem('<p class="aviso">');
}
$('#texto').val("");
}
função mensagem(mensagem){
$('#chatLog').append(msg+'</p>');
}
$('#texto').keypress(function(evento) {
if (event.keyCode == '13') {
enviar();
}
});
$('#disconnect').click(function(){
soquete.close();
});
}//Terminar conexão
} //Fim do resto
});

Etapa 9: Precisamos inserir algumas linhas de comando para executar o servidor WebSocket. O XAMPP fornece opções de shell mais convenientes. Clique no botão 'shell' do painel de controle do XAMPP e digite:

php -q caminhoparaservidor.php

Agora você tem um servidor WebSocket em execução!

Você terminou!

Quando a página é lida, é feita uma tentativa de criar uma conexão WebSocket, e o usuário pode então inserir informações e receber informações do servidor. Obrigado por sua paciência ao ler este tutorial. Espero que você tenha aprendido conhecimentos úteis com ele. Você pode aprender sobre os desenvolvimentos mais recentes do HTML5 WebSocket por meio da API WebSocket .