El (ahora difunto) página http://stream.twitter.com/1/statuses/sample.json que se utiliza para devolver un continuo e interminable flujo de datos JSON.

Me gustaría proceso usando jQuery (o JavaScript, pero preferiblemente jQuery) en el interior de mi propia página web para ser capaz de mostrar los efectos visuales basados en la transmisión en vivo de los tweets.

Desde tan lejos como puedo saber el jQuery parseJSON función sólo ejecutar la función de devolución de llamada después de que todos los datos han sido enviados por el servidor, pero en realidad es un flujo continuo de datos. ¿Cómo puedo procesar los datos «como sucede», pero aún así mantener la conexión a correr?

  • ¿JQuery 1.6.2 soporte de flujo de procesamiento de todavía? No puedo encontrar nada en la documentación.

4 Comentarios

  1. 78

    Este tipo de cosas se hace mejor uso de WebSockets ahora, que de acuerdo a CanIUse.Com es disponible en todos los principales navegadores excepto Opera Mini (ver este link para más detalles acerca de la mayor o todos los navegadores, y haga clic en la ficha Recursos ver más enlaces). Como una visión general, websockets son compatibles con IE 10+, Firefox 11+ (38+ si dentro de un WebWorker contexto), Chrome 16+, Opera 12.1+, Safari 7+, Android 4.4+, Opera Mobile 12.1+.

    Nota: es probable que usted quiere aprender acerca de Trabajadores del servicio del Web y de los Trabajadores así, aunque las que tienen diferentes casos de uso y capacidades diferentes.

    Se parece a esto:

    var connection = new WebSocket(
       'ws://html5rocks.websocket.org/echo',
       ['soap', 'xmpp']
    );

    Fijar algunos controladores de eventos de inmediato a la conexión le permite saber cuando se abre la conexión, cuando usted ha recibido los mensajes entrantes, o si se ha producido un error.

    El envío de mensajes se vuelve tan fácil como esto:

    connection.send('your message');
    connection.send(binaryData);

    Ver La introducción de WebSockets: incorporación de Sockets para la Web para una explicación completa sobre cómo hacer esto.

    ASP.Net los desarrolladores: si por alguna razón necesita compatibilidad con navegadores antiguos y no quiero averiguar por ti mismo cómo lidiar con aquellos que no admiten WebSockets, considere el uso de una biblioteca como SignalR.

    El Viejo EventSource API de Respuesta Para los Navegadores más Antiguos

    La mayoría de los navegadores ahora implementar el EventSource API, que hace mucho tiempo la votación realmente fácil, mientras que la corriente puede ser entregado con un contenido de tipo text/event-stream. Los navegadores antiguos o aquellos desarrolladores que por cualquier motivo no puede ingeniero de la secuencia de tener ese tipo de contenido pueden utilizar algunas script de ayuda a hacer lo mismo.

    He aquí un ejemplo:

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

    Esto es, básicamente, una completa versión de la cosa exacta que voy a describir a continuación.

    El Aún más antiguo Servicio de Transmisión de Respuesta Por los Navegadores ANTIGUOS

    Lo que usted quiere es llamado tiempo de sondeo. Usted necesitará una costumbre AJAX onreadystatechange función de manipulación. En lugar de esperar hasta que toda la corriente se ha completado (ya que nunca lo hará), es necesario examinar los contenidos de forma periódica. Tenga en cuenta que usted necesitará hacer algo de trabajo pesado para que esto funcione en IE 9 y menor, el uso de un iframe.

    Aproximadamente:

    • Responder a cada onreadystatechange evento y examinar la secuencia que te han dado hasta el carácter actual a ver si hay suficientes datos para consumir uno o más eventos discretos. Tendrás que analizar el flujo de ti mismo con la cadena de javascript-manejo de funciones. Una combinación de split, indexOf, expresiones regulares, los bucles, y en lo que puede ser utilizado para llevar a cabo esta tarea.
    • Si no hay suficiente contenido pero, a continuación, salir y esperar para el próximo evento.
    • Estoy bastante seguro de que cada vez que el onreadystatechange controlador de incendios, la responseText serán todos los datos que se han recibido hasta el momento. Definir una persistente variable que va a mantener la posición del primer carácter que no ha sido debidamente procesado todavía.
    • Una vez no es suficiente el contenido de uno o más eventos discretos para aparecer en la secuencia, se sacan de una en una y se las pasan a sus JSON parser de hacer realidad el texto como objetos. Los uso normalmente.

    Echa un vistazo a este La Transmisión HTTP gist de un recurso, o Streaming como alternativa a sondear el servidor en SoftwareAs. Si usted debe apoyar a IE 9 o más, entonces usted necesitará utilizar el iframe método para que.

    Aquí es una cita de el libro Ajax Patrones de Diseño: la Creación de la Web 2.0 en los Sitios con la Programación y la facilidad de uso de los Patrones de:

    En resumen, el Servicio de Streaming hace que la Transmisión HTTP enfoque más flexible, ya que puede transmitir contenidos arbitrarios en lugar de comandos de Javascript, y porque se puede controlar la conexión del ciclo de vida. Sin embargo, combina dos tecnologías que no son consistentes a través de los navegadores, con los previsibles problemas de portabilidad. Los experimentos sugieren que la Página de Streaming técnica funciona en ambos IE [9 y mayores] y Firefox, pero el Servicio de Streaming sólo funciona en Firefox, si XMLHTTPRequest o IFrame se utiliza. En el primer caso, es decir [9 y mayores] suprime la respuesta, hasta su completa, con el IFrame funciona si una solución se utiliza: La IE [9 y mayores] acepta un mensaje desde el servidor después de los primeros 256 bytes de modo que la única cosa a hacer es enviar 256 ficticio Bytes antes de enviar los mensajes. Después de esto todos los mensajes llegan como se esperaba. Así un completo Servicio de Streaming es posible en IE [9 y mayores], también!

    Cuenta que es a partir de 2006, lo que es definitivamente fuera de fecha, pero si que tienen que soportar los navegadores más antiguos, es todavía relevante.

    Problemas De Seguridad

    Normal AJAX no puede ir cross-domain, significado (ahora que tengo que pagar la atención el hecho de que se quiere transmitir desde twitter) que usted ganó t ser capaz de hacer lo que estás preguntando. Esto puede ser solucionado con JSONP, pero JSONP, por naturaleza, no puede ser el servicio de streaming y además no se ofrece por parte de twitter de todos modos. También hay Cross-Origin Resource Sharing (CORS), pero twitter no va a establecer que para usted, ese es el tipo de cosas que sólo había de hacer para dominios afiliados con ellos. Y CORS requiere un navegador moderno.

    Su única opción es crear un servicio de proxy en el servidor web que realiza las peticiones a twitter para usted y, a continuación, las manos fuera de los datos. Esto sólo se puede hacer desde el mismo dominio que la página principal se sirve de. Haciendo esto también permite crear una versión que funcione en IE usando el iframe técnica. Si a usted no le importa la edad versiones de IE, usted puede implementar CORS a sí mismo para derrotar a la restricción del dominio, si usted sabe que el dominio que va a hacer las peticiones.

    Si usted tiene pleno control sobre el software de cliente (como si esto es para una intranet corporativa) no hay otra opción: que aloja el navegador web dentro de un compilado local ejecuta la aplicación de formulario de usuario. Solo lo he hecho con C#, pero me imagino que es posible de otros idiomas. Cuando se utiliza el derecho objeto de navegador, porque es alojado dentro de una aplicación de C#, la aplicación de C# puede derrotar a la cruz-dominio de restricciones de seguridad, leer y escribir todo el contenido de la página, no importa qué dominio de la que proviene. Dudo que su situación es éste, pero yo quería poner la opción para los otros, que podría apreciar.

    • EventSource sólo funciona con text/event-stream contenido-tipo: html5rocks.com/en/tutorials/eventsource/basics
    • Gracias, @Adam, he actualizado mi respuesta.
    • son la Gabrielle Cirulli de 2048 fama? Me siento honrado de haber ayudado a usted! 🙂
    • La Transmisión HTTP enlace está muerto.
    • Gracias, corregido. Déjeme saber si usted encuentra cualquier otro tipo de problemas!
  2. 3

    La dirección url especificada en tu pregunta envía una respuesta JSON corriente. Debido a la cruz de dominio de restricciones de seguridad en los navegadores que no pueden acceder a él mediante javascript. Usted necesitará implementar un puente de script del lado servidor en el servidor que usted podría encuesta a intervalos regulares mediante peticiones AJAX o anfitrión de su sitio en twitter.com. La primera parece más factible.

    • ¿Cuál es el intervalo mínimo que puedo alcanzar? Necesito que sea bastante rápido.
    • Cirulli, lo mínimo intervalo estás hablando? Intervalo de sondeo? Eso dependerá de su cliente de los navegadores de la red la velocidad de la conexión a su servidor y capacidades de la representación de los elementos del DOM.
    • JSONP puede derrotar a cruz-dominio de los problemas de seguridad, pero luego supongo que el servicio de streaming no funciona correctamente.
    • este streaming API de twitter no admite JSONP.
    • Exactamente, Darin, que era una especie de a lo que me refería.
  3. -14

    Una página web en un nivel muy fundamental, no puede seguir en vivo/ejecución de la conexión a un servidor. Navegador Web envía una solicitud al servidor. El servidor envía una respuesta (el HTML y más) de vuelta al cliente (navegador web). Piense en esto como un estado modelo – conexión no es siempre mantiene viva después de la solicitud y la respuesta ha sido completado.

    Por lo tanto, usted tiene que hacerlo usted mismo. Usted tiene que invocar adicionales, solicitudes periódicas desde el lado del cliente.

    Una de las formas sería periódicamente llame a su AJAX/OBTENER la funcionalidad a través de setInterval() función. Por ejemplo:

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

    Esto desencadenará una petición AJAX a mydata/get (o cualquier URL que desee utilizar) cada 5 segundos.

    • Creo que te has perdido por completo lo que se le pide.
    • entonces, ¿por qué no puedes explicar?
    • Necesito los datos para ser en vivo, haciendo una solicitud cada 5 segundos no funciona, y haciendo demasiadas funcionará increíblemente malo
    • Como he dicho, no hay tal cosa como «vivir» en una vida de una página web. Sólo se puede extraer datos de una página, no se puede empujar a una página.
    • Patrones de AJAX’ HTTP Streaming de la página parece pensar que se puede empujar en la web. También echa un vistazo a Cometa para más información sobre esto.
    • Sí, vi a dónde iba con eso, pero no creo que esas soluciones viables (al menos en mi opinión). Los efectos adversos y la falta de apoyo universal de tales patrones (no las tecnologías, por cierto, pero los patrones de diseño) son un riesgo demasiado alto.
    • Podría usted comentar sobre estos efectos adversos y los riesgos de su respuesta?

Dejar respuesta

Please enter your comment!
Please enter your name here