Клиент-сайд изобилует кучей различных транспортов, и зачастую непонятно, какой взять для решения той или иной задачи. В данной лекции рассказывается об особенности каждого транспорта и области применимости.
5 JSONP • Когда применять – Запрос каких-то не очень критичных данных – Прием огромных объемов данных • Плюсы – Дешевый способ – Доступен в любом браузере • Минусы – Невозможно отследить статус ответа и ошибки, только таймауты – Только GET – Не безопасный 0+ 0+ 0+ 0+ 3+
7 Post2HiddenIframe • Кода применять – Push каких-то не критичных данных – Отправка файлов • Плюсы – Реализация очень проста – Доступен в любом браузере – Можно отправлять файлы – POST, GET • Минусы – Нет возможности подтвердить получение данных сервером 0+ 0+ 0+ 0+ 3+
9 XHR2 (CORS) • Кода применять – Запрос критичных данных – Long Polling • Плюсы – Не отличается от XHR (IE – XDomainRequest) – Это не костыль – Можно отследить ошибки и статусы ответа – Простая реализация поддержки на сервере – DELETE, GET, HEAD, OPTIONS, POST, PUT • Минусы – Не поддерживается многими старыми браузерами – Может блокироваться прокси-серверами 4.0 3.5 12 4.0 10
XHR2 (CORS) function requestFactory() { var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) { return xhr; } if (typeof XDomainRequest !== "undefined") { return new XDomainRequest(); } } var xhr = requestFactory(); if (!xhr) throw new Error('CORS not supported'); xhr.open('GET', 'http://yandex.ru/', true); xhr.send(); http://jsfiddle.net/qyjnb/
13 LongPolling & XHR • Когда применять – Для обратной совместимости со старыми браузерами – Приложения где данные передаются редко – Вам лень писать что-то другое • Плюсы – Это работает во всех браузерах – Самая простая реализация • Минусы – Приходится постоянно создавать соединения – Для отправки данных необходимо поднимать еще одно соединение – Проблема с одновременными запросами 1.0 0.6 8.0 1.2 5.0
15 EventSource • Когда применять – Ваш сервис большую часть времени получает данные – Для обратной совместимости со старыми браузерами • Плюсы – Использует HTTP протокол – Реализация на сервере достаточна проста – Может автоматически делать реконнект – Достаточно гибкий формат сообщений – 1 постоянное соединение с сервером • Минусы – Может неадекватно вести себя при физическом отключении от сети – Может только принимать данные – Не поддерживается IE – Может блокироваться прокси-серверами 6.0 6.0 9.0 5.0 –
17 WebSocket • Когда применять – Актуальность данных очень критична – Очень много данных передается или передаются очень часто • Плюсы – 1 соединение на отправку и получение – Быстрый обмен данными – Бинарный формат • Минусы – Не HTTP – Сложно отлаживать – Может блокироваться прокси-серверами – 6 форматов протокола – Поддерживается далеко не всеми веб-браузерами 14.0 11.0* 8.0 6.0 10.0
20 Post2HiddenIframe + JSONP • Post2HiddenIframe – для отправки • JSONP – для контроля – Прогресс отправки – Результат отправки – Получение ссылки на файл • Плюсы – Работает везде • Минусы – Необходим контроль – Много дополнительных запросов 0+ 0+ 0+ 0+ 3+
22 XHR2 + File API • Плюсы – Естественный способ без костылей – Только 1 запрос – Реализация на сервере проще чем Post2HiddenIframe + JSONP • Минусы – Не поддерживается всеми браузерами 13.0 3.6 12 5.1* 10.0*
Socket.IO var socket = io.connect('http://localhost'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); }); http://socket.io/
var io = require('socket.io').listen(80); // Server io.sockets.on('connection', function (socket) { socket.emit('news', { hello: 'world' }); socket.on('my other event', function (data) { console.log(data); }); });
azproduction
hirokiyamazaki
gnutar
emdelponte
matleenalaakso
cbtlibrary
samuraijuku
akane69
toarukanshiin
wakamatsu_takumu
natsuyo
afzalive
hatefulcrawdad
thekraken
chriscoyier
jlugia
trishagee
jeffersonlam
maggiecrowley
zakiwarfel
sferik
holman
philhawksworth
dotmariusz