Como usar eventos de severas do servidor HTML5

A primeira coisa a perceber aqui é que chamamos de cabeçalho função nas linhas 2-3: esta é uma função usada para enviar Cabeçalhos HTTP crus. Nesse caso, chamamos isso duas vezes: o primeiro nas linhas 2 para configurar o Controle de cache Campo de cabeçalho e especificar diretrizes de cache (sem cache de página), a segunda nas linhas 3, para definir o Tipo de conteúdo para Texto/fluxo de eventos. Esses cabeçalhos são necessários para que nosso script funcione corretamente. Também é importante perceber que trabalhar corretamente, o cabeçalho A função deve sempre ser chamada antes que qualquer outra saída seja criada.

Depois de configurar os cabeçalhos HTML, acabamos de usar o requer uma vez declaração nas linhas 6 para exigir o conteúdo do animais.php arquivo, que contém a matriz que escrevemos antes. Em um cenário real, isso teria sido substituído por um Consulta SQL Para recuperar essas informações de um banco de dados.

Finalmente nas linhas 9-11, enviamos nossa resposta ao cliente: o JSON codificado Array de "Animais". Uma coisa muito importante a ser observada: o formato dos eventos do servidor exige que cada resposta enviada pelo servidor seja prefixada pelo dados: string e seguido por dois personagens newline. Nesse caso, usamos o \ n Caráter da Newline porque estamos executando em uma plataforma do tipo Unix; Para garantir a compatibilidade entre plataformas, teríamos usado o Php_eol constante.

É até possível quebrar a mensagem de resposta em várias linhas: nesse caso, cada linha, como dito antes, deve começar com "dados" e deve ser seguido por um único personagem de nova linha. A nova linha adicional é necessária apenas na última linha.

O servidor também pode controlar com que frequência o cliente deve tentar se reconectar (o padrão é 3 segundos) e o nome do evento (o padrão é "mensagem") enviado ao cliente. Para personalizar o primeiro, devemos usar o tente novamente Diretiva seguida pelo intervalo de tempo desejado, expresso em milissegundos. Por exemplo, para configurar um intervalo de 1 segundo:

eco "Repetir: 1000 \ n";

Observe que mesmo aqui, é necessária uma nova linha à direita. Para alterar o nome do evento, em vez disso, devemos usar o evento Diretiva:

Echo "Evento: Customevent \ n";

O evento padrão é "mensagem": isso é importante porque o evento deve ser especificado no código JavaScript do cliente ao adicionar o ouvinte do evento, como veremos em um momento.

Depois de enviar nossa resposta, chamamos de rubor Função: é necessário para opUt os dados para o cliente.

Código lateral do cliente

A primeira coisa que faremos o lado do cliente é preparar nosso arquivo HTML com a lista de animais disponíveis:

Este é realmente um HTML básico com um pouco de PHP para exibir a lista de animais no momento do carregamento da página e incluir nosso .Arquivo JS (script.js), mas servirá nosso propósito. Agora, vamos ver como realmente podemos usar eventos do lado do servidor. A primeira coisa que temos que fazer é instanciar um Objeto de origem do evento. Em nosso arquivo JavaScript, escreva:

Let Eventsource = New Eventsource ('Script.php '); 

Como você pode ver, passamos o caminho para o script do nosso servidor como um argumento no Eventsource construtor de objetos. Este objeto abrirá uma conexão com o servidor. Agora, devemos adicionar um ouvinte de eventos, Para que possamos executar algumas ações quando uma mensagem é recebida do servidor:

Let Eventsource = New Eventsource ('Script.php '); Eventsource.addEventListener ("mensagem", function (event) let data = json.Parse (evento.dados); deixe listelements = documento.getElementsByTagName ("li"); para (vamos i = 0; i < listElements.length; i++)  let animal = listElements[i].textContent; if (!data.includes(animal))  listElements[i].style.color = "red";   ); 

Quando uma mensagem é recebida, usamos o JSON.analisar método na linha 4 para transformar os dados enviados pelo servidor (uma string, contida no dados propriedade do objeto de evento), em uma matriz JavaScript.

Depois disso, nos linhas 7-11 através de todos os elementos com o

Eventsource.fechar()