Um novo recurso legal no HTML5 é o WebSockets, que nos permite conversar com o servidor sem solicitações de AJAX. Hoje, o Bingo permitirá que todos executem o WebSocket pelo lado do servidor do ambiente PHP, criem clientes e enviem e recebam informações do lado do servidor através do protocolo WebSockets.
O que são websockets?
O WebSockets é uma tecnologia que executa comunicação bidirecional em uma interface (TCP) e um tipo de tecnologia push. Ao mesmo tempo, o WebSockets ainda será baseado no padrão W3C.
O que os websockets substituirão? A WebSockets pode substituir a pesquisa longa (PHP Server Push Technology), que é um conceito interessante. O cliente envia uma solicitação para o servidor. Em seguida, envia outra solicitação. Isso tem seus benefícios: reduzir a latência em qualquer conexão e não precisa criar outra nova conexão quando uma conexão já estiver aberta. Porém, a enxugar longa não é uma técnica sofisticada, e ainda é possível que as pausas de solicitação ocorram, portanto, será necessária uma nova conexão.
Alguns aplicativos AJAX usam a tecnologia mencionada acima - que é frequentemente atribuída à baixa utilização de recursos.
Imagine o quão bom seria se o servidor iniciar e enviar dados para clientes que gostariam de receber sem precisar configurar algumas portas de conexão com antecedência! Bem -vindo ao mundo da tecnologia push!
Etapa 1: Obtenha o servidor WebSocket
Este tutorial se concentrará mais na criação do cliente do que na execução do servidor.
Eu uso o XAMPP com base no Windows 7 para implementar o PHP em execução localmente. O PHPWebsockets é um servidor PHP WebSocket. (Na minha experiência, existem alguns pequenos problemas com esta versão. Fiz algumas modificações e carreguei o arquivo de origem para compartilhar com você.) As versões seguintes diferentes também podem implementar o WebSocket. Outras versões.
JWebSocket (Java)
Web-Socket-Ruby (Ruby)
Socket Io-Node (Node.js)
Inicie o servidor Apache
Etapa 2: Modificar URLs e portas
De acordo com a sua instalação anterior, modifique o servidor, o seguinte é um exemplo em setup.class.php:
| Função pública __construct ($ host = 'localhost', $ port = 8000, $ max = 100) { $ this-> createSocket ($ host, $ port); } |
Navegue no arquivo e faça alterações, se apropriado.
Etapa 3: comece a criar um cliente
Aqui está meu arquivo client.php:
| <! Doctype html> <html> <head> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <title> WebSockets Client </ititle> </head> <Body> <div id = "wrapper"> <div id = "contêiner"> <h1> cliente websockets </h1> <div id = "chatlog"> </div> <!-#chatlog-> <p id = "exemplos"> por exemplo, tente 'oi', 'nome', 'idade', 'hoje' </p> <input id = "text" type = "text" /> <button id = "desconecte"> desconecte </botão> </div> <!-#Container-> </div> </body> </html> |
Criamos o modelo básico: um contêiner de log de bate -papo, uma caixa de entrada de entrada e um botão desconectado.
Etapa 4: adicione alguns CSs
Não há código sofisticado, basta lidar com o estilo da tag.
corpo { |
Etapa 5: WebSocket
Eventos primeiro vamos tentar entender o conceito de eventos da WebSocket:
Eventos da WebSocket:
Usaremos três eventos do WebSocket:
ONOPEN: quando a interface é aberta
OnMessage: quando uma mensagem é recebida
ONCLOSE: Quando a interface está fechada
Como conseguimos isso?
Primeiro, crie um objeto WebSocket
var soket = novo websocket (& ldquo; ws: // localhost: 8000/soquete/server/startdaemon.php & rdquo;);
Em seguida, detecte o evento como segue
| Socket.OnoPen = function () { alerta ("soquete foi aberto!"); } |
Faça isso quando recebermos a mensagem:
| Socket.onMessage = function (msg) { Alerta (msg); } |
Mas ainda tentamos evitar o uso de alerta e agora podemos integrar o que aprendemos na página do cliente.
Etapa 6: JavaScript
Primeiro, colocamos o código no documento. Função do jQuery e, em seguida, também precisamos verificar se o navegador do usuário suporta o WebSocket. Se não for suportado, adicionaremos um link à página do navegador Chrome.
| $ (document) .ready (function () { if (! ("webSocket" na janela)) { $ (' #chatlog, entrada, botão, #example'). Fadeout ("Fast"); $ ('<p> Oh não, você precisa de um navegador que suporta websockets. Que tal <a href = "google'> http://www.google.com/chrome"> google chrome </a>? </p > '). Appendto ('#contêiner '); }outro{ // o usuário tem websockets conectar(); function Connect () { // O código de função de conexão está abaixo } }); |
Como você pode ver, se o navegador do usuário suportar WebSocket, executaremos a função Connect (). Aqui está a função principal, começaremos a criar eventos abertos, fechados e recebidos.
Definiremos o URL em nosso servidor.
| soquete var; var host = "ws: // localhost: 8000/soquete/server/startdaemon.php"; |
Você pode descobrir por que não há HTTP no URL? Bem, sim, este é um URL da WebSocket que usa um protocolo diferente.
Vamos continuar a concluir a função Connect () abaixo. Criamos um WebSocket e passamos as informações para a função Mensagem (), e explicaremos mais tarde. Criamos nossas funções ONOPEN, ONMESSAGE e ONCLOSE. Deve -se notar que fornecemos ao usuário status da porta, o que não é necessário, mas o colocamos principalmente para a conveniência da depuração.
| Conectando = 0 Aberto = 1 Fechado = 2 function Connect () { tentar { soquete var; var host = "ws: // localhost: 8000/soquete/server/startdaemon.php"; var soket = new websocket (host); mensagem ('<p class = "event"> status do soquete:'+soquete.readyState); Socket.OnoPen = function () { mensagem ('<p class = "event"> status do soquete:'+soquete.readyState+'(aberto)'); } Socket.onMessage = function (msg) { mensagem ('<p class = "message"> recebido:'+msg.data); } Socket.Onclose = function () { mensagem ('<p class = "event"> status do soquete:'+soquete.readyState+'(fechado)'); } } catch (exceção) { mensagem ('<p> erro'+exceção); } } |
A função message () é simples, preenche o texto que queremos apresentar ao usuário no contêiner de log de log. Criamos a classe apropriada para a tag parágrafo (<p>) na função de evento de soquete e temos apenas uma etiqueta final do parágrafo na função da mensagem.
| Mensagem da função (msg) { $ ('#chatLog'). Anexe (msg+'</p>'); } |
Resultados atuais
Se você seguiu o tutorial acima passo a passo, é ótimo, criamos modelos HTML/CSS, criamos e estabelecemos conexões WebSocket e mantivemos o progresso do usuário atualizado criando conexões.
Etapa 7: Enviar dados
Agora, temos o botão Enviar, mas ainda precisamos ouvir o usuário pressionando o evento do teclado e execute a função Enviar.
| $ ('#text'). KeyPress (function (event) { if (event.KeyCode == '13') { enviar(); } }); |
Aqui está a função send ():
| função send () { Var text = $ ('#text'). val (); if (text == "") { mensagem ('<p class = "aviso"> insira uma mensagem'); retornar ; } tentar { Socket.send (texto); mensagem ('<p class = "event"> enviado:'+texto) } catch (exceção) { mensagem ('<p class = "aviso"> erro:' + exceção); } $ ('#text'). val (""); } |
Aqui precisamos:
Socket.send ();
O código extra faz o seguinte trabalho: detecte se o usuário não inseriu nada além de voltar, limpe a caixa de entrada de entrada e execute a função message ().
Etapa 8: Feche o soquete
A operação para fechar o soquete é bastante simples, basta adicionar um evento de clique no botão Desconectar para ouvir.
| $ ('#desconectar'). Clique (function () { Socket.Close (); }); |
Código JavaScript completo
| $ (document) .ready (function () { if (! ("webSocket" na janela)) { $ (' #chatlog, entrada, botão, #example'). Fadeout ("Fast"); $ ('<p> Oh não, você precisa de um navegador que suporta websockets. Que tal <a href = "google'> http://www.google.com/chrome"> google chrome </a>? </p > '). Appendto ('#contêiner '); }outro{ // o usuário tem websockets conectar(); function Connect () { soquete var; var host = "ws: // localhost: 8000/soquete/server/startdaemon.php"; tentar { var soket = new websocket (host); mensagem ('<p class = "event"> status do soquete:'+soquete.readyState); Socket.OnoPen = function () { mensagem ('<p class = "event"> status do soquete:'+soquete.readyState+'(aberto)'); } Socket.onMessage = function (msg) { mensagem ('<p class = "message"> recebido:'+msg.data); } Socket.Onclose = function () { mensagem ('<p class = "event"> status do soquete:'+soquete.readyState+'(fechado)'); } } catch (exceção) { mensagem ('<p> erro'+exceção); } função send () { Var text = $ ('#text'). val (); if (text == "") { mensagem ('<p class = "aviso"> insira uma mensagem'); retornar ; } tentar { Socket.send (texto); mensagem ('<p class = "event"> enviado:'+texto) } catch (exceção) { mensagem ('<p class = "aviso">'); } $ ('#text'). val (""); } Mensagem da função (msg) { $ ('#chatLog'). Anexe (msg+'</p>'); } $ ('#text'). KeyPress (function (event) { if (event.KeyCode == '13') { enviar(); } }); $ ('#desconectar'). Clique (function () { Socket.Close (); }); } // END CONNECT } // END ELSE }); |
Etapa 9: Ao executar o servidor Websocket, precisamos inserir algumas linhas de comando. Clique no botão "Shell" no painel de controle XAMPP e digite:
| PHP -Q PATH TO Server.php |
Agora você tem o servidor Websocket em execução!
A missão está feita!
Quando a página for lida, será feita uma tentativa de criar uma conexão WebSocket e o usuário pode inserir as informações e recebê -las no servidor. Obrigado por sua paciência em ler este tutorial. Você pode aprender sobre os desenvolvimentos mais recentes no HTML5 WebSocket através da API do WebSocket.