WebSockets

WebSockets — это следующее поколение технологии двунаправленной связи между браузером и сервером. Другими словами между пользователем и сервером устанавливается постоянное подключение в котором обе стороны могут обмениваться данными в реальном времени.

Оглавление:
  1. Обмен данными с сервером
  2. События WebSocket
  3. Методы WebSocket
  4. Пример WebSocket
  5. Установить pywebsocket
  6. Запуск сервера
  7. Обмен данными между разными доменами
  8. Прокси-сервер
  9. Преимущества веб-сокетов
  10. На стороне сервера
  11. Серверные реализации
  12. Версии протокола
  13. Примеры использования
  14. Демонстрационные примеры
  15. Полезные ссылки
  16. Поддержка

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Россия, Республика Крым, Белогорский район, с. Зуя
http://samartsy.ru/

Создать объект WebSocket.

var connection = new WebSocket('ws://site.ru/.websocket.org/echo', ['soap', 'xmpp']);

Обратите внимание на ws:: это новая схема URL для WebSockets. Схема wss: соответствует протоколу https: для безопасных HTTP-соединений.

Связанные с соединением обработчики событий используются для получения сведений о новых подключениях, входящих сообщениях и ошибках.

Второй аргумент ['soap', 'xmpp'] не обязательный, предназначен для дополнительных протоколов. Это может быть строка или массив строк. Каждая из них должна соответствовать названию дополнительного протокола, а сервер принимает только один из переданных с помощью параметров массива. Список поддерживаемых дополнительных протоколов приведен в свойстве protocol для WebSocket.

Названия дополнительных протоколов должны соответствовать реестру IANA. В начале 2012 г. был зарегистрирован только один: soap.

// Когда соединение открыто, послать некоторые данные на сервер
connection.onopen = function () {
connection.send('Тест'); // Отправить сообщение Тест
};

// Лог ошибок
connection.onerror = function (error) {
console.log('WebSocket Error ' + error);
};

// Лог сообщения от сервера
connection.onmessage = function (e) {
console.log('Server: ' + e.data);
};
К началу

Обмен данными с сервером

Как только вы соединитесь с веб-сервером (срабатывает событие open), вы можете отправить данные из браузера к серверу с помощью метода send (), раньше он принимал только строку, но в последней версии спецификации поддерживаются и двоичные сообщения. Для отправки таких данных используются объекты Blob и ArrayBuffer.

// Передача строки
connection.send('Сообщение');

// Передача canvas ImageData как ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
binary[i] = img.data[i];
}
connection.send(binary.buffer);

// Передача file как Blob
var file = document.querySelector('input[type="file"]').files[0];
connection.send(file);

Также можно получать данные от сервера в браузер с помощью обработчика событий OnMessage поступившее сообщение можно увидеть в свойстве data.

Согласно последней версии спецификации, объект WebSocket также способен принимать двоичные сообщения. Двоичные фреймы можно получать в форматах Blob или ArrayBuffer. Чтобы указать формат полученного двоичного фрейма, необходимо задать для свойства binaryType объекта WebSocket значение blob или arraybuffer. Форматом по умолчанию является blob. (Проверять параметр binaryType при отправке не требуется.)

// Настройка binaryType с полученным двоичном видом blob или arraybuffer
connection.binaryType = 'arraybuffer';
connection.onmessage = function(e) {
console.log(e.data.byteLength); // ArrayBuffer если двоичный объект
};

Еще одной новой функцией WebSocket являются расширения. С их помощью можно отправлять сжатые, мультиплексированные фреймы и т. п. Список поддерживаемых сервером расширений приведен в свойстве extensions объекта WebSocket после срабатывания события open.

// Определение принятого расширения
console.log(connection.extensions);
К началу

События WebSocket

Ниже приведены события, связанные с объектом WebSocket. Предположим, мы создали объект WebSocket как уже говорилось выше:

События WebSocket
Событие Обработчик событий Описание
open Socket.onopen Это событие происходит, когда socket устанавливает соединение.
message Socket.onmessage Это событие происходит, когда клиент получает данные с сервера.
error Socket.onerror Это событие происходит, когда есть ошибки в коммуникации.
close Socket.onclose Это событие происходит, когда соединение закрывается.
К началу

Методы WebSocket

Ниже приведены методы связанные с объектом WebSocket. Предположим, мы создали объект сокета как уже говорилось выше:

Методы WebSocket
Метод Описание
Socket.send () Метод send(data) передает данные используя соединение.
Socket.close () Метод сlose () будет использоваться для прекращения любого существующего соединения.

Пример WebSocket

WebSocket это стандартный двунаправленный сокет TCP между клиентом и сервером. Socket начинается как соединение HTTP, а затем Upgrades для сокета после рукопожатия HTTP. После рукопожатия обе стороны могут отправлять данные.

На момент написания этого урока есть только несколько браузеров поддерживающих интерфейс WebSocket (). Вы можете попробовать этот пример в новых версиях браузеров.

