Асинхронный веб, или что такое веб-сокеты. И как это работает

У меня есть приложение vb.net, которое открывает сокет и прослушивает его.

Мне нужно связаться через этот сокет с этим приложением, используя javascript, запущенный в браузере. То есть мне нужно отправить некоторые данные в этот сокет, чтобы приложение, которое прослушивает этот сокет, может принимать эти данные, делать некоторые вещи, используя некоторые удаленные вызовы, и получать еще несколько данных и помещать их обратно в сокет, который мне нужен javascript. прочитайте и распечатайте его в браузере.

Ive try, socket.io, websockify, но ни один из них не оказался полезным.

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

Если это возможно, кто-то может указать мне в правильном направлении, чтобы помочь мне установить цель.

6 ответов

Что касается вашей проблемы, в настоящее время вам придется зависеть от XHR или веб-узлов для этого.

Чтобы получить доступ к этому API, вам нужно включить флажок эксперимента в манифесте расширений. Использование сокетов довольно просто, например:

Chrome.experimental.socket.create("tcp", "127.0.0.1", 8080, function(socketInfo) { chrome.experimental.socket.connect(socketInfo.socketId, function (result) { chrome.experimental.socket.write(socketInfo.socketId, "Hello, world!"); }); });

Вы можете использовать HTML5 Web Sockets:

