• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Periculum est in mora
 

Periculum est in mora

on

  • 623 views

Video:

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


Statistics

Views

Total Views
623
Views on SlideShare
599
Embed Views
24

Actions

Likes
1
Downloads
5
Comments
0

2 Embeds 24

http://lanyrd.com 22
https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • By Maxim Dorofeev ‏@cartmendum
  • http://dev.w3.org/html5/websockets/
  • http://tools.ietf.org/html/rfc6455
  • http://tools.ietf.org/html/rfc6455
  • http://caniuse.com/#search=websocket
  • http://www.websocket.org/quantum.html
  • http://webtide.intalio.com/2011/09/cometd-2-4-0-websocket-benchmarks/
  • http://webtide.intalio.com/2011/09/cometd-2-4-0-websocket-benchmarks/

Periculum est in mora Periculum est in mora Presentation Transcript

  • Промедление смерти подобноКарлович Александр, <EPAM> Systems, Frontend разработчик Контакты: Email: alexkarlovich@gmail.com Twitter: http://twitter.com/AlexKarlovich Site: http://alexkarlovich.com
  • Agenda1. Применение2. Обзор технологий и инструментов3. Подробнее о веб-сокетах4. Практикум
  • Биржевая и финансовая информация
  • Спортивные события,букмекерские котировки
  • Онлайн-игры
  • Соцсети, чаты
  • Транcпорт
  • Бесконечный GIF
  • Polling
  • Polling в жизни
  • COMET- Бесконечный фрейм- Long Polling- Http streaming- Flash-объекты- Java-апплеты
  • Рубрика “No comments”– <meta http-equiv="refresh" content="60">– setTimeout(function () { location.reload();}, 6000);
  • Realtime в HTML5- WebRTC.- Server-Sent Events.- WebSocket протокол & API.
  • WebSocket API
  • Пример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;
  • Хидеры запроса- 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
  • Хидеры ответа- HTTP/1.1 101 Switching Protocols- Upgrade: websocket- Connection: Upgrade- Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec- WebSocket-Protocol: chat
  • Поддержка браузеров
  • Серверы
  • Трафик: Web Sockets vs Polling
  • Преимущества WebSockets- Веб-стандарт- Двусторонний обмен данными- Нативная поддержка браузерами и серверами- Низкая задержка- Постоянное соединение- Кросдоменность- Неограниченное количество соединений- Кодировка UTF8- Работа с бинарными данными
  • Библиотеки- SignalR- Lightstreamer- Socket.io- Sock.js- ...
  • Практикум: рисуем онлайн
  • Материалы для воркшопа- Готовое приложение:http://alexkarlovich.com/frontendconf/workshop/client-side/views/- Материалы для воркшопа: http://alexkarlovich.com/frontendconf/workshop.zip
  • Ссылки- WebSocket-протокол: http://tools.ietf.org/html/rfc6455- WebSocket-API: http://www.w3.org/TR/2011/WD-websockets-20110419/
  • Спасибо за внимание! Email: alexkarlovich@gmail.com Twitter: http://twitter.com/AlexKarlovich Site: http://alexkarlovich.com