Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ШРИ - JavaScript Транспорты

ШРИ - JavaScript Транспорты

Клиент-сайд изобилует кучей различных транспортов, и зачастую непонятно, какой взять для решения той или иной задачи. В данной лекции рассказывается об особенности каждого транспорта и области применимости.

Video https://events.yandex.ru/lib/talks/705/

Mikhail Davydov

October 11, 2012
Tweet

More Decks by Mikhail Davydov

Other Decks in Education

Transcript

  1. Михаил Давыдов
    Разработчик JavaScript
    Транспорт, ajax

    View full-size slide

  2. 3
    Немного истории
    •  FRAME, IFRAME – IE 3, 1996год
    •  ActiveX MSXML – IE 5.5, 1998год
    •  AJAX, Web 2.0 – 2005год
    •  W3C XMLHttpRequest – 2006год стандарт

    View full-size slide

  3. Кроссодоменные запросы
    JSONP,
    Post2HiddenIframe,
    XMLHttpRequest level 2 (CORS),
    Каскад фреймов или postMessage

    View full-size slide

  4. 5
    JSONP
    •  Когда применять
    –  Запрос каких-то не очень критичных данных
    –  Прием огромных объемов данных
    •  Плюсы
    –  Дешевый способ
    –  Доступен в любом браузере
    •  Минусы
    –  Невозможно отследить статус ответа и ошибки, только таймауты
    –  Только GET
    –  Не безопасный
    0+ 0+ 0+ 0+ 3+

    View full-size slide

  5. JSONP
    // 1 Готовим «Ловушку»
    window.jsonFlickrFeed = function (data) {
    console.log(data);
    };
    var serviceUrl = 'http://api.flickr.com/services/feeds' +
    '/photos_public.gne?format=json&' +
    'jsoncallback=jsonFlickrFeed';
    // 2 Создаем скрипт
    var scriptElement = document.createElement('script');
    scriptElement.src = serviceUrl;
    document.body.appendChild(scriptElement);
    http://jsfiddle.net/ffTQL/1/

    View full-size slide

  6. 7
    Post2HiddenIframe
    •  Кода применять
    –  Push каких-то не критичных данных
    –  Отправка файлов
    •  Плюсы
    –  Реализация очень проста
    –  Доступен в любом браузере
    –  Можно отправлять файлы
    –  POST, GET
    •  Минусы
    –  Нет возможности подтвердить получение данных сервером
    0+ 0+ 0+ 0+ 3+

    View full-size slide

  7. Post2HiddenIframe
    // 1 Создаем форму
    action="http://yandex.ru/"
    method="post">



    // 2 Создаем фрейм

    http://jsfiddle.net/E2nge/

    View full-size slide

  8. 9
    XHR2 (CORS)
    •  Кода применять
    –  Запрос критичных данных
    –  Long Polling
    •  Плюсы
    –  Не отличается от XHR (IE – XDomainRequest)
    –  Это не костыль
    –  Можно отследить ошибки и статусы ответа
    –  Простая реализация поддержки на сервере
    –  DELETE, GET, HEAD, OPTIONS, POST, PUT
    •  Минусы
    –  Не поддерживается многими старыми браузерами
    –  Может блокироваться прокси-серверами
    4.0 3.5 12 4.0 10

    View full-size slide

  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/

    View full-size slide

  10. 11
    Каскад фреймов или postMessage
    •  На самоподготовку
    –  Выделите его достоинства и недостатки
    –  Сравните с предыдущими методами

    View full-size slide

  11. Real-time приложения
    LongPolling через XHR,
    EventSource (Server Sent Events),
    WebSocket

    View full-size slide

  12. 13
    LongPolling & XHR
    •  Когда применять
    –  Для обратной совместимости со старыми браузерами
    –  Приложения где данные передаются редко
    –  Вам лень писать что-то другое
    •  Плюсы
    –  Это работает во всех браузерах
    –  Самая простая реализация
    •  Минусы
    –  Приходится постоянно создавать соединения
    –  Для отправки данных необходимо поднимать еще одно соединение
    –  Проблема с одновременными запросами
    1.0 0.6 8.0 1.2 5.0

    View full-size slide

  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/

    View full-size slide

  14. 15
    EventSource
    •  Когда применять
    –  Ваш сервис большую часть времени получает данные
    –  Для обратной совместимости со старыми браузерами
    •  Плюсы
    –  Использует HTTP протокол
    –  Реализация на сервере достаточна проста
    –  Может автоматически делать реконнект
    –  Достаточно гибкий формат сообщений
    –  1 постоянное соединение с сервером
    •  Минусы
    –  Может неадекватно вести себя при физическом отключении от сети
    –  Может только принимать данные
    –  Не поддерживается IE
    –  Может блокироваться прокси-серверами
    6.0 6.0 9.0 5.0 –

    View full-size slide

  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/

    View full-size slide

  16. 17
    WebSocket
    •  Когда применять
    –  Актуальность данных очень критична
    –  Очень много данных передается или передаются очень часто
    •  Плюсы
    –  1 соединение на отправку и получение
    –  Быстрый обмен данными
    –  Бинарный формат
    •  Минусы
    –  Не HTTP
    –  Сложно отлаживать
    –  Может блокироваться прокси-серверами
    –  6 форматов протокола
    –  Поддерживается далеко не всеми веб-браузерами
    14.0 11.0* 8.0 6.0 10.0

    View full-size slide

  17. LongPolling & XHR
    window.WebSocket = window.WebSocket || window.MozWebSocket;
    var connection = new WebSocket('ws://echo.websocket.org');
    connection.addEventListener('message', function(e) {
    console.log(e.data);
    }, false);
    connection.addEventListener('error', function(e) {
    console.log(e);
    }, false);
    connection.send('Hello World!');
    http://jsfiddle.net/pgLQa/2/

    View full-size slide

  18. Загрузка файлов
    Post2HiddenIframe + JSONP,
    XMLHttpRequest level 2 + File API,
    Flash

    View full-size slide

  19. 20
    Post2HiddenIframe + JSONP
    •  Post2HiddenIframe – для отправки
    •  JSONP – для контроля
    –  Прогресс отправки
    –  Результат отправки
    –  Получение ссылки на файл
    •  Плюсы
    –  Работает везде
    •  Минусы
    –  Необходим контроль
    –  Много дополнительных запросов
    0+ 0+ 0+ 0+ 3+

    View full-size slide

  20. Post2HiddenIframe + JSONP
    action="http://yandex.ru/"
    method="post"
    enctype="multipart/form-data">



    http://jsfiddle.net/AZmXx/2/

    $('input').change(function () {
    $('form').submit();
    });
    $.getJSON('/echo/jsonp/?callback=?', function(e, progress) {
    console.log(progress);
    });

    View full-size slide

  21. 22
    XHR2 + File API
    •  Плюсы
    –  Естественный способ без костылей
    –  Только 1 запрос
    –  Реализация на сервере проще чем Post2HiddenIframe + JSONP
    •  Минусы
    –  Не поддерживается всеми браузерами
    13.0 3.6 12 5.1* 10.0*

    View full-size slide

  22. 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/

    View full-size slide

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

    View full-size slide

  24. Библиотеки и обертки
    jQuery.ajax,
    jQuery.serialize,
    Socket.IO,
    NowJS

    View full-size slide

  25. 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/

    View full-size slide

  26. jQuery.serialize





    http://jsfiddle.net/Smvvr/

    $('form').submit(function() {
    alert($(this).serialize());
    return false;
    });

    View full-size slide

  27. 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);
    });
    });

    View full-size slide

  28. NowJS
    var nowjs = require("now"); // Server
    var everyone = nowjs.initialize(httpServer);
    everyone.now.getServerInfo = function(callback){
    callback("Hello World!");
    }
    http://nowjs.com/


    <br/>now.getServerInfo(function(data){<br/>console.log(data);<br/>});<br/>

    View full-size slide

  29. Проблемы
    Каскады протоколов,
    Баги браузеров,
    Прокси серверы,
    Обрывы соединения,
    Асинхронная модель приложения

    View full-size slide

  30. Михаил Давыдов
    Разработчик JavaScript
    [email protected]
    azproduction
    Спасибо

    View full-size slide