HTML5 Server Push_Motic Node Java College Acabamento

Para aplicativos da Web em geral, a maioria dos desenvolvedores não é estranha. Nos aplicativos da Web, o modo interativo de solicitação/ resposta é usado entre o navegador e o servidor. O navegador emite uma solicitação e o servidor gera a resposta correspondente de acordo com a solicitação. O navegador é processado para a resposta de recebimento aos usuários. O formato de resposta pode ser HTML, XML ou JSON. Com o estilo de arquitetura restante e a popularidade do Ajax, o servidor usa mais o formato de dados de resposta. O aplicativo da Web usa o objeto XMLHTTPREQUEST para enviar a solicitação e atualizar dinamicamente o conteúdo da página de acordo com os dados retornados pelo servidor. De um modo geral, as operações dos usuários na página, como clicar ou mover o mouse, desencadearão os eventos correspondentes. Uma solicitação é emitida pelo objeto XMLHTTPREQUEST, e a página possui uma atualização local depois que o servidor responde. As deficiências deste método são que os dados gerados pelo servidor não podem ser notificados do navegador a tempo, mas ele precisa ser obtido pelo navegador até que a próxima solicitação seja enviada. Para alguns aplicativos com requisitos de dados de alto tempo, esse atraso é inaceitável. Para atender às necessidades de tais aplicativos, é necessário algumas maneiras de enviar dados do servidor para o navegador para garantir que as alterações de dados no lado do servidor possam ser notificadas para os usuários pela primeira vez. Existem muitas soluções comuns, que podem ser divididas em duas categorias. A diferença entre esses dois métodos é se é baseado no protocolo HTTP. A prática de não usar o protocolo HTTP é usar as novas especificações do WebSocket do HTML 5, e o método de usar o protocolo HTTP inclui rotação simples, tecnologia COMET e o evento de push do servidor HTML 5 descrito neste artigo. Essas tecnologias serão introduzidas abaixo.

Antes de introduzir o evento Push de servidor HTML 5, primeiro introduza parte do número de dados de push de dados do servidor de servidor mencionados acima. O primeiro é o WebSocket. A especificação do WebSocket é uma parte importante do HTML 5. Ela foi suportada por muitos navegadores convencionais e muitos aplicativos desenvolvidos com base no WebSocket. Assim como o nome é expresso, o WebSocket usa uma conexão de jaqueta, com base no protocolo TCP. Depois de usar o WebSocket, ele cria um conjunto de conexões de palavras entre o servidor e o navegador, que podem ser transmitidas em dados de dois caminhos. A função do WebSocket é muito poderosa e é flexível de usar, que pode ser adequado para diferentes cenários. No entanto, a tecnologia WebSocket também é relativamente complicada, incluindo a implementação do servidor e o lado do navegador, diferente dos aplicativos da Web comuns.

Exceto no WebSocket, outros métodos de implementação são baseados no protocolo HTTP para alcançar o efeito do impulso real do tempo. O primeiro método é a rotação simples, ou seja, o navegador envia uma solicitação ao servidor de tempos em tempos para perguntar se há atualização de dados. Essa abordagem é relativamente simples e pode resolver o problema até certo ponto. No entanto, considere cuidadosamente o intervalo de tempo de rotação. Se o intervalo entre a rotação for muito longo, fará com que os usuários não recebam os dados atualizados a tempo;

A tecnologia do cometa melhorou as deficiências de rotação simples, usando consultas longas -rodadas. Cada solicitação de rotação longa, o servidor manterá a conexão em um período de abertura por um período de tempo, em vez de fechá -lo imediatamente após a conclusão da resposta. A vantagem disso é que, dentro do período em que a conexão é aberta, a atualização de dados gerada pelo servidor pode ser retornada ao navegador a tempo. Quando uma conexão longa é fechada, o navegador abrirá imediatamente uma nova conexão longa para continuar a solicitação. No entanto, a implementação da tecnologia COMET requer o suporte de uma terceira biblioteca no servidor e no lado do navegador. Em comparação resumida, as quatro tecnologias diferentes mencionadas acima não são recomendadas para uso devido a seus defeitos. A tecnologia do cometa não faz parte do padrão HTML 5. As especificações do WebSocket e o servidor Push Technology fazem parte do padrão HTML 5. No entanto, as especificações do WebSocket são mais complicadas e são adequadas para cenas que precisam ser complicadas e comunicação de dados de dois caminhos. Para cenários simples de push de dados do servidor, basta usar eventos de push do servidor.

