Подтвердить что ты не робот

Обработать непрерывный поток JSON

(теперь несуществующая) страница http://stream.twitter.com/1/statuses/sample.json используется для возврата непрерывного и бесконечного потока данных JSON.

Я хотел бы обработать его с помощью jQuery (или JavaScript, но предпочтительно jQuery) внутри моей собственной веб-страницы, чтобы иметь возможность отображать визуальные эффекты, основанные на прямой трансляции твитов.

Поскольку, насколько я знаю, функция jQuery parseJSON выполняет только функцию обратного вызова после того, как все данные были отправлены сервером, но это фактически непрерывный поток данных. Как я могу обрабатывать данные "как это бывает", но все равно поддерживать соединение?

4b9b3361

Ответ 1

Обновление 2

Это лучше всего сделать с помощью WebSockets.

Он выглядит следующим образом:

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

Прикрепление некоторых обработчиков событий непосредственно к соединению позволяет узнать, когда соединение открывается, когда вы получили входящие сообщения или произошла ошибка.

Отправка сообщений становится такой же простой:

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

См. Представление WebSockets: Приведение сокетов в Интернет для полного объяснения того, как это сделать.

Вы также можете обратиться к поддержке браузеров для WebSockets.

Разработчики ASP.Net: если по какой-то причине вам необходимо поддерживать старые браузеры и не хотите самостоятельно определять, как обращаться с теми, которые не поддерживают WebSockets, подумайте об использовании библиотеки, такой как SignalR.

Обновление 1

В настоящее время большинство браузеров реализуют API EventSource, что делает длительный опрос действительно простым, пока поток может быть доставлен с типом контента text/event-stream. Старые браузеры или те разработчики, которые по какой-либо причине не могут спроектировать поток, чтобы этот тип содержимого мог использовать helper script, чтобы сделать то же самое.

Вот пример:

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

Это, в основном, полноценная версия точной вещи, о которой я расскажу ниже.

Потоковый ответ старой службы

То, что вы хотите, называется длинным опросом. Вам понадобится пользовательская функция обработки AJAX onreadystatechange. Вместо того, чтобы ждать завершения всего потока (так как он никогда не будет), вам нужно будет периодически проверять содержимое. Обратите внимание, что вам нужно будет сделать тяжелую работу для работы в IE, используя iframe.

Грубо:

  • Отвечайте на каждое событие onreadystatechange и исследуйте поток, который вы получили до текущего символа, чтобы увидеть, достаточно ли данных для потребления одного или нескольких дискретных событий. Вам нужно будет самостоятельно разбирать поток с помощью функций обработки строк javascript. Для выполнения этой задачи можно использовать комбинацию split, indexOf, регулярных выражений, циклов и т.д.
  • Если пока еще недостаточно контента, выйдите и подождите следующего события.
  • Я уверен, что каждый раз, когда срабатывает обработчик onreadystatechange, responseText будет всеми данными, которые были получены до сих пор. Определите постоянную переменную, которая будет удерживать позицию первого символа, который еще не был обработан должным образом.
  • Когда в потоке будет достаточно контента для одного или нескольких дискретных событий, выведите их по одному и передайте их вашему парсеру JSON, чтобы фактически отобразить текст как объекты. Используйте их как обычно.

Откажитесь от HTTP Streaming в шаблонах AJAX для хорошего обсуждения этой точной темы (она также охватывает потоки обслуживания, которые являются тем, что вы делать). Как указано, если вы должны поддерживать IE, тогда вам нужно использовать метод iframe для этого.

Таким образом, потоковая передача данных делает подход HTTP Streaming более гибким, поскольку вы можете передавать произвольный контент, а не команды Javascript, и потому, что вы можете управлять жизненным циклом соединения. Однако он сочетает в себе две технологии, которые несовместимы между браузерами, с предсказуемыми проблемами с переносимостью. Эксперименты предполагают, что техника потоковой передачи страниц работает как в IE, так и в Firefox, но Streaming службы работает только с Firefox, используется ли XMLHTTPRequest или IFrame. В первом случае IE подавляет ответ до его завершения, при этом IFrame работает, если используется обходное решение: IE принимает сообщение от сервера после первых 256 байтов, поэтому единственное, что нужно сделать, это отправить 256 фиктивных байтов перед отправкой сообщений. После этого все сообщения поступят так, как ожидалось. Таким образом, полная версия потокового сервиса возможна и в IE!

Проблемы безопасности

Обычный AJAX не может перейти в междоменное, что означает (теперь, когда я обращаю внимание на то, что вы хотите передать из Twitter), что вы не сможете делать то, что вы просите. Это можно обойти с JSONP, но JSONP по своей природе не может быть потоковым в обслуживании, и, тем не менее, в twitter не предлагается. Существует также Перекрестный ресурс ресурсов(CORS), но твиттер не собирается настраивать это для вас - это то, что они делают только для доменов, связанных с ними. И CORS требует современного браузера.

Таким образом, единственным вариантом является создание прокси-сервиса на вашем веб-сервере, который выполняет запросы на твиттер для вас, а затем передает данные. Это можно сделать только из того же домена, с которого была отправлена ​​основная страница. Это также позволит вам создать версию, которая будет работать для IE с использованием техники iframe. Если вам не нравятся старые версии IE, вы можете реализовать CORS самостоятельно, чтобы победить ограничение домена, если вы знаете домен, который будет делать запросы.

Если у вас есть полный контроль над клиентским программным обеспечением (например, если это касается корпоративной интрасети), есть еще один вариант: размещение веб-браузера внутри скомпилированной пользовательской формы приложения с локальным исполнением. Я сделал это только с помощью С#, но я предполагаю, что это возможно с других языков. Когда вы используете правильный объект браузера, потому что он размещен внутри приложения С#, приложение С# может победить междоменные ограничения безопасности, читать и записывать все содержимое страницы независимо от того, из какого домена оно происходит. Я сомневаюсь, что ваша ситуация такова, но я хотел поставить этот вариант для других, которые могли бы это оценить.

Ответ 2

У меня есть проект с открытым исходным кодом, который позволяет это в современных браузерах (и возвращается к jQuery-стилю на старых). Синтаксис вызова аналогичен jQuery.ajax:

http://oboejs.com

Ответ 3

URL, который вы указали в своем вопросе, отправляет поток ответа JSON. Из-за ограничений междоменной безопасности в браузерах вы не можете получить к нему доступ с помощью javascript. Вам необходимо будет использовать серверную часть сервера script на вашем сервере, которую вы могли бы опроса через регулярные промежутки времени с помощью запросов AJAX или разместить свой сайт на twitter.com. Первое кажется более выполнимым.

Ответ 4

Веб-страница на очень фундаментальном уровне не может поддерживать прямое/запущенное соединение с сервером. Веб-браузер отправляет запрос на сервер. Сервер отправляет ответ (HTML и больше) обратно клиенту (веб-браузер). Подумайте об этом как о модели без гражданства - ни одна связь никогда не поддерживается в живых после завершения запроса и ответа.

Поэтому вы должны сделать это сами. Вы должны вызывать дополнительные, периодические запросы с клиентской стороны.

Один из способов - периодически называть функции AJAX/GET с помощью функции setInterval(). Например:

setInterval(function() {

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

}, 5000);

Это приведет к отключению запроса AJAX mydata/get (или любого другого URL-адреса, который вы хотите использовать) каждые 5 секунд.