by Alex Krlovich on Frontend DEV Conf'13 http://bit.ly/Alex_karlovich Воркшоп с написанием клиентской части, используя веб-сокеты

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.jit.su');
socket.onopen = function () {
console.log('Соединение открыто.');
socket.send(JSON.stringify({ token: 'bVfr4' }));
};
socket.onmessage = function (data) {
var message = JSON.parse(data);
if (message.type === 'user') {
alert(message.user.title);
}
console.log('Пришло сообщение от сервера: ' + 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

22. Задержка (Polling)

23. Задержка (WebSocket)

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

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

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

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