Video: Part1 - http://video.yandex.by/users/fdconf/view/15/ Part2 - http://video.yandex.by/users/fdconf/view/18/

1. Промедление смерти подобно
Карлович Александр,
<EPAM> Systems,
Frontend разработчик
Контакты:
Email: alexkarlovich@gmail.com
Twitter: http://twitter.com/AlexKarlovich
Site: http://alexkarlovich.com

2. Agenda
1. Применение
2. Обзор технологий и инструментов
3. Подробнее о веб-сокетах
4. Практикум

3. Биржевая и финансовая
информация

4. Спортивные события,
букмекерские котировки

5. Онлайн-игры

6. Соцсети, чаты

7. Транcпорт

8. Бесконечный GIF

9. Polling

10. Polling в жизни

11. COMET
- Бесконечный фрейм
- Long Polling
- Http streaming
- Flash-объекты
- Java-апплеты

12. Рубрика “No comments”
– <meta http-equiv="refresh"
content="60">
– setTimeout(function () {
location.reload();
}, 6000);

14. Realtime в HTML5
- WebRTC.
- Server-Sent Events.
- WebSocket протокол & API.

15. WebSocket API

16. Пример
var socket = new WebSocket('ws://frontendconf.nodejitsu.com');
socket.onopen = function () {
console.log('Соединение открыто.');
socket.send(JSON.stringify({ token: 'bVfr4' }));
};
socket.onmessage = function (message) {
var data= JSON.parse(message.data);
if (data.type === 'user') {
alert(data.user.title);
}
console.log('Пришло сообщение от сервера: ' + message.data);
};
socket.onclose = function () {
console.log('Соединение закрылось.')
};
socket.onerror = function () {
console.log('Что-то пошло не так.')
};
//socket.binaryType = 'arraybuffer';

17. Хидеры запроса
- GET /chat HTTP/1.1
- Host: server.example.com
- Upgrade: websocket
- Connection: Upgrade
- Sec-WebSocket-Key:
dGhlIHNhbXBsZSBub25jZQ==
- Origin: http://example.com
- Sec-WebSocket-Protocol: chat, superchat
- Sec-WebSocket-Version: 13

18. Хидеры ответа
- HTTP/1.1 101 Switching Protocols
- Upgrade: websocket
- Connection: Upgrade
- Sec-WebSocket-Accept:
s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec
- WebSocket-Protocol: chat

19. Поддержка браузеров

20. Серверы

21. Трафик: Web Sockets vs Polling

24. Преимущества WebSockets
- Веб-стандарт
- Двусторонний обмен данными
- Нативная поддержка браузерами и серверами
- Низкая задержка
- Постоянное соединение
- Кросдоменность
- Неограниченное количество соединений
- Кодировка UTF8
- Работа с бинарными данными

26. Библиотеки
- SignalR
- Lightstreamer
- Socket.io
- Sock.js
- ...

27. Практикум: рисуем онлайн

28. Материалы для воркшопа
- Готовое приложение:
http://alexkarlovich.com/frontendconf/worksho
p/client-side/views/
- Материалы для воркшопа:
http://alexkarlovich.com/frontendconf/wo
rkshop.zip

29. Ссылки
- WebSocket-протокол:
http://tools.ietf.org/html/rfc6455
- WebSocket-API:
http://www.w3.org/TR/2011/WD-
websockets-20110419/

30. Спасибо за внимание!
Email: alexkarlovich@gmail.com
Twitter: http://twitter.com/AlexKarlovich
Site: http://alexkarlovich.com