Транспорт, ajax

Михаил Давыдов
Разработчик JavaScript
Немного истории

•  FRAME, IFRAME – IE 3, 1996год
•  ActiveX MSXML – IE 5.5, 1998год
•  AJAX, Web 2.0 – 2005год
•  W3C XML...
Кроссодоменные запросы
JSONP,
Post2HiddenIframe,
XMLHttpRequest level 2 (CORS),
Каскад фреймов или postMessage
JSONP
0+

0+

0+

0+

•  Когда применять
–  Запрос каких-то не очень критичных данных
–  Прием огромных объемов данных

• ...
JSONP
// 1 Готовим «Ловушку»
window.jsonFlickrFeed = function (data) {
console.log(data);
};
var serviceUrl = 'http://api....
Post2HiddenIframe
0+

0+

0+

•  Кода применять
–  Push каких-то не критичных данных
–  Отправка файлов

•  Плюсы
–  Реали...
Post2HiddenIframe
// 1 Создаем форму
<form target="frame"
action="http://yandex.ru/"
method="post">
<input name="data"/>
<...
XHR2 (CORS)
4.0

•  Кода применять
–  Запрос критичных данных
–  Long Polling

•  Плюсы
–  Не отличается от XHR (IE – XDom...
XHR2 (CORS)
function requestFactory() {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
return xhr;
}
if (...
Каскад фреймов или postMessage

•  На самоподготовку
–  Выделите его достоинства и недостатки
–  Сравните с предыдущими ме...
Real-time приложения
LongPolling через XHR,
EventSource (Server Sent Events),
WebSocket
WebRTC
LongPolling & XHR
1.0

0.6

8.0

1.2

•  Когда применять
–  Для обратной совместимости со старыми браузерами
–  Приложения...
LongPolling & XHR
function poll(resource, callback) {
$.get(resource, function (e, data) {
if (callback(data)) {
poll(reso...
EventSource
6.0

6.0

9.0

5.0

•  Когда применять
–  Ваш сервис большую часть времени получает данные
–  Для обратной сов...
LongPolling & XHR
// Content-Type: text/event-stream
// Cache-Control: no-cache
if (!window.EventSource) throw new Error('...
WebSocket
14.0

11.0*

8.0

•  Когда применять
–  Актуальность данных очень критична
–  Очень много данных передается или ...
LongPolling & XHR
window.WebSocket = window.WebSocket || window.MozWebSocket;
var connection = new WebSocket('ws://echo.we...
WebRTC
28

•  getUserMedia, MediaStream
–  Захват потока с устройств: звук, экран, камера

•  RTCPeerConnection
–  Передач...
WebRTC Как работает соединение

A	
  
20

B	
  
WebRTC Как работает соединение

A	
  

B	
  
NAT	


21
WebRTC Как работает соединение

A	
  
sdp	
  
22

B	
  
sdp	
  

NAT
WebRTC Как работает соединение

A	
  
sdp	
  
23

B	
  
sdp	
  

NAT
WebRTC Как работает соединение

sdp	
  

A	
  
sdp	
  
24

B	
  
sdp	
  

NAT
WebRTC Как работает соединение

sdp	
  

sdp	
  

A	
  
sdp	
  
25

B	
  
sdp	
  

NAT
WebRTC Как работает соединение

A	
  
sdp	
  
26

B	
  
sdp	
  
WebRTC
28

•  Когда применять
–  P2P сервисы: передача файлов
–  Видео конференции
–  Игры без монетизации

•  Плюсы
–  Де...
WebRTC Запрос на соединение
var media = {audio: true, video: true};
navigator.getUserMedia(media, function (stream) {
var ...
Загрузка файлов
Post2HiddenIframe + JSONP,
XMLHttpRequest level 2 + File API,
Flash
Post2HiddenIframe + JSONP
0+

0+

•  Post2HiddenIframe – для отправки
•  JSONP – для контроля
–  Прогресс отправки
–  Резу...
Post2HiddenIframe + JSONP
<form target="frame"
action="http://yandex.ru/"
method="post"
enctype="multipart/form-data">
<in...
XHR2 + File API
13.0

3.6

12

5.1*

•  Плюсы
–  Естественный способ без костылей
–  Только 1 запрос
–  Реализация на серв...
XHR2 + File API
document.getElementById('file')
.addEventListener('change', function (e) {
var file = this.files[0];
var x...
Flash

•  На самоподготовку
–  Выделите его проблемы
–  Сравните с рассмотренными выше способами

34
Библиотеки и обертки
jQuery.ajax,
jQuery.serialize,
Socket.IO,
NowJS
jQuery.ajax
var globalCallback = function () {
console.log(arguments);
};
$.get('/echo/json/', globalCallback);
$.post('/e...
jQuery.serialize
<form>
<input type="text" name="a" value="1"/>
<input type="text" name="b" value="2"/>
<input type="hidde...
Socket.IO
var io = require('socket.io').listen(80);
// Server
io.sockets.on('connection', function (socket) {
socket.emit(...
NowJS
var nowjs = require("now");
var everyone = nowjs.initialize(httpServer);

// Server

everyone.now.getServerInfo = fu...
Проблемы
Проблемы
•  Каскады протоколов
–  Дорогая поддержка

•  Баги браузеров
–  Повторный запрос после abort() зависает
–  N сое...
Михаил Давыдов
Разработчик JavaScript

azproduction@yandex-team.ru
azproduction

Спасибо
Михаил Давыдов: Транспорт, ajax
Upcoming SlideShare
Loading in …5
×

Михаил Давыдов: Транспорт, ajax

2,176 views
2,100 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,176
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Михаил Давыдов: Транспорт, ajax

  1. 1. Транспорт, ajax Михаил Давыдов Разработчик JavaScript
  2. 2. Немного истории •  FRAME, IFRAME – IE 3, 1996год •  ActiveX MSXML – IE 5.5, 1998год •  AJAX, Web 2.0 – 2005год •  W3C XMLHttpRequest – 2006год стандарт 3
  3. 3. Кроссодоменные запросы JSONP, Post2HiddenIframe, XMLHttpRequest level 2 (CORS), Каскад фреймов или postMessage
  4. 4. JSONP 0+ 0+ 0+ 0+ •  Когда применять –  Запрос каких-то не очень критичных данных –  Прием огромных объемов данных •  Плюсы –  Дешевый способ –  Доступен в любом браузере •  Минусы –  Невозможно отследить статус ответа и ошибки, только таймауты –  Только GET –  Не безопасный 5 3+
  5. 5. JSONP // 1 Готовим «Ловушку» window.jsonFlickrFeed = function (data) { console.log(data); }; var serviceUrl = 'http://api.flickr.com/services/feeds' + '/photos_public.gne?format=json&amp;' + 'jsoncallback=jsonFlickrFeed'; // 2 Создаем скрипт var scriptElement = document.createElement('script'); scriptElement.src = serviceUrl; document.body.appendChild(scriptElement); http://jsfiddle.net/ffTQL/1/
  6. 6. Post2HiddenIframe 0+ 0+ 0+ •  Кода применять –  Push каких-то не критичных данных –  Отправка файлов •  Плюсы –  Реализация очень проста –  Доступен в любом браузере –  Можно отправлять файлы –  POST, GET •  Минусы –  Нет возможности подтвердить получение данных сервером 7 0+ 3+
  7. 7. Post2HiddenIframe // 1 Создаем форму <form target="frame" action="http://yandex.ru/" method="post"> <input name="data"/> <input type="submit"/> </form> // 2 Создаем фрейм <iframe name="frame"></iframe> http://jsfiddle.net/E2nge/
  8. 8. XHR2 (CORS) 4.0 •  Кода применять –  Запрос критичных данных –  Long Polling •  Плюсы –  Не отличается от XHR (IE – XDomainRequest) –  Это не костыль –  Можно отследить ошибки и статусы ответа –  Простая реализация поддержки на сервере –  DELETE, GET, HEAD, OPTIONS, POST, PUT •  Минусы –  Не поддерживается многими старыми браузерами –  Может блокироваться прокси-серверами 9 3.5 12 4.0 10
  9. 9. 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/
  10. 10. Каскад фреймов или postMessage •  На самоподготовку –  Выделите его достоинства и недостатки –  Сравните с предыдущими методами 11
  11. 11. Real-time приложения LongPolling через XHR, EventSource (Server Sent Events), WebSocket WebRTC
  12. 12. LongPolling & XHR 1.0 0.6 8.0 1.2 •  Когда применять –  Для обратной совместимости со старыми браузерами –  Приложения где данные передаются редко –  Вам лень писать что-то другое •  Плюсы –  Это работает во всех браузерах –  Самая простая реализация •  Минусы –  Приходится постоянно создавать соединения –  Для отправки данных необходимо поднимать еще одно соединение –  Проблема с одновременными запросами 13 5.0
  13. 13. LongPolling & XHR function poll(resource, callback) { $.get(resource, function (e, data) { if (callback(data)) { poll(resource, callback); } }); } poll('/echo/json/', function (data) { console.log(data); return Math.random() > 0.5; }); http://jsfiddle.net/mtP2W/
  14. 14. EventSource 6.0 6.0 9.0 5.0 •  Когда применять –  Ваш сервис большую часть времени получает данные –  Для обратной совместимости со старыми браузерами •  Плюсы –  Использует HTTP протокол –  Реализация на сервере достаточна проста –  Может автоматически делать реконнект –  Достаточно гибкий формат сообщений –  1 постоянное соединение с сервером •  Минусы –  Может неадекватно вести себя при физическом отключении от сети –  Может только принимать данные –  Не поддерживается IE –  Может блокироваться прокси-серверами 15 –
  15. 15. LongPolling & XHR // Content-Type: text/event-stream // Cache-Control: no-cache if (!window.EventSource) throw new Error('No SSE'); var dataProvider = new EventSource('/echo/json/'); dataProvider.addEventListener('message', function(e) { console.log(e.data); }, false); dataProvider.addEventListener('error', function(e) { if (e.readyState == EventSource.CLOSED) { console.log('Connection closed'); } }, false); http://jsfiddle.net/BvTTz/
  16. 16. WebSocket 14.0 11.0* 8.0 •  Когда применять –  Актуальность данных очень критична –  Очень много данных передается или передаются очень часто •  Плюсы –  1 соединение на отправку и получение –  Быстрый обмен данными –  Бинарный формат •  Минусы –  Не HTTP –  Сложно отлаживать –  Может блокироваться прокси-серверами –  6 форматов протокола –  Поддерживается далеко не всеми веб-браузерами 17 6.0 10.0
  17. 17. LongPolling & XHR window.WebSocket = window.WebSocket || window.MozWebSocket; var connection = new WebSocket('ws://echo.websocket.org'); connection.addEventListener('message', console.log, false); connection.addEventListener('error', console.log, false); connection.send('Hello World!'); http://jsfiddle.net/pgLQa/2/
  18. 18. WebRTC 28 •  getUserMedia, MediaStream –  Захват потока с устройств: звук, экран, камера •  RTCPeerConnection –  Передача медиа-потоков •  RTCDataChannel –  Передача файлов •  Session Description Protocol 19 22 16 – –
  19. 19. WebRTC Как работает соединение A   20 B  
  20. 20. WebRTC Как работает соединение A   B   NAT 21
  21. 21. WebRTC Как работает соединение A   sdp   22 B   sdp   NAT
  22. 22. WebRTC Как работает соединение A   sdp   23 B   sdp   NAT
  23. 23. WebRTC Как работает соединение sdp   A   sdp   24 B   sdp   NAT
  24. 24. WebRTC Как работает соединение sdp   sdp   A   sdp   25 B   sdp   NAT
  25. 25. WebRTC Как работает соединение A   sdp   26 B   sdp  
  26. 26. WebRTC 28 •  Когда применять –  P2P сервисы: передача файлов –  Видео конференции –  Игры без монетизации •  Плюсы –  Дешевая поддержка –  Простая реализация сигнального сервера –  Любой протокол передачи hand-shake –  Защищенный •  Минусы –  Поддерживается далеко не всеми веб-браузерами 27 22 16 – –
  27. 27. WebRTC Запрос на соединение var media = {audio: true, video: true}; navigator.getUserMedia(media, function (stream) { var pc = new RTCPeerConnection(); pc.addStream(stream); pc.createOffer(function (desc) { pc.setLocalDescription(desc); // Session Description Protocol console.log(desc.sdp); }, console.error); }, console.error); http://jsfiddle.net/tc9sy/
  28. 28. Загрузка файлов Post2HiddenIframe + JSONP, XMLHttpRequest level 2 + File API, Flash
  29. 29. Post2HiddenIframe + JSONP 0+ 0+ •  Post2HiddenIframe – для отправки •  JSONP – для контроля –  Прогресс отправки –  Результат отправки –  Получение ссылки на файл •  Плюсы –  Работает везде •  Минусы –  Необходим контроль –  Много дополнительных запросов 30 0+ 0+ 3+
  30. 30. Post2HiddenIframe + JSONP <form target="frame" action="http://yandex.ru/" method="post" enctype="multipart/form-data"> <input name="file" type="file"/> </form> <iframe name="frame"></iframe> $('input').change(function () { $('form').submit(); }); $.getJSON('/echo/jsonp/?callback=?', function(e, progress) { console.log(progress); }); http://jsfiddle.net/AZmXx/2/
  31. 31. XHR2 + File API 13.0 3.6 12 5.1* •  Плюсы –  Естественный способ без костылей –  Только 1 запрос –  Реализация на сервере проще чем Post2HiddenIframe + JSONP •  Минусы –  Не поддерживается всеми браузерами 32 10.0*
  32. 32. XHR2 + File API document.getElementById('file') .addEventListener('change', function (e) { var file = this.files[0]; var xhr = new XMLHttpRequest(); var formData = new FormData(); formData.append('thefile', file); xhr.open('post', '/echo/json/', true); xhr.setRequestHeader('Content-Type', 'multipart/form-data'); xhr.send(formData); }, false); http://jsfiddle.net/qnvt2/1/
  33. 33. Flash •  На самоподготовку –  Выделите его проблемы –  Сравните с рассмотренными выше способами 34
  34. 34. Библиотеки и обертки jQuery.ajax, jQuery.serialize, Socket.IO, NowJS
  35. 35. jQuery.ajax var globalCallback = function () { console.log(arguments); }; $.get('/echo/json/', globalCallback); $.post('/echo/json/', globalCallback); $.getJSON('/echo/json/', globalCallback); $.getJSON('/echo/jsonp/?callback=?', globalCallback); $.ajax('/echo/json/', { statusCode: { 404: globalCallback } }).done(globalCallback); http://jsfiddle.net/hLU92/
  36. 36. jQuery.serialize <form> <input type="text" name="a" value="1"/> <input type="text" name="b" value="2"/> <input type="hidden" name="c" value="3"/> </form> $('form').submit(function() { alert($(this).serialize()); return false; }); http://jsfiddle.net/Smvvr/
  37. 37. 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); }); }); var socket = io.connect('http://localhost'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); }); http://socket.io/
  38. 38. NowJS var nowjs = require("now"); var everyone = nowjs.initialize(httpServer); // Server everyone.now.getServerInfo = function(callback){ callback("Hello World!"); } <script src="//localhost/nowjs/now.js"></script> <script> now.getServerInfo(function(data){ console.log(data); }); </script> http://nowjs.com/
  39. 39. Проблемы
  40. 40. Проблемы •  Каскады протоколов –  Дорогая поддержка •  Баги браузеров –  Повторный запрос после abort() зависает –  N соединений с доменом на браузер/таб •  Прокси серверы –  Кэширование –  Игнорирование "странных" протоколов и заголовков •  Обрывы соединения –  Спасает только ping •  Асинхронная модель приложения 41
  41. 41. Михаил Давыдов Разработчик JavaScript azproduction@yandex-team.ru azproduction Спасибо

×