КРиПИ - JavaScript Асинхронность, таймеры, работа с сервером

Transcript

2. Михаил Давыдов Разработчик JavaScript Асинхронность, работа с сервером
3. 3 Задача •  Качаем 1 файл •  Обрабатываем •  После отправляем данные на 2 сервера •  Вызываем alert()
4. 4 Псевдокод программы var file = getFile('/filename.jpg'); file = jpg2png(file); sendFile(file, 'http://server1.ru/'); sendFile(file, 'http://server2.ru/'); alert('tada!');
5. 5 1. Подготовка var file = getFile('/filename.jpg'); file = jpg2png(file); sendFile(file, 'http://server1.ru/'); sendFile(file, 'http://server2.ru/'); alert('tada!'); Старт TCP/IP сессии Отправка HTTP запроса Получение данных …
6. 6 2. Обработка var file = getFile('/filename.jpg'); file = jpg2png(file); sendFile(file, 'http://server1.ru/'); sendFile(file, 'http://server2.ru/'); alert('tada!'); Переделываем JPG в PNG
7. 7 3. Отправка var file = getFile('/filename.jpg'); file = jpg2png(file); sendFile(file, 'http://server1.ru/'); sendFile(file, 'http://server2.ru/'); alert('tada!'); Старт TCP/IP сессии Отправка HTTP запроса Получение данных …
8. 8 4. Алерт var file = getFile('/filename.jpg'); file = jpg2png(file); sendFile(file, 'http://server1.ru/'); sendFile(file, 'http://server2.ru/'); alert('tada!'); Рисуем окно через системное API
9. 9 Схема загрузки линейной программы время Блокировка Блокировка Блокировка Загрузка Отправка Отправка Подготовка Обработка Отправка Алерт
10. 10 Большую часть времени эта программа ждет I/O
11. 11 Стоимость операций I/O • L1-кэш 3 цикла • L2-кэш 14 циклов • RAM 250 циклов • Диск 41 000 000 циклов • Сеть 240 000 000
12. 12 На помощь приходят: треды, потоки, форки…
13. 13 дедлоки, мьютексы, проблемы с синхронизацией и параллельное программирование
14. 14
15. Событийная программа
16. 16 Идея событийного программирования •  Любое действие – событие –  Начало программы –  Клик на кнопку –  Событие во времени –  Конец чтения файла… •  Программа не ждет I/O –  Загрузка процесса предельно близка к 100% •  Подписывается на события I/O •  Выполняет код, когда событие наступило
17. 17 Сообщи мне когда придет файл, а пока я буду делать что-то полезное
18. 18 Псевдокод событийной программы var servers = [ 'http://serv1.ru/', 'http://serv2.ru/']; getFile('filename.jpg').then(function (file){ file = jpg2png(file); sendTo(file, servers).then(function (){ alert('tada!'); }); });
19. 19 1. Подготовка var servers = [ 'http://serv1.ru/', 'http://serv2.ru/']; getFile('filename.jpg').then(function (file){ file = jpg2png(file); sendTo(file, servers).then(function (){ alert('tada!'); }); }); Когда файл скачается вызови эту функцию
20. 20 2. Обработка var servers = [ 'http://serv1.ru/', 'http://serv2.ru/']; getFile('filename.jpg').then(function (file){ file = jpg2png(file); sendTo(file, servers).then(function (){ alert('tada!'); }); }); Кодируем в PNG
21. 21 3. Отправка var servers = [ 'http://serv1.ru/', 'http://serv2.ru/']; getFile('filename.jpg').then(function (file){ file = jpg2png(file); sendTo(file, servers).then(function (){ alert('tada!'); }); }); Когда файлы отправятся вызови эту функцию
22. 22 4. Алерт var servers = [ 'http://serv1.ru/', 'http://serv2.ru/']; getFile('filename.jpg').then(function (file){ file = jpg2png(file); sendTo(file, servers).then(function (){ alert('tada!'); }); }); Рисуем системное окно
23. 23 Схема загрузки событийной программы время Ожидание Ожидание Запрос Подготовка Обработка Отправка Алерт
24. 24 Профит •  Блокировка → Ожидание запроса •  Программа не блокируется •  Отправляет файлы параллельно •  1 тред может обслуживать несколько соединений
25. 25 Event Loop
26. 26 Event Loop •  Один поток •  Использует системные команды –  *NIX: select, epoll, kqueue –  Win: GetMessage, PeekMessage •  Основа – список событий •  Подписываемся на событие •  Выполняем код, когда событие произошло •  Список событий пуст – конец
27. 27 Кадр или Фрейм Event Loop === обработчик события
28. 28 Event Loop var servers = [ 'http://serv1.ru/', 'http://serv2.ru/']; getFile('filename.jpg').then(function (file){ file = jpg2png(file); sendTo(file, servers).then(function (){ alert('tada!'); }); }); Список событий Когда придет запрос к серверу – запусти этот код Запрос к серверу
29. 29 Event Loop var servers = [ 'http://serv1.ru/', 'http://serv2.ru/']; getFile('filename.jpg').then(function (file){ file = jpg2png(file); sendTo(file, servers).then(function (){ alert('tada!'); }); }); Список событий Пришел запрос к северу, выполняем обработчик Когда файл прочитается – запусти этот код Файл прочитан
30. 30 Event Loop var servers = [ 'http://serv1.ru/', 'http://serv2.ru/']; getFile('filename.jpg').then(function (file){ file = jpg2png(file); sendTo(file, servers).then(function (){ alert('tada!'); }); }); Список событий Файл прочитался, выполняем обработчик Когда файлы отправятся – запусти этот код Файл отправлен Файл отправлен
31. 31 А что если будет несколько одновременных запросов?!
32. 32 Фрейм 0 выполняем код программы Запрос к серверу Список событий Старт программы + Сейчас выполняется
33. 33 Фрейм N пришел Запрос 1 Запрос к серверу Запрос к серверу Список событий Сейчас выполняется Файл прочитан 1 +
34. 34 Фрейм N+1 пришел Запрос 2 Запрос к серверу Запрос к серверу Список событий Сейчас выполняется Файл прочитан 1 Файл прочитан 2 +
35. 35 Фрейм N+2 прочитался Файл 1 Запрос к серверу Список событий Сейчас выполняется Файл прочитан 1 Файл прочитан 2 + Файл отправлен 1 Файл отправлен 1 +
36. 36 Фрейм N+3 еще Запрос 3 Запрос к серверу Список событий Сейчас выполняется Файл прочитан 2 Файл отправлен 1 Файл отправлен 1 Запрос к серверу Файл прочитан 3 +
37. 37 Фрейм N+4 Файлы 1 отправили Запрос к серверу Список событий Сейчас выполняется Файл прочитан 2 Файл прочитан 3 Файл отправлен 1 Файл отправлен 1 Затем
38. 38 Фрейм N+5 Файлы 2 прочитали Запрос к серверу Список событий Сейчас выполняется Файл прочитан 3 Файл прочитан 2 + Файл отправлен 2 Файл отправлен 2 +
39. 39 Фрейм N+6 Файлы 3 прочитали Запрос к серверу Список событий Сейчас выполняется Файл прочитан 3 Файл отправлен 2 Файл отправлен 2 + Файл отправлен 3 Файл отправлен 3 +
40. 40 Фрейм N+7 Файлы 3 отправили Запрос к серверу Список событий Сейчас выполняется Файл отправлен 3 Файл отправлен 3 Затем Файл отправлен 2 Файл отправлен 2
41. 41 Фрейм N+8 Файлы 2 отправили Запрос к серверу Список событий Сейчас выполняется Файл отправлен 2 Файл отправлен 2 Затем
42. 42 Фрейм N+100500 убираем обработчик Список событий Убрать событие Сейчас выполняется
43. 43 Когда очередь пуста – программа завершается
44. 44 Таймеры в JavaScript
45. 45 Таймеры это не sleep() – это события во времени, они используют Event Loop
46. 46 Таймер без повтора •  setTimeout(function, timeout): Number –  выполни эту функцию не раньше чем через это время –  таймаут - миллисекунды •  clearTimeout(timerId) –  предотврати выполнение этого таймера –  ид таймера – обычное число
47. 47 setTimeout(function () { console.log(1); }, 1000); var timerId = setTimeout(function () { console.log(2); }, 1000); console.log(3); clearTimeout(timerId); // 3, 1 Пример setTimeout
48. 48 Таймер c повтором •  setInterval(function, timeout): Number –  выполняй эту функцию через данный интервал –  интервал - миллисекунды •  clearInterval(timerId) –  предотврати выполнение этого интрвала –  ид интервала – обычное число
49. 49 var times = 10; var intervalId = setInterval(function () { console.log(new Date()); times--; if (!times) { clearInterval(intervalId); } }, 1000); Пример setInterval
50. 50 Любой таймер будет вызван не раньше указанного времени
51. 51 var time = new Date(); setTimeout(function () { console.log(new Date() - time); }, 1000); // Эта функция выполняется 1100 мсек thisFunctionTakes1100msec(); // 1102 Пример промаха таймера
52. 52 JavaScript работает в одном потоке и не может прерывать обработчики
53. 53 Что происходит Получить текущее время Подписаться на событие T+1000 Тяжелая функция (1100 мс) Время T+1000 Выполнение функции таймера Запаздывание
54. 54 Таймеры выполняются в том же потоке, что и программа
55. 55 var time = new Date(); setTimeout(function () { console.log(new Date() - time); }, 1000); setTimeout(function () { // Эта функция выполняется 1100 мсек thisFunctionTakes1100msec(); }, 10); thisFunctionTakes1100msec(); // 2212 = 1100 + 10 + 1100 + x Еще один пример промаха таймера
56. 56 Таймер может никогда не выполниться
57. 57 var time = new Date(); setTimeout(function () { console.log(new Date() - time); }, 1000); while(true); Пример не достижимого таймера
58. 58 Время I/O > Время вычислений Лучше Event Loop
59. 59 Время I/O < Время вычислений Лучше Thread или Fork
60. 60 Работа с сервером
61. 61 Асинхронная работа с сервером
62. 62 AJAX – Асинхронный JavaScript и XML
63. 63 Много разных API и хаков •  XMLHttpRequest •  EventSource •  WebSockets •  JSONP
64. 64 XMLHttpRequest aka XHR •  Предполагали использовать XML •  Победил JSON •  XML остался
65. 65 Возможности XMLHttpRequest •  Неблокирующие запросы –  GET, POST, PUT, DELETE, … –  Можно отправлять и блокирующие •  Нельзя отправлять на другой сервер –  В версии 2 можно
66. 66 // GET запрос var xhr = new XMLHttpRequest(); // Подготавливаем запрос xhr.open('GET', 'http://server.ru/file.jpg', true); // Подписываемся на событие "изменение статуса" xhr.addEventListener('readystatechange', function () { // Когда ответ пришел if (xhr.readyState === 4) { // Печатаем тело ответа console.log(xhr.responseText); } }, false); // Отправляем запрос xhr.send(); Работа с XHR
67. 67 Статусы XMLHttpRequest •  UNSENT=0 –  функция open() еще не вызвана •  OPENED=1 –  функция send() еще не вызвана •  HEADERS_RECEIVED=2 –  Пришли заголовки •  LOADING=3 –  часть ответа пришла •  DONE=4 –  запрос завершен https://developer.mozilla.org/en-US/docs/DOM/ XMLHttpRequest
68. 68 Методы и свойства XHR •  open(method, url, isNotBlock) –  method – 'get', 'post', … –  url – 'http://pewpew.com', '/file.jpg', 'file.jpg', '//site.ru:8080/' •  send(body) –  body – post тело 'name=name&time=1345678&message=hello' •  readyState: Number •  responseText: String •  status: Number –  HTTP статус ответа – 200, 404, 500 •  addEventListener(event, function) •  ... https://developer.mozilla.org/en-US/docs/DOM/ XMLHttpRequest
69. 69 Сделаем обертку над XMLHttpRequest Асинхронный XHR function asyncXHR(method, url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.addEventListener('readystatechange', function () { if (xhr.readyState === 4) { if (xhr.status === 200) { callback(null, xhr.responseText); } else { callback('error'); } } }); xhr.send(data); }
70. 70 Когда статус изменится – вызови эту функцию Асинхронный XHR function asyncXHR(method, url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.addEventListener('readystatechange', function () { if (xhr.readyState === 4) { if (xhr.status === 200) { callback(null, xhr.responseText); } else { callback('error'); } } }); xhr.send(data); }
71. 71 Если статус = "Готово" – проверяем статус ответа Асинхронный XHR function asyncXHR(method, url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.addEventListener('readystatechange', function () { if (xhr.readyState === 4) { if (xhr.status === 200) { callback(null, xhr.responseText); } else { callback('error'); } } }); xhr.send(data); }
72. 72 Если статус ответа 200 (все хорошо) – вызываем функцию с данными Асинхронный XHR function asyncXHR(method, url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.addEventListener('readystatechange', function () { if (xhr.readyState === 4) { if (xhr.status === 200) { callback(null, xhr.responseText); } else { callback('error'); } } }); xhr.send(data); }
73. 73 Используем asyncXHR('get', 'http://site.ru', null, function (err, data) { if (!err) { console.log(data); } }); Стало на много меньше кода
74. 74 Перепишем наш абстрактный пример asyncXHR('get', 'filename.jpg', null, processThenSendFile); function processThenSendFile(err, file) { file = jpg2png(file); asyncXHR('post', '//site.ru/', file, alertWhenDone); } function alertWhenDone(err, status) { alert('tada'); }
75. 75 Заключение •  Линейная программа –  треды –  форки –  потоки •  Событийная программа –  Любой I/O – событие •  Event Loop •  Таймеры •  Асинхронная работа с сервером –  AJAX –  XMLHttpRequest aka XHR
76. 76 Михаил Давыдов Разработчик JavaScript azproduction@yandex-team.ru azproduction Спасибо