64 votes

Traiter un flux continu de JSON

La page http://stream.twitter.com/1/statuses/sample.json retourne une constante et sans fin flux de données JSON. J'aimerais traiter à l'aide de jQuery (ou JavaScript, mais, de préférence, jQuery) à l'intérieur de ma propre page web pour être en mesure d'afficher des effets visuels basés sur le flux de tweets.

Depuis aussi loin que je sais que le jQuery parseJSON fonction n'exécutera la fonction de rappel après que toutes les données ont été envoyées par le serveur, mais c'est en fait un flux continu de données. Comment puis-je traiter les données ", comme il arrive", mais encore conserver la connexion en cours d'exécution?

82voto

ErikE Points 18233

Une Mise À Jour De Réponse

La plupart des navigateurs maintenant mettre en œuvre la EventSource API, ce qui le rend vraiment facile. Les anciens navigateurs peuvent utiliser certaines script d'aide pour faire la même chose.

Voici un exemple:

var jsonStream = new EventSource('https://example.com/yourstreamingservice')
jsonStream.onmessage = function (e) {
   var message = JSON.parse(e.data);
  // handle message
};

C'est un à part entière de la version de la chose exacte que je décris ci-dessous.

L'Ancien Service De Streaming De Réponse

Vous aurez besoin d'un custom AJAX onreadystatechange de la manipulation de la fonction. Au lieu d'attendre jusqu'à ce que l'ensemble du flux de déchets est terminée (car il ne le sera jamais), vous aurez besoin d'examiner périodiquement le contenu. Notez que vous aurez besoin de faire certaines de levage lourd pour que cela fonctionne sous IE, à l'aide d'un iframe.

En gros:

  • Répondre à chaque onreadystatechange d'événements et d'examiner les flux que vous avez donné la nature actuelle pour voir si il ya suffisamment de données pour consommer un ou plusieurs événements discrets. Vous aurez besoin d'analyser les flux de vous-même avec javascript chaîne de fonctions de gestion. Une combinaison de split, indexOf, les expressions régulières, en boucle, et ainsi de suite, peuvent être utilisés pour accomplir cette tâche.
  • Si il n'y a pas assez de contenu pour l'instant, alors sortie et d'attente pour le prochain événement.
  • Je suis assez sûr que chaque fois que l' onreadystatechange gestionnaire de feux, de la responseText seront toutes les données qui ont été reçues jusqu'à présent. Définir une variable persistante qui permettra de maintenir la position du premier caractère qui n'a pas été correctement traitée encore.
  • Une fois qu'il y a assez de contenu pour un ou plusieurs événements discrets apparaissent dans le flux, de les prendre un à un et de les transmettre à votre parser JSON pour afficher le texte sous forme d'objets. Les utiliser normalement.

Découvrez le Streaming HTTP à Motifs AJAX pour une bonne discussion de ce sujet (il couvre aussi le Service de Streaming qui est ce que vous faites). Comme indiqué, si vous devez prendre en charge c'est à dire, alors vous aurez besoin d'utiliser l' iframe méthode pour cela.

En résumé, le Service de Streaming rend le Streaming HTTP approche plus souple, parce que vous pouvez diffuser contenu arbitraire plutôt que des commandes Javascript, et parce que vous pouvez contrôler la connexion du cycle de vie. Cependant, il combine deux technologies qui ne sont pas compatible entre les différents navigateurs, prévisible, des problèmes de portabilité. Expériences suggèrent que la Page de Streaming technique fonctionne sur IE et Firefox , mais le Service de Streaming ne fonctionne que sur Firefox, si XMLHTTPRequest ou de l'IFrame est utilisé. Dans le premier cas, IE supprime la réponse jusqu'à sa complète, avec l'IFrame cela fonctionne si une solution de contournement est utilisé: L'IE accepte un message depuis le serveur après les 256 premiers octets de sorte que la seule chose à faire est d'envoyer 256 Bytes de remplissages avant d'envoyer les messages. Après cette date, tous les messages arrivent comme prévu. Donc un Service complet Streaming est possible dans IE, trop!

Les Questions De Sécurité

Normal AJAX ne peut pas aller de l'inter-domaine, sens (maintenant que j'ai payer l'attention sur le fait que vous souhaitez diffuser à partir de twitter) que vous ne serez pas en mesure de faire ce que vous demandez. Cela peut être contourné avec JSONP, mais JSONP, par nature, ne peut pas être de service continu et de plus n'est pas proposée par twitter de toute façon.bil n'y a également Cross-Origin Resource sharing (SCRO) mais twitter ne va pas mettre en place que pour vous, c'est le genre de chose qu'ils avaient seulement pour les domaines affiliés avec eux. Et CORS nécessite un navigateur moderne.

Votre seule option est donc de créer un service de proxy sur votre serveur web qui effectue les demandes de twitter pour vous et ensuite la main sur les données. Cela ne peut être fait à partir du même domaine que la page principale a été servi depuis. Cela vous permettra également de vous créer une version qui fonctionne pour IE à l'aide de l'iframe technique. Si vous n'avez pas de soins sur les anciennes versions IE, vous pouvez mettre en œuvre la SCRO vous-même pour vaincre la restriction de domaine, si vous connaissez le domaine qui fera la demande.

Si vous avez le plein contrôle du logiciel client (comme si c'est pour un intranet d'entreprise) il y a une autre option: l'hébergement le navigateur web à l'intérieur de la compilation d'un local exécutée l'application de formulaire utilisateur. J'ai seulement fait ce à l'aide de C#, mais j'imagine que c'est possible à partir d'autres langues. Lorsque vous utilisez le navigateur d'objet, parce qu'il est hébergé à l'intérieur d'une application en C#, le C# de l'application peut vaincre la croix-domaine des restrictions de sécurité, de la lecture et de l'écriture de toutes les pages de contenu de n'importe quel domaine, il vient de. Je doute que votre situation est celle-ci mais je voulais mettre l'option ici pour d'autres qui pourraient l'apprécier.

8voto

joombar Points 56

J'ai un projet open source qui permet ce sur les navigateurs modernes (et retombe à un jQuery-style sur les plus anciennes). La syntaxe d'appel est similaire à jQuery.ajax:

http://oboejs.com

4voto

Darin Dimitrov Points 528142

L'url que vous avez spécifiée lors de votre question envoie une réponse JSON flux. En raison de croix domaine des restrictions de sécurité dans les navigateurs vous ne pouvez pas accéder à l'aide de javascript. Vous devrez mettre en place un pont côté serveur script sur votre serveur que vous pourriez sondage à intervalles réguliers à l'aide de requêtes AJAX ou héberger votre site sur twitter.com. La première semble plus réalisable.

-14voto

Kon Points 16125

Une page web à un niveau très fondamental ne peut pas garder un live, de course, de connexion à un serveur. Web navigateur envoie une requête au serveur. Le serveur envoie une réponse (le HTML et plus) au client (navigateur web). Pensez à cela comme un apatride modèle - aucune connexion n'est toujours maintenu en vie après la demande et la réponse ont été achevés.

Par conséquent, vous devez le faire vous-même. Vous devez invoquer supplémentaires, demandes périodiques du côté client.

Un autre moyen serait d'périodiquement votre appel AJAX/OBTENIR des fonctionnalités en passant par setInterval() fonction. Par exemple:

setInterval(function() {

    $.ajax({
      url: "mydata/get",
      success: function(){
        // update content.
      }
    });

}, 5000);

Cela va déclencher une requête AJAX mydata/obtenir (ou de ce que l'URL que vous souhaitez utiliser) toutes les 5 secondes.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X