HTML5 WebSockets and WebWorkers

  • 2,750 views
Uploaded on

Presentation about a most powerfull HTML5 technologies such as WebSockets and WebWorkers. Presentation also covers a main principles about working with ASP.NET SignalR Library

Presentation about a most powerfull HTML5 technologies such as WebSockets and WebWorkers. Presentation also covers a main principles about working with ASP.NET SignalR Library

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,750
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5: WebSockets and WebWorkersКРУПНЕЙШАЯ ТЕХНИЧЕСКАЯ КОНФЕРЕНЦИЯ MICROSOFT ВУКРАИНЕ
  • 2. Обо мне• Windows Azure MVP• Ведущий разработчик в компании Digital Cloud Technologies• Сертифицированный специалист Microsoft Контактные данные• @feschenkoalex• http://feschenkoalex.blogspot.com• feschenko.alex@gmail.com, alex.feschenko@dctua.com
  • 3. СодержаниеКонцепция«Real Time Web» 1 WebSockets 2 WebWorkers 3 Рабочие группы Программирование COMET 1.1 HTML5 2.1 3.1 WebWorker-ов Программирование Сценарии web-сокетов 2.2 применения 3.2 ASP.NET SignalR Library 2.3
  • 4. Концепция «живого» Веба
  • 5. COMET
  • 6. COMET Модель разработки приложений, при которой длительно удерживаемое HTTP-соединение позволяет серверу отправлять данные браузеруРазновидности Браузер через регулярные промежутки Частый опрос (Pooling) времени отправляет HTTP-запрос на сервер Запрос удерживается сервером наУдержание соединения (Long-Pooling) протяжении определенного промежутка времени Запрос может удерживаться сервером Стриминг (Streaming) бесконечно долго
  • 7. Недостатки COMET-решений Решение Повышается сложно время COMET – это дорогое решение ! реализовать ожиданияНерациональн SAY NO TO COMET ! о Возрастает используется нагрузка на полоса CPU пропускания It`s just a “hack” :(
  • 8. HTML5 WebSockets ! «Венец эволюции» в Web-коммуникациях. Двунаправленный сокет, функционирующий в сети Интернет Режим Full-Duplex Сервер Обычный TCP-сокетФункционирует не только в браузере Открытое сокетное соединение Высокая производительность Понятное API Клиент Возможности масштабированияРациональное использование канала
  • 9. Организации стандартизации Особенности протокола Web Sockets API
  • 10. Рабочие группы HTML5 Geo- Web Web Locatio Perfor HyBi Apps n mance Ecma SVG HTML CSS Script
  • 11. HTML Microdata HTML Canvas 2D Context HTML HTML5 working draftFirst published CSS Hyperlink Presentation CSS Grid Positioning CSS Namespaces Selector Level 3 CSS CSS Style Attributes CSS Speech CSS Animations Working Draft CSS Color Level 3 CORS Clipboard APIs and Events DOM Level 3 Events Element Traversal File API Last Call Progress Events Selectors API Server-Sent Events Web Apps From Origin Header HTML5 спецификации UMP Web IDL WARP Widget Packaging Candidate SVG 2.0Recommendation Compositing SVG Parameters Color Management SVG SVG Integration Filter Effects Masking and Clipping Recommendation
  • 12. История развития Декабрь 2011 Июнь 2010 – Ноябрь 2011 Декабрь 2010 RFC 6455 v.00-v.06 Декабрь 2009 v.76 Candidate Recommendation Third Draft, v.75Январь 2009 First Working Draft
  • 13. DEMONSTRATION
  • 14. Установка соединения Клиент обращается к ws://domain.com/chat Клиент Сервер Обязательные: Обязательные: GET /chat HTTP/1.1 HTTP/1.1 101 “Switching Protocols” Host: server.domain.com Upgrade: websocket Upgrade: websocket Connection: upgrade Connection: upgrade Sec-WebSocket-Accept: 20-byte MD5 Sec-WebSocket-Key: 16-byte nonce, base64 hash in base64 Sec-WebSocket-Version: 13 Опциональные: Опциональные: Sec-WebSocket-Protocol: protocol Sec-WebSocket-Origin: http://domain.com Sec-WebSocket-Extension: extension Sec-WebSocket-Protocol: protocol Sec-WebSocket-Extensions: extension Cookie: cookie content
  • 15. Формат фреймов• Каждый фрейм содержит несколько заголовочных байтов• Данные могут пересылаться как в текстовом так и в бинарном виде• Каждый фрейм содержит «маску» для обхода ограничений прокси-серверов op- Extended mask length Extension data Application data code length
  • 16. W3C WebSocket API• Очень простой программный интерфейс• Основные методы и обработчики событий: • WebSocket(URL, [protocols]) – Создание соединения • onOpen() – вызывается при успешной установке соединения • Send(data) – отправка сообщения • onMessage() – вызывается при получении сообщения • onClose() – вызывается при закрытии соединения • onError() – вызывается при возникновении ошибок
  • 17. Поддержка браузерами • Chrome 4.0+ • Safari 5.0 & iOS 4+ • Firefox 4+ • Opera 10.7+ • Internet Explorer 10+
  • 18. ASP.NET SIGNALR
  • 19. ASP.NET SignalR Library• Позволяет абстрагироваться от концепции сокетов• Включает в себя серверную и клиентскую библиотеки• Позволяет строить WebSocket-подобные приложения для клиентов, не поддерживающих HTML5• Два подхода к разработке • PersistentConnection • Hubs
  • 20. DEMONSTRATION
  • 21. WEBWORKERS
  • 22. ПроблемаПереходы Нажатие Скролл по Скрипты кнопок страниц ссылкам Выполняются в одном потоке
  • 23. Многопоточность в JavascriptWeb Worker - это Web-сценарий, работающий в параллельном потокевыполненияПростая модель взаимодействия с Web Worker-ом onmessage = onerror = Подключение function(event) { function(event) { скриптов: … … importScripts([url } } s]) Остановка потока: close()
  • 24. DEMONSTRATION
  • 25. Функциональное оснащение DOM Window Document Parent Navigator Timers App Import Location Ajax Cache Scripts
  • 26. Варианты использования Предварительная загрузка и кеширование Real-time подсветка синтаксиса Анализ видео и аудио файлов Проверка правописания Фоновый опрос веб-сервисов Выполнение «тяжелых» операций
  • 27. Полезные ссылки• http://www.html5rocks.com• http://dev.w3.org/html5/websockets/• http://tools.ietf.org/html/rfc6455• http://websocket.org/quantum.html• http://soa.sys-con.com/node/1551694• http://signalr.net• http://www.thevista.ru/page14623-html5_web_workers• http://en.wikipedia.org/wiki/WebSocket
  • 28. СПАСИБО ЗАВНИМАНИЕ !