Подобные вещи лучше всего сделать с помощью WebSockets , что в соответствии с CanIUse.Com доступно во всех основных браузерах , кроме Opera Mini (см. Эту ссылку для получения более подробной информации о старых или все браузеры, и нажмите вкладку Ресурсы, чтобы увидеть еще больше ссылок). В качестве обзора, веб-сокеты поддерживаются в IE 10+, Firefox 11+ (38+, если в контексте WebWorker), Chrome 16+, Opera 12.1+, Safari 7+, Android 4.4+, Opera Mobile 12.1+.
Примечание: вы, вероятно, захотите узнать о Сервисных рабочих и веб-рабочих , хотя у них разные варианты использования и разные способности.
Это выглядит так:
var connection = new WebSocket(
'ws://html5rocks.websocket.org/echo',
['soap', 'xmpp']
);
Присоединение некоторых обработчиков событий непосредственно к соединению позволяет вам знать, когда соединение открыто, когда вы получили входящие сообщения или произошла ошибка.
Отправка сообщений становится такой простой:
connection.send('your message');
connection.send(binaryData);
См. Представление WebSockets: вывод сокетов в сеть для полного объяснения того, как это сделать.
Разработчики ASP.Net: если по какой-то причине вам требуется поддержка старых браузеров и вы не хотите самостоятельно выяснять, как обращаться с теми, которые не поддерживают WebSockets, рассмотрите возможность использования библиотеки, такой как SignalR .
Ответ старого API EventSource для старых браузеров
В большинстве браузеров теперь реализован EventSource API , который делает длительный опрос действительно простым, если поток может быть доставлен с типом контента text/event-stream. Старые браузеры или те разработчики, которые по какой-либо причине не могут спроектировать поток, чтобы иметь этот тип контента, могут использовать некоторый вспомогательный скрипт , чтобы сделать то же самое.
Вот пример:
var jsonStream = new EventSource('https://example.com/yourstreamingservice')
jsonStream.onmessage = function (e) {
var message = JSON.parse(e.data);
// handle message
};
Это в основном полноценная версия того, что я обрисую ниже.
Ответ на даже более старую потоковую службу для действительно старых браузеров
То, что вы хотите, называется длинным опросом. Вам понадобится пользовательская функция обработки AJAX onreadystatechange. Вместо того, чтобы ждать, пока завершится весь поток (поскольку он никогда не завершится), вам необходимо периодически проверять содержимое. Обратите внимание, что для работы в IE 9 и более поздних версиях вам нужно будет выполнить несколько тяжелых действий, используя iframe.
Грубо:
- Отвечайте на каждое событие
onreadystatechange и проверяйте поток, переданный вами текущему символу, чтобы увидеть, достаточно ли данных для использования одного или нескольких дискретных событий. Вам нужно будет самостоятельно проанализировать поток с помощью функций обработки строк JavaScript. Для выполнения этой задачи можно использовать комбинацию split, indexOf, регулярных выражений, циклов и т. Д.
- Если контента пока недостаточно, выйдите и дождитесь следующего события.
- Я почти уверен, что каждый раз, когда запускается обработчик
onreadystatechange, responseText будет всеми данными, которые были получены до сих пор. Определите постоянную переменную, которая будет содержать позицию первого символа, который еще не был должным образом обработан.
- Когда в потоке будет достаточно одного или нескольких отдельных событий, извлекайте их по одному и передавайте в свой анализатор JSON, чтобы фактически отобразить текст как объекты. Используйте их как обычно.
Проверьте эту Сущность HTTP Streaming для одного ресурса или Streaming в качестве альтернативы опросу сервера в SoftwareAs. Если вам требуется поддержка IE 9 или более ранней версии, для этого вам необходимо использовать метод iframe.
Вот цитата из книги Шаблоны Ajax Design: создание сайтов Web 2.0 с шаблонами программирования и удобства использования :
Таким образом, потоковая передача услуг делает подход потоковой передачи HTTP более гибким, поскольку вы можете передавать произвольный контент, а не команды Javascript, и потому, что вы можете контролировать жизненный цикл соединения. Тем не менее, он сочетает в себе две технологии, которые не согласованы между браузерами, с предсказуемыми проблемами переносимости. Эксперименты показывают, что метод потоковой передачи страниц работает как в IE [9 и старше], так и в Firefox, но потоковая передача служб работает только в Firefox, независимо от того, используется ли XMLHTTPRequest или IFrame. В первом случае IE [9 и старше] подавляет ответ до его завершения, с IFrame он работает, если используется обходной путь: IE [9 и старше] принимает сообщение от сервера после первых 256 байтов, поэтому единственное чтобы сделать, это отправить 256 фиктивных байтов перед отправкой сообщений. После этого все сообщения будут доставлены как положено. Так что в IE [9 и старше] возможна также полная потоковая передача сервиса!
Имейте в виду, что это 2006 год, так что он определенно устарел, но если вам нужно поддерживать старые браузеры, он все еще актуален.
Проблемы безопасности
Обычный AJAX не может быть междоменным, что означает (теперь, когда я обращаю внимание на тот факт, что вы хотите транслировать из твиттера), вы не сможете делать то, о чем просите. Это можно обойти с помощью JSONP, но JSONP по своей природе не может быть потоковым сервисом и, более того, Twitter так или иначе не предлагается. Существует также Cross-Origin Resource Sharing (CORS), но твиттер не собирается настраивать это для вас - это то, что они будут делать только для связанных с ними доменов. А для CORS требуется современный браузер.
Таким образом, ваша единственная возможность - создать прокси-службу на вашем веб-сервере, которая выполняет запросы в твиттер для вас, а затем раздает данные. Это можно сделать только из того же домена, с которого была обслужена главная страница. Это также позволит вам создать версию, которая будет работать для IE, используя технику iframe. Если вас не интересуют старые версии IE, вы можете самостоятельно внедрить CORS, чтобы обойти ограничение домена, если вы знаете домен, который будет выполнять запросы.
Если у вас есть полный контроль над клиентским программным обеспечением (например, если это для корпоративной интрасети), есть еще один вариант: размещение веб-браузера внутри пользовательской формы скомпилированного локально исполняемого приложения. Я сделал это только с помощью C #, но я думаю, что это возможно из других языков. Когда вы используете правильный объект браузера, поскольку он размещен внутри приложения C #, приложение C # может преодолеть ограничения междоменной безопасности, читая и записывая весь контент страницы, независимо от того, из какого домена он происходит. Я сомневаюсь, что у вас такая ситуация, но я хотел поставить эту опцию здесь для тех, кто мог бы ее оценить