Основные курсы HTML5

API HTML5

Медиа HTML5

Графика HTML5

Нормы кодирования HTML(5)События, отправляемые сервером, в HTML5

WebSocket в HTML5

WebSocket - это протокол, предоставляемый с HTML5, который позволяет вести полнодуплексную коммуникацию на одном TCP-соединении.

WebSocket позволяет сделать обмен данными между клиентом и сервером более простым, позволяя серверу активно推送 данные клиенту. В API WebSocket браузеру и серверу нужно выполнить только один handshake, после чего между ними создается постоянное соединение, и они могут вести двусторонний обмен данными.

WebSocket позволяет сделать обмен данными между клиентом и сервером более простым, позволяя серверу активно推送 данные клиенту. В API WebSocket браузеру и серверу нужно выполнить только один handshake, после чего между ними формируется быстрый канал, и они могут напрямую передавать данные друг другу.

В настоящее время многие веб-сайты для реализации технологии推送 используют технику AJAX-пинг-пинга. Пинг-пинг заключается в том, что браузер в определенные интервалы времени (например, каждые 1 секунду) отправляет HTTP-запросы на сервер, а сервер возвращает最新的数据客户端у браузера. Этот традиционный режим имеет очевидные недостатки, например, браузеру нужно постоянно отправлять запросы на сервер, а HTTP-запросы могут содержать довольно длинные заголовки, в которых действительно эффективные данные составляют только малую часть, что显然 приводит к浪费у большого количества полосы пропускания и других ресурсов.

Протокол WebSocket, определенный HTML5, позволяет лучше экономить ресурсы сервера и полосу пропускания, а также позволяет более реально вести коммуникации.

Браузер через JavaScript отправляет запрос на установку WebSocket-соединения с сервером. После установления соединения клиент и сервер могут напрямую обмениваться данными через TCP-соединение.

После получения WebSocket-соединения вы можете через send() метод для отправки данных на сервер и через onmessage события для получения данных, возвращаемых сервером.

Этот API используется для создания объекта WebSocket.

var Socket = new WebSocket(url, [protocol]);

Первый параметр в этом коде url, указывает на URL подключения. Второй параметр protocol является опциональным и определяет принимаемый подпротокол.

Свойства WebSocket

Вот свойства объекта WebSocket. Предположим, что мы использовали следующий код для создания объекта Socket:

Свойства	Описание
Socket.readyState	Чтение только свойство readyState Это состояние подключения,它可以 быть следующим значением: 0 - означает, что подключение еще не установлено. 1 - означает, что подключение уже установлено, и можно начинать коммуникацию. 2 - означает, что подключение находится в процессе закрытия. 3 - означает, что подключение уже закрыто или подключение не может быть открыто.
Socket.bufferedAmount	Чтение только свойство bufferedAmount Количество UTF-8 текстовых байт, которые были помещены в очередь send() для передачи, но еще не отправлены.

События WebSocket

Вот события объекта WebSocket. Предположим, что мы использовали следующий код для создания объекта Socket:

Событие	Обработчик событий	Описание
open	Socket.onopen	Инициируется при установлении подключения
message	Socket.onmessage	Инициируется при получении данных от сервера клиентом
error	Socket.onerror	Инициируется при возникновении ошибки в comunicación
close	Socket.onclose	Инициируется при закрытии подключения

Методы WebSocket

Вот методы объекта WebSocket. Предположим, что мы использовали следующий код для создания объекта Socket:

Метод	Описание
Socket.send()	Использование подключения для отправки данных
Socket.close()	Закрытие подключения

Пример WebSocket

Протокол WebSocket по своей сути является протоколом, основанным на TCP.

Для установления подключения WebSocket клиентский браузер сначала должен направить HTTP-запрос на сервер, этот запрос отличается от обычных HTTP-запросов, так как содержит дополнительные заголовки информации, среди которых дополнительный заголовок информации "Upgrade: WebSocket" указывает на то, что это запрос на обновление протокола, сервер обрабатывает эти дополнительные заголовки информации и затем генерирует ответную информацию, которая возвращается клиенту, и подключение WebSocket между клиентом и сервером устанавливается, и обе стороны могут свободно передавать информацию через этот канал подключения, и это подключение будет существовать до тех пор, пока одна из сторон не закроет его активно.

HTML и JavaScript клиента

В настоящее время большинство браузеров поддерживают интерфейс WebSocket(), вы можете попробовать пример в следующих браузерах: Chrome, Mozilla, Opera и Safari.

Содержимое файла w3codebox_websocket.html

Пример

<!DOCTYPE HTML>
<html>
　　　<head>
　　　<meta charset="utf-8">
　　　<title>Методы использования WebSocket, базовый учебник (oldtoolbag.com)</title>
　　　　
　　　　　　<script type="text/javascript">
　　　　　　　　　function WebSocketTest()
　　　　　　　　　{
　　　　　　　　　var x = document.getElementById("websocket");
　　　　　　　　　　　　if ("WebSocket" in window)
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　x.innerHTML="Ваш браузер поддерживает WebSocket!";
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　//　Открываем веб-socket
　　　　　　　　　　　　　　　var ws = new WebSocket("ws://echo.websocket.org");
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onopen = function()
　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　//　WebSocket уже подключен, используйте метод send() для отправки данных
　　　　　　　　　　　　　　　　　　ws.send("Отправить данные");
　　　　　　　　　　　　　　　　　　x.innerHTML="Данные отправляются...";
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onmessage = function(evt)　
　　　　　　　　　　　　　　　{　
　　　　　　　　　　　　　　　　　　var received_msg = evt.data;
　　　　　　　　　　　　　　　　　　x.innerHTML="Данные получены, базовый учебник (oldtoolbag.com)...";
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onclose = function()
　　　　　　　　　　　　　　　{　
　　　　　　　　　　　　　　　　　　//　Закрытие websocket
　　　　　　　　　　　　　　　　　　x.innerHTML="Соединение закрыто...";　
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　else
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　//　Браузер не поддерживает WebSocket
　　　　　　　　　　　　　　　x.innerHTML="Ваш браузер не поддерживает WebSocket!";
　　　　　　　　　　　　}
　　　　　　　　　}
　　　　　　</script>
　　　　　　　　
　　　</head>
　　　<body>
　　　　　　　
　　　　　　<div id="sse">
　　　　　　　　　<input type="button" onclick="WebSocketTest()" value="Запуск WebSocket">
　　　　　　</div>
　　　　　　<div id="websocket"></div>
　　　　　　
　　　</body>
</html>

Проверьте, посмотрите на ‹/›

Результаты теста показаны на следующем рисунке:

Различия между WebSocket и Socket

Сообщение программного обеспечения имеет семь уровней структуры, нижние три уровня больше всего связаны с передачей данных, верхние три уровня больше всего связаны с обработкой данных, а средний уровень передачи данных является мостом между верхними тремя уровнями и нижними тремя уровнями, и каждый уровень выполняет различную работу, верхний протокол зависит от нижнего протокола. На основе концепции этой структуры коммуникации.
Socket на самом деле не является протоколом, это промежуточный программный абстрактный уровень для обмена сообщениями между приложениями и семейством протоколов TCP/IP, это набор интерфейсов. При comunicación entre dos hosts, Socket организует los datos para que cumplan con el protocolo especificado. La conexión TCP depende más del protocolo IP de nivel inferior, y la conexión IP depende de niveles más bajos como la capa de enlace.
WebSocket же является типичным протоколом уровня приложения.

Socket - это протокол уровня транспортного контроля
WebSocket - это протокол уровня приложения

Нормы кодирования HTML(5)События, отправляемые сервером, в HTML5