Что такое HTML5 WebSockets?
Всем привет! В этой статье мы поговорим о том, что такое html5 websockets и зачем они нужны.
В этой статье мы рассмотрим следующее:
- Зачем нужны веб-сокеты
- Что такое веб-сокеты
- Что делает их отличными
- Что это может означать для будущих веб-приложений
Надеюсь, в конце статьи вы будете иметь четкое представление о том, что такое веб-сокеты и как их использовать.
Зачем нужны веб-сокеты?
Итак, зачем же нам нужны веб-сокеты? Какие проблемы мы пытаемся решить, используя их? Ответ прост. Нам нужно лучшее решение для веб-приложений, работающих по технологии клиент-сервер в реальном времени. В настоящее время существует 2 основных метода для обеспечения этого.
- Первый - опрос сервера о новых данных. Если данные есть, они отправятся клиенту, обычно, через Ajax. Это похоже на постоянный вопрос детей к их родителям "мы уже приехали?" каждые несколько секунд во время езды в автомобиле. К большому огорчению родителей, они обязаны говорить "нет" каждые несколько секунд, пока не прибудут к месту назначения. Опрос сервера очень похож на это. Клиент опрашивает сервер о новых данных каждые несколько секунд, и сервер каждые несколько секунд отвечает ему, даже если данных нет.
- Второй - Long Polling(долгий опрос). Это вариация первой техники, но вместо того, чтобы возвращать пустой ответ клиенту, когда данных нет, и закрывать соединение, сервер держит соединение открытым(с таймаутом). В некоторый момент в будущем, когда у сервера будут новые данные для клиента, он отдаст их клиенту и закроет соединение. В большинстве случаев это намного лучше, чем обычный polling, однако, если у вас приходит много данных за короткий промежуток времени, то это будет работать почти как обычный polling.
Оба метода имеют свои преимущества в сравнении друг с другом, но они также имеют общий набор недостатков, которые разработчики не могли обойти.
- Оба используют протокол http, чтобы отправлять сообщения на сервер. Каждый пакет информации, посылаемый через этот протокол, оборачивается в кучу заголовков, которые описывают, где этот пакет движется, откуда пришел пакет, информацию о браузере и прочее. Все это добавляет много накладных расходов, когда вы общаетесь в реальном времени.
- Ни один из этих методов не является "двунаправленным полным дуплексом", где оба клиент и сервер могут посылать и получать информацию друг от друга одновременно, как, например, телефонная система, где люди в обоих концах могут говорить и слышать одновременно.
Это причины, по которым текущие техники не являются хорошими для быстрой, масштабируемой связи в реальном времени в вебе. Нам нужно лучшее решение и это - веб-сокеты.
Что такое веб-сокеты?
Веб-сокеты - новый путь для клиентов, чтобы связываться с сервером и наоборот без лишних http заголовков. Веб-сокеты используют свой собственный протокол, который был определен IETF. Последняя версия - RFC 6455. Предыдущие версии протокола доказали, что он имеет некоторые проблемы безопасности, поэтому он был реализован в некоторых браузерах, как Opera, но не был включен по умолчанию. Новые версии протокола, кажется, решили эти проблемы, и браузеры работают над его поддержкой в настоящее время.
Помимо своего протокола, веб-сокеты также имеют свой API, который может быть использован в веб-приложениях, чтобы открыть или закрыть соединение и посылать/получать сообщения. Он называется WebSockets API и определен в спецификации W3C.
С веб-сокетами вы можете использовать двунаправленную полную дюплексную связь между сервером и клиентом с минимальными накладными расходами по сравнению с обычным http. Веб-сокеты обещают быструю, более масштабируемую и более прочную высокую производительность приложений в реальном времени. На самом деле, по некоторым анализам Kaazing корпорации, это может уменьшить размер трафика заголовков http от 500:1 до 1000:1 и уменьшить задержки в сети до 3:1. Это приводит к серьезному повышению производительности, особенно для приложений, требующих быстрого обновления в реальном времени.
Как это работает?
До того, как клиент и сервер начнут обмениваться сообщениями, они должны установить соединение. Это делается установкой "рукопожатия", где клиент и сервер посылают запрос на соединение, и, если сервер хочет этого, то он пошлет ответ, подтверждающий соединение. Спецификация протокола дает понять, что одно из проектных решений этого протокола было обеспечить, чтобы оба, основанных на http клиентов и основанных на websocket, могли использовать один порт.
Спецификация протокола содержит пример "рукопожатия". Инициализация рукопожатия от клиента выглядит так:
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
Здесь клиент пошлет ключ в Sec-WebSocket-Key заголовке, который шифруется base64. Для сервера, чтобы сформировать ответ, он примет этот ключ и добавит магическую строку 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 к нему, затем он сосчитает sha-1 хэш из полученной строки. Затем этот хэш будет закодирован в base64 и отправлен клиенту в заголовке sec-WebSocket-Accept.
Следует обратить внимание на заголовок Origin. Клиентское рукопожатие всегда будет иметь этот заголовок, и он будет отправлен на сервер, хотят они принимать клиентов с различных источников или нет.
WebSocket API
Front-end разработчики будут заинтересованы в WebSocket API[2], который базируется на JavaScript API, который разработчики будут использовать, чтобы реализовать обмен сообщениями между их клиентской стороной приложения и сервером.
Поддерживают ли браузеры WebSockets?
Первые вещи, которые разработчикам следует сделать, когда они работают с WebSocket API - выявить, поддерживает ли браузер работу с ним. Если да, то мы можем работать с ним. Если нет, то нам следует использовать другие методы клиент-серверной связи, такие, как long-polling, о котором говорилось выше.
if('WebSocket' in window) {
/* WebSocket поддерживается. Вы можете писать свой код */
} else {
/* WebSockets не поддерживается. Попробуйте использовать старые методы связи */
}
Открытие и закрытие соединения с WebSocket
Для начала следует соединиться с WebSocket сервером, используя его конструктор.
var connection = new WebSocket('ws://example.org:12345/myapp');
Вы можете также использовать wss, если нужно защищенное соединение.
var connection = new WebSocket('wss://secure.example.org:67890/myapp');
Кроме того, можно указать свои под-протоколы.
var connection = new WebSocket('ws://example.org:12345/myapp', ['chat', 'super-awesome-chat']);
Если ваше соединение подтверждено успешно, то сработает onopen событие. Вы можете отловить его так:
connection.onopen = function() {
console.log('Connection open!');
}
Если в соединении отказано, то сработает событие onclose.
connection.onclose = function() {
console.log('Connection closed');
}
Вы можете сами закрыть соединение, если вам нужно, таким образом:
connection.close();
Вы можете отловить ошибки и, например, вывести их в консоль таким образом:
connection.onerror = function(error) {
console.log('Error detected: ' + error);
}
Отправка и получение сообщений
Когда мы успешно открыли соединение с сервером, нам нужно отправлять и получать сообщения. Отправка сообщений очень проста. Нужно лишь использовать .send() метод на объекте соединения.
connection.send('Hey server, whats up?');
Если клиент получает сообщение от сервера, то он вызывает метод onmessage для вас.
connection.onmessage = function(e){
var server_message = e.data;
console.log(server_message);
}
Если вы хотите отправить json объекты на сервер вместо обычного сообщения, вам следует сериализировать их в обычную строку вот так:
var message = {
'name': 'bill murray',
'comment': 'No one will ever believe you'
};
connection.send(JSON.stringify(message));
Поддержка WebSockets на сервере
Большинство веб-серверов работают на http протоколе. Так как веб-сокеты используют свой протокол, то вам будет нужно установить дополнительные библиотеки и дополнения, чтобы поддерживать ws:// и wss:// протоколы в дополнение к http и https.
Поддержка браузерами
Большинство современных браузеров поддерживают веб-сокеты. Про старые IE придется забыть.
Если вы хотите сделать кроссбраузерное решение, то используйте socket.io и node.js.
Другой путь - использовать такие сервисы, как Pusher или BeaconPush и их API.
Заключение
WebSockets очень легки в использовании, очень быстры, надежны и эффективны. Обеспечивают двунаправленную связь между клиентом и сервером. Веб-сокеты подходят приложениям, которые получают и отсылают очень много данных за очень короткий промежуток времени в реальном времени. Например, очень хорошее применение - онлайн игры или получение сообщений, уведомлений, стримы, медиа и другое.
Статья является переводом.
Источник: http://www.developerfusion.com/article/143158/an-introduction-to-websockets/
-
Создано 05.08.2014 20:49:42
-
Михаил Русаков
Комментарии (3):
А можно пару слов о том, как работать с сокетами со стороны сервера?
Ответить
Поддерживаю предыдущий комментарий. Везде, где не искал, даются примеры только со стороны клиента. Очень хочется узнать, как на это отвечает сервер.
Ответить
Вот Серверная часть // Подключаем библиотеки websocket var WebSocketServer = require('websocket').server; // http var http = require('http'); // sys var sys = require('sys'); // Запускаем сервер http var server = http.createServer(function(request, response) { console.log((new Date()) + ' Получен запрос на ' + request.url); response.writeHead(404); response.end(); }); // и пускаем трансляцию на порт 8080 server.listen(8080, function() { console.log("WebSocket сервер запущен."); console.log("Трансляция проходит на порт 8080."); }); // Запускаем сервер websocket на сервере http wsServer = new WebSocketServer({ httpServer: server, autoAcceptConnections: false }); function originIsAllowed(origin) { return true; } var connections = {}; // Переменные для присвоения порядковых номеров присоединившимся клиентам. var connectionIDCounter = 0, Num = 0; console.log(module); // Прослушиваем наш WetSocket сервер wsServer.on('request', function(request) { if (!originIsAllowed(request.origin)) { // Проверяем что мы получили только дозволенный оригинальный запрос request.reject(); console.log((new Date()) + ' Соединение от запроса ' + request.origin + ' отклонена.'); return; } // Объявляем новое соединение с клиентом. var connection = request.accept('echo-protocol', request.origin); var ms = new Date(); Num = Num + 1; // Выводим в окне запущенного сервера лог новых присоединившихся клиентов console.log((ms.toLocaleTimeString()) + ' Соединение установлено под номером '+Num); // Прослушиваем присоединившегося клиента connection.on('message', function(message) { // Обработка принятых сообщений, превратит строку с данными data в формате JSON в JavaScript-объект var data = JSON.parse(message.utf8Data); // отправляем сообщение всем клиентам wsServer.broadcast(JSON.stringify(data)); }); connection.on('close', function(reasonCode, description) { if (connection.id!=='undefined'){ Num = Num - 1; var message = "Покинул клиент, на сайте: "+Num; // Упаковка сообщение в объект var statdata = {}; statdata.message = message; history.push(statdata); delete connections[connection.id]; // отправка сообщения всем что клиент вышел и JSON.stringify превращает объекты в строку в формате JSON wsServer.broadcast(JSON.stringify(statdata)); } }); connection.on('error', function(reasonCode, description) { console.log((ms.toLocaleTimeString()) + ' Error ' + connection.remoteAddress + ' disconnected.'); Num = Num - 1; }); }); // отправка сообщения всем function broadcast(data) { Object.keys(connections).forEach(function(key) { var connection = connections[key]; if (connection.connected) { connection.send(data); } }); }; // Отправка определенному клиенту сообщения function sendToConnectionId(connectionID, data) { var connection = connections[connectionID]; if (connection && connection.connected) { connection.send(data); } }; Как пример, реализация на node.js ссылка github https://github.com/theturtle32/WebSocket-Node Ссылка http://line6.ts6.ru/
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.