recherche

Maison >interface Web >Tutoriel H5 >Explication graphique détaillée du principe SSE et du développement d'applications des données HTML5

Explication graphique détaillée du principe SSE et du développement d'applications des données HTML5

黄舟
黄舟original
2017-03-08 15:23:152684parcourir

JavaScript exprime le comportement et CSS exprime l'apparence. Notez que HTML exprime à la fois la structure (structure logique) et le contenu (les données elles-mêmes). Habituellement, lorsque les données doivent être mises à jour, la structure n'a pas besoin d'être mise à jour. C’est exactement ce qui se produit. Le désir de modifier uniquement les données sans modifier la structure organisationnelle a favorisé l’émergence des technologies de extraction et de poussée des données.

SSE est une technologie HTML5 qui permet au serveur de transmettre de nouvelles données au client (appelé data push). Il existe deux alternatives au transfert de données : aucune mise à jour et extraction de données.

Aucune solution de mise à jour :

Après avoir chargé le HTML, vous obtiendrez une page HTML, puis le navigateur demandera des images, des fichiers CSS, des fichiers JavaScript , etc., ce sont tous des fichiers statiques que le navigateur peut mettre en cache. Si la page utilise un langage back-end, tel que PHP, Ruby, Python et d'autres langages qui génèrent dynamiquement du HTML pour les utilisateurs.

Schéma d'extraction de données :

Le navigateur enverra des données au navigateur en fonction d'un certain comportement de l'utilisateur, ou après une certaine période de temps, ou en fonction de un autre schéma de déclenchement. Le côté serveur demande ou met à jour toutes les données et peut commander à la page entière de recharger via JavaScript ou une balise méta. La technologie Ajax familière n'est utilisée que pour demander les dernières données. Lorsque les données sont reçues, la fonction javascript les utilisera pour mettre à jour localement le DOM. L'essence de l'extraction de données : extraire uniquement de nouvelles données et mettre à jour uniquement les parties concernées de la page.

Aucun des éléments ci-dessus n'est un transfert de données. Le transfert de données n'est pas un fichier statique et cela n'implique pas non plus que le navigateur lance une demande de mise à jour des données. Le transfert de données se produit lorsque le serveur sélectionne le client pour envoyer de nouvelles données.

Lorsque la source de données contient de nouvelles données, le serveur peut immédiatement les envoyer à un ou plusieurs clients sans attendre que le client demande ces nouvelles données. actualités, dernières actions, messages de chat d'amis en ligne, nouvelles prévisions météorologiques, prochaines étapes des jeux de stratégie, etc.

SSE convient aux mises à jour fréquentes, à une faible latence et aux données du serveur vers le client. La différence entre lui et WebSocket :

1) Commodité. Pas besoin d'ajouter de nouveaux composants. Vous pouvez continuer à l'utiliser avec n'importe quel langage et framework back-end auquel vous êtes habitué. une nouvelle IP ou une nouvelle machine virtuelle pour une nouvelle machine virtuelle Le numéro de port est gênant.

2) Simplicité côté serveur. Étant donné que SSE fonctionne sur les protocoles HTTP/HTTPS existants, il peut s'exécuter directement sur les serveurs proxy et les technologies d'authentification existants.

Le plus grand avantage de WebSocket par rapport à SSE est qu'il s'agit d'une communication bidirectionnelle, ce qui signifie que l'envoi de données depuis le serveur est aussi simple que la réception de données depuis le serveur, alors que SSE va généralement du client vers le serveur. serveur via une requête Ajax indépendante Transférez des données, donc l'utilisation d'Ajax augmentera la surcharge par rapport à WebSocket. Par conséquent, si vous devez transmettre des données au serveur une fois par seconde ou plus rapidement, vous devez utiliser WebSocket.

Le code spécifique est le suivant :

code html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>basic SSE test</title>
    </head>
    <body>
        <pre id = "x">initializting...
<script> var es = new EventSource("basic_sse.php"); es.addEventListener("message",function(e){ //e.data document.getElementById("x").innerHTML += "\n"+e.data; },false);//使用false表示在冒泡阶段处理事件，而不是捕获阶段。 </script>

Il devrait Il convient de noter que : Il est préférable de vérifier avant d'utiliser des données côté serveur pour éviter d'éventuelles attaques par injection JavaScript.

code php

<?php
    header(&#39;Content-Type: text/event-stream&#39;);
    header(&#39;Cache-Control: no-cache&#39;);
    $time = date(&#39;r&#39;);
    echo "data: The server time is: {$time}\n\n";
    flush();
?>

"Content-Type: text/event-stream" est spécifiquement pour SSE Type MIME conçu,

Capture d'écran de l'effet

Quand le transfert de données est le mauvais choix

Considérez d'abord Dans dans le cas statique, le transfert de données n'est pas introduit. Chaque fois que l'utilisateur ouvre une page, une connexion socket sera ouverte entre le navigateur et le serveur. Les informations du téléphone du serveur sont ensuite renvoyées à l'utilisateur. Cela peut être aussi simple que de télécharger des données depuis. le disque. Le chargement d’un fichier HTML statique ou d’une image peut être complexe, comme exécuter un langage d’arrière-plan qui se connecte à de nombreuses bases de données. Le point clé ici est qu'une fois les informations requises renvoyées, le socket est fermé et chaque requête HTTP ouvre l'une de ces connexions socket relativement éphémères, qui sont limitées sur le serveur, chaque fois qu'elles accomplissent les tâches prévues, sont récupérées. pour le recyclage.

Comparons maintenant le push de données. Une requête n'aboutit jamais, il y a toujours beaucoup d'informations à envoyer, donc le socket reste ouvert. Évidemment, comme il s’agit de ressources limitées, il y aura une limite au nombre de connexions SSE en même temps.

Imaginez une situation dans laquelle vous fournissez une assistance téléphonique pour votre dernière application. Il y a 10 employés du centre d'appels au service de 1 000 utilisateurs. L'utilisateur rencontre un problème et l'un des opérateurs décroche la ligne puis raccroche. Les nouveaux appels clients sont mis en file d'attente jusqu'à ce que l'un des opérateurs raccroche, ce qui est un modèle typique de service réseau.

Cependant, un client a appelé et m'a dit : je n'ai aucun problème maintenant, mais j'utiliserai votre produit dans les prochaines heures, et si je rencontre des problèmes, j'espère que vous répondrez immédiatement. Ce client restera au téléphone avec l'opérateur pendant plusieurs heures, et 10 % des ressources de service du centre d'appels sont gaspillées. S'il y a 10 de ces clients, les 990 autres clients ne peuvent pas appeler. Il s’agit du modèle de transmission de données.

Bien sûr, ce n'est pas toujours une mauvaise chose. Si ce client a un problème toutes les quelques secondes tout au long de l'après-midi, garder le téléphone ouvert ne gaspillera pas 10 % des ressources du service, mais l'augmentera. Étant donné que chaque question nécessite un nouvel appel (comme une extraction de données), les opérateurs doivent passer plus de temps à vérifier l'identité du client et à ouvrir ses comptes, ce qui réduit l'efficacité du service. Rester au téléphone rend généralement les clients plus satisfaits, mais améliore également l'efficacité du centre d'appels. C'est le scénario le plus approprié pour le transfert de données.


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Détails du code de stockage local HTML5Article suivant：Détails du code de stockage local HTML5

Articles Liés

Voir plus