Comment afficher dynamiquement les données du flacon de streaming dans un modèle HTML ?

Affichage dynamique des données en streaming dans un modèle Flask

Dans le développement Web, il est courant d'afficher des données constamment mises à jour, telles que des données réelles -flux de données temporels. Avec Flask, un framework Web Python populaire, il peut sembler difficile de gérer ce type de données dans vos modèles HTML. Cette question explique comment afficher efficacement les données en streaming et les intégrer dans vos modèles.

Énoncé du problème

L'application Flask donnée génère des données et les diffuse en temps réel via un point final spécifique. La question se pose : comment accéder à ces données streamées au sein d'un modèle HTML et les afficher avec une mise en forme ?

Solution

Pendant que l'application envoie des données sous forme de flux, la mise à jour d'un un modèle basé dynamiquement sur ce flux n’est pas possible. Au lieu de cela, les données doivent être traitées côté client à l'aide de JavaScript.

Implémentation de JavaScript

L'exemple fourni montre l'utilisation de JavaScript pour gérer les données diffusées :

1. Utilisez XMLHttpRequest pour ouvrir une connexion au point de terminaison de streaming.
2. Lisez périodiquement le flux, en gérant chacun message (ligne de données).
3. Mettez à jour l'affichage avec la dernière valeur et enregistrez tous les messages.

Modèle HTML

Le HTML Le modèle inclut le code JavaScript et fournit des zones pour afficher les données :

<p>This is the latest output: <span>

Approche alternative : utiliser un Iframe

Une autre option pour afficher les données en streaming consiste à utiliser une iframe. Une iframe sert de document distinct dans la page principale, affichant le contenu d'une URL différente. Dans ce cas, l'iframe peut pointer vers le point de terminaison de streaming et afficher les données HTML diffusées.

Avantages et inconvénients

L'approche iframe fournit un moyen simple d'afficher le flux. HTML, mais il présente des inconvénients tels qu'une utilisation accrue des ressources et des limitations de style. Il est généralement préférable d'utiliser JavaScript et la manipulation directe de la page pour une plus grande flexibilité.

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!