Var connection = new WebSocket("ws://IPAddress:Port"); connection.onopen = function () { connection.send("Ping"); // Send the message "Ping" to the server };

Ваш сервер также должен прослушиваться с сервера WebSocket, такого как pywebsocket, иначе вы можете написать свой собственный, как описано в Mozilla

Дополнительно:

Это будет возможно через интерфейс навигатора, как показано ниже:

Navigator.tcpPermission.requestPermission({remoteAddress:"127.0.0.1", remotePort:6789}).then(() => { // Permission was granted // Create a new TCP client socket and connect to remote host var mySocket = new TCPSocket("127.0.0.1", 6789); // Send data to server mySocket.writeable.write("Hello World").then(() => { // Data sent sucessfully, wait for response console.log("Data has been sent to server"); mySocket.readable.getReader().read().then(({ value, done }) => { if (!done) { // Response received, log it: console.log("Data received from server:" + value); } // Close the TCP connection mySocket.close(); }); }, e => console.error("Sending error: ", e););

// Host we are connecting to var host = "localhost"; // Port we are connecting on var port = 3000; var socket = new jSocket(); // When the socket is added the to document socket.onReady = function(){ socket.connect(host, port); } // Connection attempt finished socket.onConnect = function(success, msg){ if(success){ // Send something to the socket socket.write("Hello world"); }else{ alert("Connection to the server could not be estabilished: " + msg); } } socket.onData = function(data){ alert("Received from socket: "+data); } // Setup our socket in the div with the id="socket" socket.setup("mySocket");

Чтобы достичь желаемого, вам нужно написать два приложения (например, на Java или Python):

Приложение Bridge, которое находится на клиентском компьютере и может работать как с сокетами TCP/IP, так и с WebSockets. Он будет взаимодействовать с рассматриваемым сокетом TCP/IP.

Серверное приложение (например, JSP/Servlet WAR), которое может общаться через WebSockets. Он включает в себя по крайней мере одну HTML-страницу (включая код обработки на стороне сервера, если это необходимо) для доступа через браузер.

Это должно работать так

  • Bridge откроет WS-соединение с веб-приложением (поскольку сервер не может подключиться к клиенту).
  • Веб-приложение попросит клиента идентифицировать себя
  • Клиент моста отправляет некоторую идентификационную информацию на сервер, который хранит ее, чтобы идентифицировать мост.
  • Страница для просмотра в браузере подключается к серверу WS с помощью JS.
  • Повторите шаг 3, но для страницы на основе JS
  • Страница на основе JS отправляет команду на сервер, в том числе на какой мост он должен идти.
  • Сервер перенаправляет команду на мост.
  • Мост открывает сокет TCP/IP и взаимодействует с ним (отправляет сообщение, получает ответ).
  • Мост отправляет ответ на сервер через WS
  • WS пересылает ответ на страницу для просмотра в браузере
  • JS обрабатывает ответ и реагирует соответственно
  • Повторяйте, пока один из клиентов не отключится/не выгружается

    • Примечание 1. Вышеприведенные шаги являются огромным упрощением и не включают информацию об обработке ошибок и запросах keepAlive в случае, если клиент преждевременно отключается или сервер должен сообщить клиентам, что он выключается/перезапускается.

    Примечание 2: В зависимости от ваших потребностей, возможно объединить эти компоненты в один, если рассматриваемый сервер сокетов TCP/IP (с которым соединяется мост) находится на той же машине, что и серверное приложение.

    Your browser may not support the functionality in this article.

    Проблема: время реакции при обмене данными между сервером и клиентом

    Интернет создавался главным образом на основе так называемой парадигмы запросов и ответов, реализованной с помощью протокола HTTP. Она заключается в том, что пока клиент не отправит запрос на открытие следующей страницы, она не загрузится. Примерно с 2005 г. с появлением технологии AJAX работа в Интернете стала более динамичной. При этом обмен данными по протоколу HTTP все равно инициировался клиентом, и это требовало от пользователя выполнения определенных действий или периодического опроса сервера для загрузки обновленной информации.

    Технологии, позволяющие серверу отправлять клиенту новые данные в момент их появления, существуют довольно давно. Они известны как Push или Comet . Один из распространенных способов создания иллюзии соединения, инициируемого сервером, – это так называемый метод длинного опроса. Его суть в том, что клиент создает подключение к HTTP-серверу и оно не закрывается до отправки ответа. Если на сервере действительно есть обновленные данные, он отправляет ответ (в других технологиях для этого используются Flash , multipart-запросы XHR и особые HTML-файлы). Технология длинного опроса, как и другие подобные приемы, прекрасно работает. Вы пользуетесь ими каждый день, например, в чате Gmail.

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

    Знакомство с протоколом WebSocket: использование веб-сокетов в Интернете

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

    Начало работы

    Чтобы создать подключение WebSocket, можно вызвать соответствующий конструктор.

    Var connection = new WebSocket("ws://html5rocks.websocket.org/echo", ["soap", "xmpp"]);

    Обратите внимание на ws: : это новая схема URL для веб-сокетов. Для создания безопасных веб-сокетов также используется схема wss: , аналогично протоколу https: для безопасных HTTP-соединений.

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

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

    Названия субпротоколов должны соответствовать реестру IANA . По состоянию на февраль 2012 г. зарегистрировано только одно такое название (soap).

    // When the connection is open, send some data to the server connection.onopen = function () { connection.send("Ping"); // Send the message "Ping" to the server }; // Log errors connection.onerror = function (error) { console.log("WebSocket Error " + error); }; // Log messages from the server connection.onmessage = function (e) { console.log("Server: " + e.data); };

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

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

    // Sending String connection.send("your message"); // Sending canvas ImageData as ArrayBuffer var img = canvas_context.getImageData(0, 0, 400, 320); var binary = new Uint8Array(img.data.length); for (var i = 0; i

    Сервер также может в любой момент отправить нам сообщение. Когда это происходит, срабатывает обратный вызов onmessage . Этот вызов получает объект события, а поступившее сообщение можно увидеть в свойстве data .

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

    // Setting binaryType to accept received binary as either "blob" or "arraybuffer" connection.binaryType = "arraybuffer"; connection.onmessage = function(e) { console.log(e.data.byteLength); // ArrayBuffer object if binary };

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

    // Determining accepted extensions console.log(connection.extensions);

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

    Протокол обмена данными между разными доменами был разработан недавно и отлично подходит для технологии 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-подключений. Большое количество одновременных соединений требует принципиально новой архитектуры, которая сочетает низкую ресурсоемкость с возможностями параллельной работы. Такие архитектуры обычно создаются на основе потоковой или так называемой неблокирующей системы обмена данными.

    В статье рассказывается, как использовать веб-сокеты для создания веб-приложений. Но перед тем как погрузиться в изучение протокола и API веб-сокетов, рассмотрим проблемы, с которыми сталкиваются веб-приложения, и как WebSocket помогает их решению.

    Краткая история веб-приложений реального времени

    Интернет был построен на представлении о том, что забота браузера– запрос данных с сервера, а забота сервера – обслуживание этих запросов. Эта парадигма не подвергалась сомнению несколько лет. Но с появлением AJAX в 2005 году многие начали работать над созданием двунаправленных соединений.

    Веб-приложения значительно увеличивались в размере. Сдерживающим фактором для их роста была традиционная модель HTTP. Чтобы преодолеть это, были созданы несколько стратегий, позволяющих серверам «проталкивать» (push) данные клиенту. Одной из наиболее популярных стала стратегия «длинного опроса» . Она подразумевает поддержание HTTP- соединения открытым до тех пор,пока у сервера есть данные для отправки клиенту.

    Но все эти технологии приводят к перегрузке HTTP. Каждый раз, когда вы делаете запрос HTTP, набор заголовков и cookie передаются на сервер. Они накапливаются в большие массивы информации, которые нужно передать. Это увеличивает время ожидания, что может быть критично для равномерной работы приложения.

    Чтобы решить данную проблему, нужен был способ создания постоянного соединения с минимальными задержками, которое могло бы поддерживать транзакции, инициированные как клиентом, так и сервером. Это как раз то, что предоставляют веб-сокеты.

    Как работают веб-сокеты

    Веб-сокет создает постоянное соединение между клиентом и сервером, которое обе стороны могут использовать для отправки данных.

    Браузер устанавливает соединение по веб-сокету при помощи «рукопожатия». Этот процесс начинается с отправки клиентом обычного запроса HTTP на сервер. В этот запрос включается заголовок Upgrade, который сообщает серверу, что браузер хочет установить соединение по веб-сокету.

    Вот упрощённый пример первоначальных заголовков запроса.

    GET ws ://websocket.example.com/ HTTP/1.1

    Origin : http://example.com

    Connection : Upgrade

    Host : websocket.example.com

    Upgrade : websocket

    Замечание : URL-адреса веб-сокетов используют протокол ws . Также существует протокол wss для безопасных соединений, который является эквивалентом HTTPS.

    Если сервер поддерживает протокол WebSocket, он сообщает об этом с помощью заголовка Upgrade в ответе.

    HTTP /1.1 101 WebSocket Protocol Handshake

    Connection : Upgrade

    Upgrade : WebSocket

    После того, как рукопожатие выполнено, первоначальное соединение HTTP заменяется соединением по веб-сокету, которое использует то же соединение TCP/IP . На этом этапе любая из сторон может начать отправку данных.

    С помощью веб-сокетов можно передавать неограниченный объем информации без добавления данных, связанных с запросами (как в HTTP). Данные передаются через веб-сокет как сообщения, каждое из которых состоит из одного или большего количества фрагментов.

    Чтобы убедиться, что сообщение будет правильно интерпретировано на стороне клиента, каждому фрагменту предшествуют от 4 до 12 байт данных о полезной нагрузке. Использование обмена сообщениями на основе фрагментов позволяет снизить объем дополнительных данных, что приводит к сокращению задержек.

    Замечание : Стоит отметить, что клиент будет уведомлен о новом сообщении только, когда сервер передаст все его фрагменты.

    Создаём демо-пример Создание приложения на основе веб-сокетов

    Мы создадим простое приложение, которое соединяется с сервером по веб-сокету. Перед тем, как мы углубимся в детали API, нужно создать несколько файлов.

    Посмотреть пример

    Загрузить код

    Посмотреть на CodePen

    Создайте файл index.html и добавьте в него следующую разметку.

    WebSockets Demo WebSockets Demo Connecting... Send Message Close Connection

    Элемент предназначен для вывода сообщений о статусе соединения. Список будет использоваться для отображения сообщений, отправленных и полученных от сервера. Веб-форма предназначена для ввода сообщений.

    Файл style.css , на который ссылается этот код, находится в архиве для загрузки. Далее создадим файл app.js и добавим в него следующий код.

    window.onload = function() { // Получаем ссылки на элементы страницы. var form = document.getElementById("message-form"); var messageField = document.getElementById("message"); var messagesList = document.getElementById("messages"); varsocketStatus = document.getElementById("status"); varcloseBtn = document.getElementById("close"); // Остальной код из этой статьи будет добавляться ниже... };

    Мы создали несколько переменных и инициализировали их ссылками на ключевые элементы страницы.

    Открытие соединений

    Теперь, когда готов костяк приложения, можно начать изучать WebSocket API. Для начала узнаем, как создать новое соединение WebSocket. Для этого нужно вызвать конструктор класса WebSocket и передать ему URL сервера.

    Скопируйте следующий код в файл app.js , чтобы создать новое соединение.

    // Создаём новый объект WebSocket. varsocket = new WebSocket("ws://echo.websocket.org");

    После того, как соединение установлено, возникнет событие open объекта WebSocket. Добавим обработчик события, который обновит статус элемента сообщением о том, что соединение установлено.

    // Показываем сообщение «connected» при открытии веб-сокета. socket.onopen = function(event) { socketStatus.innerHTML = "Connected to: " + event.currentTarget.url; socketStatus.className = "open"; };

    Также мы добавляем класс open элементу .

    Обработка ошибок

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

    // Обработка возникающих ошибок. socket.onerror = function(error) { console.log("WebSocket Error: " + error); };

    Отправка сообщений

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

    socket.send(data);

    Можно отправлять как текст, так и двоичные данные. В нашем приложении нужно передавать содержимое текстового поля на сервер при отправке формы. Чтобы сделать это, надо определить обработчик события отправки формы.

    Добавьте следующий код в файл app.js .

    // Отправка сообщения при отправке формы form.onsubmit = function(e) { e.preventDefault(); // Получение сообщения из текстового поля. var message = messageField.value; // Отправка сообщения по веб-сокету. socket.send(message); // Добавление сообщения в список сообщений. messagesList.innerHTML += "Sent:" + message + ""; // Очистка текстового поля. messageField.value = ""; return false; };

    При отправке формы приведенный выше код получит сообщение из messageField и отправит его через веб-сокет. Затем сообщение добавляется в messagesList и отображается на экране. После этого значение messageField очищается, чтобы пользователь мог ввести новое сообщение.

    Получение сообщений

    При получении сообщения вызывается событие message . Оно включает в себя свойство data , которое можно использовать для доступа к содержимому сообщения.

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

    Чтобы добиться этого, скопируйте следующий код в файл app.js .

    // Обработка сообщений, отправленных сервером. socket.onmessage = function(event) { var message = event.data; messagesList.innerHTML += "Received:" + message + ""; };

    Закрытие соединений

    Когда вы закончите работу с веб-сокетом, нужно разорвать соединение, используя метод close() .

    После того, как соединение будет разорвано, браузер вызовет событие close . Добавление обработчика события close позволит выполнить любую «уборку», которая потребуется.

    Теперь нам нужно обновить статус соединения при его разрыве. Добавьте следующий код в файл app.js :

    // Показываем сообщение «disconnected», когда соединение разорвано. socket.onclose = function(event) { socketStatus.innerHTML = "Disconnectedfrom WebSocket."; socketStatus.className = "closed"; };

    Чтобы завершить приложение, нужно добавить обработчик события, который будет вызываться при нажатии кнопки «Close Connection». Он должен вызывать метод close() объекта WebSocket.

    // Закрываем соединение при нажатии кнопки «close» closeBtn.onclick = function(e) { e.preventDefault(); // Закрываем веб-сокет. socket.close(); return false; };

    Наше приложение готово!

    Откройте файл index.html в браузере и попробуйте отправить несколько сообщений. Вы увидите, что сервер отправляет сообщения обратно.

    Мониторинг трафика веб-сокета с помощью инструментов для разработчиков в Chrome


    «Инструменты разработчика», доступные в браузере Google Chrome включают в себя средства для мониторинга трафика. Чтобы использовать этот инструмент:

    • Откройте «Инструменты разработчика».
    • Перейдите на вкладку Network.
    • Кликните по записи, соответствующей вашему соединению по веб-сокету.
    • Перейдите на вкладку Frames.

    Эти инструменты предоставляют общую информацию о данных, переданных через соединение.

    WebSocket на сервере

    В этой статье мы сфокусировали внимание на том, как использовать веб-сокеты на стороне клиента. Если вы хотите создать собственный сервер WebSocket, существует множество библиотек, которые могут в этом помочь. Одна из наиболее популярных – socket.io , библиотека Node.JS.

    Другие библиотеки:

    • C++: libwebsockets ;
    • Erlang: Shirasu.ws ;
    • Java: Jetty ;
    • Node.JS: ws ;
    • Ruby: em-websocket ;
    • Python: Tornado , pywebsocket ;
    • PHP: Ratchet , phpws .
    Поддержка браузерами

    Веб-сокеты поддерживаются практически во всех современных браузерах. Единственными исключениями являются Android- браузеры и Opera Mini.

    22.9. Веб-сокеты

    В главе 18 демонстрируется, как клиентские сценарии на языке JavaScript могут взаимодействовать с серверами по сети. Все примеры в этой главе используют протокол HTTP, а это означает, что все они ограничены исходной природой протокола HTTP: этот протокол, не имеющий информации о состоянии, состоит из запросов клиента и ответов сервера. Протокол HTTP фактически является узкоспециализированным сетевым протоколом. Более универсальные сетевые взаимодействия через Интернет (или через локальные сети) часто реализуются с использованием долгоживущих соединений и обеспечивают двунаправленный обмен сообщениями через TCP-сокеты. Довольно небезопасно предоставлять клиентскому сценарию на языке JavaScript доступ к низкоуровневым ТСР-сокетам, однако спецификация «WebSocket АРІ» определяет безопасную альтернативу: она позволяет клиентским сценариям создавать двунаправленные соединения с серверами, поддерживающими протокол веб-сокетов. Это существенно упрощает решение некоторых сетевых задач.

    Прикладной интерфейс веб-сокетов удивительно прост в использовании. Сначала необходимо создать сокет с помощью конструктора WebSocket():
    var socket = new WebSocket("ws://ws.example.com:1234/resource");

    Протокол веб-сокетов

    Чтобы использовать веб-сокеты в сценариях на языке JavaScript, достаточно будет освоить клиентский прикладной интерфейс веб-сокетов, описываемый здесь. Не существует эквивалентного серверного прикладного интерфейса для создания серверов с поддержкой веб-сокетов; в этом разделе будет представлен простой пример сервера, основанного на использовании интерпретатора Node (раздел 12.2) и сторонней серверной библиотеки поддержки веб-сокетов. Клиент и сервер взаимодействуют через долгоживущие TCP-сокеты, следуя правилам, определяемым протоколом веб-соке-тов. Мы не будем рассматривать здесь особенности протокола, но следует отметить, что протокол веб-сокетов спроектирован очень аккуратно, благодаря чему веб-серверы могут легко обрабатывать HTTP-соединения и соединения на основе веб-сокетов через один и тот же порт.

    Веб-сокеты получили широкую поддержку среди производителей броузеров. В ранней, предварительной версии протокола веб-сокетов была обнаружена серьезная брешь в системе безопасности, поэтому на момент написания этих строк в некоторых броузерах поддержка веб-сокетов была отключена, - до стандартизации безопасной версии протокола. В Firefox 4, например, может потребоваться явно включить поддержку веб-сокетов, открыв страницу about:config и установив переменную «network.websocket. override-security-block» в значение true.

    *********************************************

    Аргументом конструктора WebSocket() является URL-адрес, в котором используется протокол ws:// (или wss:// - в случае с безопасными соединениями, по аналогии с https://). URL-адрес определяет имя хоста, к которому выполняется подключение, и может также определять порт (по умолчанию веб-сокеты используют тот же порт, что и протоколы HTTP и HTTPS) и путь или ресурс.

    После создания сокета в нем обычно регистрируются обработчики событий:

    socket.onopen = function(e) { /* Соединение установлено. */ };
    socket.onclose = function(e) { /* Соединение закрыто. */ };
    socket.onerror = function(e) { /* Что-то пошло не так! */ };
    socket.onmessage = function(e) {
    var message = e.data; /* Сервер послал сообщение. */
    };

    Чтобы отправить данные серверу через сокет, следует вызвать метод send() сокета:

    socket.send("Привет, сервер!");

    Текущая версия прикладного интерфейса веб-сокетов поддерживает только текстовые сообщения и отправляет их в виде строк в кодировке UTF-8. Однако текущая версия спецификации протокола веб-сокетов включает поддержку двоичных сообщений, и будущие версии прикладного интерфейса, возможно, будут обеспечивать обмен двоичными данными с сервером.

    По окончании взаимодействия с сервером сценарий может закрыть веб-сокет вызовом его метода close() .

    Веб-сокеты являются двунаправленными, и единственное соединение, установленное через веб-сокет, может использоваться клиентом и сервером для передачи сообщений друг другу в любой момент времени. Это взаимодействие не обязательно должно иметь форму запросов и ответов. Каждая служба, основанная на веб-сокетах, будет определять собственный «подпротокол» передачи данных между клиентом и сервером. С течением времени эти «подпротоколы» могут развиться, и вам может потребоваться реализовать клиенты и серверы, поддерживающие несколько версий подпротокола. К счастью, протокол веб-сокетов включает механизм, дающий возможность договориться о выборе подпротокола, который поддерживается и клиентом, и сервером. Конструктору WebSocket() можно передать массив строк. Сервер получит его в виде списка подпротоколов, поддерживаемых клиентом. Сервер выберет подпротокол, поддерживаемый им, и отправит его обратно клиенту. После установления соединения клиент сможет определить, какой подпротокол можно использовать, проверив свойство protocol объекта WebSocket .

    В разделе 18.3 описывается прикладной интерфейс объекта EventSource и демонстрируется его применение на примере реализации клиента и сервера чата. Вебсокеты еще больше упрощают реализацию подобных приложений. В примере 22.16 демонстрируется очень простой клиент чата: он напоминает пример 18.15, но использует веб-сокеты для двунаправленного обмена сообщениями вместо объекта EventSource для приема сообщений и XMLHttpRequest - для отправки.

    Пример 22.16. Клиент чата на основе веб-сокетов


    window.onload = function() {
    // Позаботиться о некоторых деталях пользовательского интерфейса
    var nick = prompt("Введите свой псевдоним"); // Получить псевдоним
    var input = document.getElementById("input"); // Отыскать поле ввода
    input.focus(); // Установить фокус ввода
    // Открыть веб-сокет для отправки и приема сообщений в чате.
    // Предполагается, что HTTP-сервер, откуда загружается сценарий, также
    // поддерживает веб-сокеты, и для связи с ним используется то же имя хоста
    // и номер порта, но вместо протокола http:// используется протокол ws://
    var socket = new WebSocket("ws://" + location.host + "/");
    // Так через веб-сокет принимаются сообщения с сервера
    socket.onmessage = function(event) { // Вызывается при получении сообщения
    var msg = event.data; // Получить текст из объекта события
    var node = document.createTextNode(msg); // Создать текстовый узел
    var div = document.createElement("div"); // Создать элемент
    div.appendChild(node); // Добавить текстовый узел
    document.body.insertBefore(div, input); // и вставить div перед полем ввода
    input.scrollIntoView(); // Гарантировать видимость элемента input
    }
    // Так через веб-сокет отправляются сообщения на сервер
    input.onchange = function() { // Когда пользователь нажмет клавишу Enter
    var msg = nick + ": " + input.value; // Имя пользователя и текст
    socket.send(msg); // Отправить через сокет
    input.value = ""; // Подготовиться к вводу следующего сообщения
    }
    };