<!DOCTYPE HTML>
<html>
<head>
<script>
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("WebSocket поддерживается вашим браузером!");
// Открыть WebSocket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
// WebSocket отправляет данные с помощью send()
ws.send("Сообщение");
alert("Сообщение отправляется...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("Сообщение получено!");
};
ws.onclose = function()
{
// WebSocket отключен
alert("Соединение отключено...");
};
}
else
{
// Браузер не поддерживает WebSocket
alert("WebSocket не поддерживается вашим браузером!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">Запустите WebSocket</a>
</div>
</body>
</html>

Демо

К началу

Установить pywebsocket

До начала проверки клиентской программы вам потребуется сервер который поддерживает WebSocket. Скачать mod_pywebsocket-xxxtar.gz из pywebsocket который призван обеспечить расширение WebSocket для HTTP-сервера Apache и установите его, выполнив следующие действия.

  1. Распакуйте скачанный файл.
  2. Откройте каталог pywebsocket-xxx/src / .
  3. $python setup.py build
  4. $sudo python setup.py install
  5. Читайте документ:
    • $ Pydoc mod_pywebsocket

Это позволит установить его в среде Python.

К началу

Запуск сервера

Перейти к папке pywebsocket-xxx/src/mod_pywebsocket  и выполните следующую команду:

$sudo python standalone.py -p 9998 -w ../example/

Это позволит запустить сервер на порту 9998 и использовать каталог обработчики указанный в опции-W, где находятся echo_wsh.py.

Обмен данными между разными доменами

Протокол обмена данными между разными доменами был разработан недавно и отлично подходит для технологии WebSocket. Она позволяет обмениваться данными между источниками в разных доменах, хотя, как и прежде следует обращать внимание на их надежность. Правилами сервера определяется, будет ли услуга доступна всем клиентам или только определенным доменам.

Прокси-сервер

В любой новой технологии есть свои загвоздки. Для протокола WebSocket проблемой является совместимость с прокси-серверами – посредниками в HTTP-соединениях в большинстве корпоративных сетей. Протокол WebSocket использует систему модернизации HTTP (она обычно применяется для HTTP/SSL) для модернизации HTTP-соединения по данному протоколу. Некоторые прокси-серверы не поддерживают её, и происходит сбой подключения. Таким образом даже если клиент использует протокол WebSocket, установить соединение будет невозможно. Поэтому следующий раздел крайне важен.

К началу

Преимущества веб-сокетов

Технология WebSocket появилась совсем недавно и не полностью реализована во всех браузерах. Несмотря на это, можно воспользоваться упомянутыми выше библиотеками для реализации обратной совместимости в случаях когда протокол WebSocket не поддерживается. Одной из самых популярных библиотек является socket.io, в которой возможности протокола реализованы как на стороне сервера, так и на стороне клиента, а также обеспечена обратная совместимость (по состоянию на февраль 2012 г. socket.io не поддерживает обмен двоичными сообщениями). Существуют и коммерческие решения, например PusherApp, который легко интегрируется в любые веб-приложения и реализуют отправку сообщений WebSocket клиентам с помощью API на базе HTTP. Использование HTTP-запросов неизменно повышает потребление ресурсов в сравнении со стандартной технологией WebSocket.

К началу

На стороне сервера

Использование протокола WebSocket меняет подход к применению серверных приложений. Хотя традиционные наборы серверного программного обеспечения, например LAMP, разработаны для обычного цикла запросов и ответов на базе HTTP, они часто плохо работают в условиях большого числа WebSocket-подключений. Большое количество одновременных соединений требует принципиально новой архитектуры, которая сочетает низкую ресурсоемкость с возможностями параллельной работы. Такие архитектуры обычно создаются на основе потоковой или так называемой неблокирующей системы обмена данными.

К началу

Серверные реализации

К началу

Версии протокола

Протоколом проводной связи (установления соединения и обмена данными между пользователем и сервером) для технологии WebSocket является RFC6455. Последние версии Chrome и Chrome для Android полностью соответствуют спецификации RFC6455, в том числе и в части отправки двоичных сообщений. Этот протокол также поддерживают браузеры Firefox 11 и Internet Explorer 10. Можно продолжать использование предыдущих версий протокола, но делать этого не рекомендуется из-за наличия в них уязвимости. Если на вашем сервере уже реализована поддержка предыдущих версий протокола WebSocket, мы рекомендуем обновить её до последней версии.

К началу

Примеры использования

Протокол WebSocket позволяет приблизить время реакции при обмене данными между пользователем и сервером к параметрам подключения в реальном времени. Учтите, что использование этого протокола может потребовать изменения подхода к реализации серверных приложений и применения других технологий, например очереди событий. Вот несколько возможных сфер применения.

  • Многопользовательские сетевые игры
  • Чаты
  • Бегущая строка
  • Ленты социальных сетей обновляемые в реальном времени
К началу

Демонстрационные примеры

Полезные ссылки

Поддержка

Таблица поддержки браузерами: “WebSockets”

Если Ваш браузер поддерживает HTML5 — WebSockets вы получите предупреждение о том, что ваш браузер поддерживает WebSocket и наконец, когда вы нажимаете кнопку Запустить WebSocket вы получите сообщение скрипт отправлен на сервер.

автор
htmlhook.ru | Скрипты для веб-приложений