Em termos de suporte ao navegador, os eventos de push do servidor foram suportados na maioria dos desktops e navegadores móveis, exceto o IE. Os navegadores e versões do evento Push Server de suporte incluem: Firefox 6.0+, Chrome 6.0+, Safari 5.0+, Opera 11.0+, iOS Safari 4.0+, Opera Mobile 11.1+, Chrome para Android 25.0+, Firefox para Andr Oid 19.0 + e BlackBerry Browser 7.0+ et al. O apoio do IE tem uma introdução detalhada nos capítulos seguintes.

As seguintes especificações da especificação do evento de push do servidor são especificadas.

A especificação de eventos enviados ao servidor é parte integrante da especificação HTML 5. Essa especificação é relativamente simples, consistindo principalmente de duas partes: a primeira parte é o protocolo de comunicação entre o servidor e o lado do navegador, e a segunda parte é o objeto Eventsource usado pelo navegador para usar o JavaScript. O protocolo de comunicação é um protocolo simples baseado em texto puro. O conteúdo da resposta no servidor é o texto/fluxo de eventos. O conteúdo do texto da resposta pode ser considerado um fluxo de eventos, composto por diferentes eventos. Cada evento consiste em duas partes: tipo e dados, e cada evento pode ter um identificador opcional. O conteúdo de diferentes eventos é separado pelas linhas vazias (/r/n) que incluem apenas o carro e o símbolo real. Os dados de cada evento podem ser compostos de várias linhas. A lista de código 1 fornece um exemplo da resposta do servidor.

 Dados: Primeiro EventData: Segundo EventID: 100Event: MyEventData: Terceiro EventID: 101: Este é um comentário: Fouteh EventData: Fours Event Continue

Conforme mostrado na Lista 1, cada evento é separado por uma linha vazia. Para cada linha, o cólon (:) é o tipo de linha antes e o valor correspondente por trás do cólon. Os tipos possíveis incluem:

1. O tipo está em branco, indicando que a linha é um comentário e será ignorada durante o processamento.
2. O tipo são dados, o que significa que a linha contém dados. Pode aparecer muitas vezes no início dos dados. Todas essas linhas são dados do incidente.
3. O tipo é o evento, indicando que o banco é usado para declarar o tipo de evento. Ao receber os dados, o navegador produzirá um tipo de evento correspondente.
4. O tipo é ID, indicando que a linha é usada para declarar o identificador do evento.
5. O tipo está novamente novamente, indicando que a linha é usada para declarar o tempo de espera antes que o navegador seja conectado após a desconexão da conexão.

No código acima, o primeiro evento contém o primeiro evento de dados, que gerará eventos padrão; O evento é Fours Event/Nfounth Eovent continua. Quando existem várias linhas de dados, os dados reais são conectados pelos dados para a alteração da linha.

Se os dados retornados pelo servidor contiver o identificador do evento, o navegador registrará o identificador do evento recebido recentemente. Se a conexão com o servidor for interrompida, quando a extremidade do navegador estiver conectada novamente, o logotipo da última vez que o evento será obtido pelo HTTP Head-Event-ID. O servidor pode ser determinado pelo identificador de evento enviado pelo lado do navegador para determinar qual evento começa a continuar a conexão.

Para a resposta retornada pelo lado do servidor, o lado do navegador precisa usar o objeto Eventsource no JavaScript para processamento. O Eventsource usa um método de monitoramento de eventos padrão, que só precisa adicionar o método de processamento de eventos correspondente ao objeto. O Eventsource fornece três eventos padrão, conforme mostrado na Tabela 1.

Como mencionado anteriormente, o servidor pode retornar um evento de tipo personalizado. Para esses eventos, você pode usar o método AddEventListener para adicionar o método de processamento de eventos correspondente. A Lista de Código 2 fornece um exemplo do objeto Eventsource.

 var es = novo Eventsource ('eventos'); dados);});

Como mostrado acima, depois de criar o objeto EventSource especificamente, o método de processamento de eventos pode ser adicionado através dos métodos OnMessage e AddEventListener. Quando o servidor tiver novos eventos, o método de processamento de eventos correspondente será chamado. O papel da propriedade OnMessage do objeto Eventsource é semelhante ao de AddEventListener ('Mensagem'), mas o atributo onMessage suporta apenas um método de processamento de eventos. Após a introdução do conteúdo de especificação do evento Push Server, a implementação do servidor é introduzida abaixo.

Pode ser visto a partir da descrição do protocolo de comunicação na seção anterior, que o evento de push do servidor é um protocolo mais simples. A implementação do lado do servidor é relativamente simples. Uma variedade de diferentes tecnologias de servidor pode ser encontrada na comunidade de código aberto. Não é difícil desenvolver -se. Este artigo usa o Java como o idioma de implementação do servidor. Implementando correspondentemente o projeto Open Bound Based-EventSource-Servlet, consulte Recursos de referência. A seguir, é apresentado um exemplo específico para ilustrar como usar o projeto Jetty-OventSource-Servlet. O exemplo é usado para simular o movimento aleatório de um objeto em um espaço limitado. O objeto inicia a partir de uma posição aleatória e, em seguida, seleciona aleatoriamente uma direção da direção superior, inferior, esquerda e direita e move uma distância aleatória nessa direção. O servidor está constantemente alterando a posição do objeto e empurrando as informações de localização para o navegador, exibido pelo navegador.

服务器端的实现由两部分组成 ： 一部分是用来产生数据的 org.eclipse.Jetty.Servlets.EventSource 接口的实现 ， 另一部分是作为浏览器访问端点的继承自 org.eclipse.Jetty.Servlets.EventsourceServlet 类的Implementação do servlet. O código a seguir fornece uma classe de implementação da interface Eventsource.

Eventsource Interface Implementation Class Movementource

 Classe pública IMPRESSÃO DE IMPRESSÃO DE IMPRESSÃO DE EVENTOS {Private Int Width = 800; Logger .getLogger (getClass (). GetName ()); .nextint (largura); (LastEventId); .split (,); POS [1], 10);} Catch (numberformatexception e) {} if (isValidMove (xpos, ypos)) {x = xpos; Informação.); .data (id) de acordo com o local; , e); mover = getMove (); Julgando se a posição de movimento atual é legal. xdir = novo int}; )};}}

O MovemEventsource precisa implementar o método ONOPEN, ONRESUME e OCLOSE da interface Eventsource. Os métodos OnoPen e OnResume têm um parâmetro da interface do EventSource.Mitter, que pode ser usada para enviar dados. Os métodos contidos na interface do EventSource. O método OnResume também contém um parâmetro adicional lastEventId, indicando o identificador do evento mais recente enviado pelo cabeçalho do último evento.

A lógica principal dos eventos gerados no evento na classe MovemEventSource está no método de consulta. Este método contém um ciclo ilimitado que altera a posição a cada 2 segundos e, ao mesmo tempo, envie a posição atualizada para o navegador termina através do método de dados da posição de atualização através do método de dados da interface do EventSource.. Cada evento possui um identificador correspondente e o valor do identificador é a própria posição. Se o navegador for reconectado após a desconexão da conexão, o objeto poderá ser movido da última posição.

É simples implementar o serviço do serviço -correspondente à classe MovementEventSource. Na implementação do método NewEventSource, uma aula do MovemEventsource precisa ser retornada, conforme mostrado abaixo. Sempre que o navegador é estabelecido, o serviço cria um objeto de uma nova classe do MovemEventSource para lidar com a solicitação.

 Classe pública movementServlet ExtendSarceSorceServlet {@Override Protected EventSource NewsSource (httpServletRequest, string clientId) Retorne o novo movimentoEventSource (800, 600, 20);}}

Na implementação do servidor, deve -se notar que o suporte ao filtro de servidor correspondente deve ser adicionado. Este é o requisito da estrutura de continuões do Jetty em que o projeto Jetty-OventSource-Servlet depende, caso contrário, haverá erros no caso. O método de adicionar um filtro é adicionar o conteúdo de configuração, como mostrado abaixo, no arquivo web.xml.

 <filter> <filter-name> continuação </filter-name> <filter-Class> org.eclipse.jetty.continuation.continuationfilter </filter-Class> </filter> <filtro-mappping> <filter-Name> Continuação </filter-name> <url-tattern>/sse/*</url-tattern> </filter-mapping>

A implementação do lado do navegador é relativamente simples. O código a seguir fornece a implementação correspondente. Use um quadrado na página para representar um objeto. Quando um novo evento é recebido, a posição do bloco está na página de acordo com as informações de coordenadas fornecidas nos dados do evento.

 var es = novo eventsource ('sse/movimento'); [1];

Depois de introduzir o final do lado do servidor básico e o final do navegador, o suporte mais importante do IE é introduzido abaixo.

Um grande problema usando o objeto Native Eventsource do navegador é que o IE não fornece suporte. Para fornecer o mesmo apoio ao IE, geralmente existem duas maneiras. A primeira maneira é usar o objeto Original Eventsource em outros navegadores, usando a rotação simples ou a tecnologia de cometa no IE; . Este artigo usa a tecnologia Polyfill, apenas carregando uma terceira biblioteca JavaScript na página. A aplicação do código lateral do navegador não precisa ser alterado. Geralmente, é recomendável usar um segundo método, porque, dessa maneira, apenas uma tecnologia de implementação é necessária no lado do servidor.

Não é fácil fornecer um objeto Primário de Eventos Primários no IE. Em teoria, apenas o objeto XMLHTTPREQUEST é necessário para obter o conteúdo da resposta do lado do servidor e, através da análise de texto, os eventos correspondentes podem ser extraídos e o método de processamento de eventos correspondente pode ser acionado. O problema é que o objeto xmlHttPrequest no IE não suporta o conteúdo da resposta da parte obtida. Somente após a conclusão da resposta, ela pode ser obtida. Porque o evento de push do servidor usa uma conexão longa. Quando a conexão está sempre aberta, o evento correspondente não pode ser acionado através do objeto xmlHttPrequest e o evento correspondente não pode ser acionado. Mais especificamente, quando o Estado Ready do objeto xmlHttPrequest for 3 (ReadyState_Interactive), seu atributo ResponseText não pode ser obtido.

Para resolver o problema dos objetos xmlHttPrequest no IE, você precisa usar o objeto XDomainRequest introduzido no IE 8. O papel do objeto XDomainRequest é enviar uma solicitação cruzada de Ajax. O objeto XDomainRequest fornece o evento OnProgress. Quando o evento OnProgress ocorre, algum conteúdo da resposta pode ser obtido através da propriedade RespoteText. Essa é a maior diferença entre o objeto XDomainRequest e o objeto xmlHttPrequest. Depois de usar o objeto XDomainRequest para abrir a conexão com o lado do servidor, quando os novos dados são gerados no servidor, ele pode ser processado pelo evento OnProgress do evento XDOMAINRequest.

No entanto, devido ao objetivo original do objeto XDomainRequest, é emitir solicitações cruzadas de Ajax. Essas restrições afetarão sua implementação como um objeto Eventsource. As restrições e soluções específicas são mostradas abaixo:

1. A resposta do servidor precisa conter a cabeça de origem-control-arigin, que é usada para declarar qual é o URL permitido de quais domínios permitir. *Significa permitir o acesso de qualquer domínio, e esse valor não é recomendado. Geralmente, use o mesmo domínio que o aplicativo atual, restringindo o acesso apenas do domínio frontal.
2. A solicitação do objeto XDomainRequest não pode conter uma cabeça HTTP personalizada, que limita o identificador do navegador recebido recentemente pelo navegador. Esse identificador só pode ser passado por outras maneiras de solicitações HTTP, como os parâmetros solicitados pelo GET ou pelo corpo de conteúdo da solicitação de postagem.
3. O tipo de conteúdo (tipo de conteúdo) do objeto XDomainRequest pode ser apenas texto/simples. Isso significa que, quando a solicitação de postagem é usada, a estrutura usada pelo servidor, como o serviço, não analisa automaticamente o conteúdo da solicitação de postagem. O conteúdo da solicitação original só pode ser analisado no servidor para obter os valores dos parâmetros.
4. A solicitação emitida pelo objeto XDomainRequest não inclui nenhuma informação relacionada à autenticação do usuário, incluindo cookies. Isso significa que, se o servidor precisar ser autenticado, outros métodos de solicitações HTTP para passar nas informações de autenticação do usuário, como o ID da sessão.

Devido a essas restrições no objeto XDomainRequest, a implementação do servidor também precisa fazer alterações correspondentes. Essas alterações incluem o retorno da cabeça de acesso ao Acesso-Control-Aloguin;

A Biblioteca Polyfill usada neste artigo é o projeto Eventsource, desenvolvido pela Yaffle no Github. Depois de usar a Biblioteca Polyfill e modificar a implementação do lado do servidor, você pode usar o servidor para empurrar o evento no navegador, ou seja, 8 e acima. Se você precisar suportar o IE 7, só pode usar a Inquérito simples ou a tecnologia de cometa. Consulte os recursos de referência no código de exemplo deste artigo.

Se você precisar empurrar os dados do servidor para o navegador, as tecnologias que podem ser usadas com base nos padrões de especificação HTML 5 incluem eventos WebSocket e Server Push. Os desenvolvedores podem escolher a tecnologia certa de acordo com as necessidades específicas do aplicativo. Se você precisar enviar apenas dados do servidor, o padrão do evento de pressão do servidor será mais simples e mais fácil de alcançar. Este artigo introduziu o conteúdo padrão do evento de push do servidor, a implementação do servidor e o lado do navegador em detalhes e também analisou como suportar o navegador do IE.