Web сокеты. WebSockets — полноценный асинхронный веб. Проблема: время реакции при обмене данными между сервером и клиентом

Веб-сокеты (WebSockets), возможно, самое интересное нововведение в веб-техноло­гиях со времен появления "Aсинxpoннoгo JavaScript и XML"(AJAX). Они стали популярными с выходом HTML5 и поддерживаются множеством веб-фреймворков.

Однако потребовалось немало времени для создания стабильной и совместимой спе­цификации веб-сокетов.

Модель протокола передачи гипертекста (НТТР) была спроектирована задол­го до того, как стал популярен Интернет, она основывается на простых специфи­кации и дизайне. В традиционной модели НТТР клиент открывает соединение с сервером прикладной части, отправляет HTTP-запрос типа GET, POST, PUT или DELETE, а HTTP-сервер возвращает соответствующий ответ.

Традиционная модель НТТР была обременительной практически для любого приложения, выходящего за пределы простой модели данных "получить и отправить контент ". Представьте себе клиент приложения для интерактивной переписки, в ко­тором участники могут отправлять сообщения в любом порядке и сотни участников могут общаться одновременно.

Для подобных целей стандартный подход "запрос-ответ " налагает слишком сильные ограничения. Первыми попытками обойти эти ограничения стали AJAX и Comet. Оба были основаны на так называемых длинных опросах: открытии НТТР-соединения и поддержании его в активном состоянии (сохранении соединения открытым) посредством незавершения отправки ответа.

С помощью веб-сокетов клиент может создать "сырой " сокет для сервера и осу­ществлять полнодуплексную связь. Поддержка веб-сокетов была введена в JSR-356 .

Пакет javax.websocket и его серверный подпакет содержат все относящиеся к веб­ сокетам классы, интерфейсы и аннотации.

Чтобы реализовать веб-сокеты на платформе Java ЕЕ, вам необходимо создать класс конечной точки с методами жизненного цикла веб-сокета, как показано ниже:

// Пример конечной точки package com.devchronicles.websockets; public class HelloEndpoint extends Endpoint { @Override public void onOpen(final Session session, EndpointConfig config) { session.addMessageHandler(new MessageHandler.Whole() { @Override public void onMessage(String msg) { try { session.getBasicRemote().sendText("Hello " + msg); } catch (IOException e) { } } }); } }

// Пример конечной точки public class HelloEndpoint extends Endpoint { @Override public void onOpen (final Session session , EndpointConfig config ) { session . addMessageHandler (new MessageHandler . Whole () { @Override public void onMessage (String msg ) { try { } catch (IOException e ) { } } ) ;

Класс Endpoint предоставляет три метода жизненного цикла: onOpen , onClose и onError . Расширяющий его класс должен реализовать как минимум метод onOpen .

Вы можете развернуть конечную точку двумя способами: с помощью конфигу­рации или программными средствами.

Чтобы выполнить развертывание кода ваше при­ложение должно вызвать следующее:

ServerEndpointConfig.Builder.create(HelloEndpoint.class, "/hello").build();

ServerEndpointConfig . Builder . create (HelloEndpoint . class , "/hello" ) . build () ;

Развернутый веб-сокет доступен на ws://://hello . Од­нако лучше использовать конфигурацию с помощью аннотации. При этом та же конечная точка становится кодом который приводится ниже:

// Пример конечной точки с аннотациями package com.devchronicles.websockets; @ServerEndpoint("/hello") public class HelloEndpoint { @OnMessage public void onMessage(Session session, String msg) { try { session.getBasicRemote().sendText("Hello " + msg); } catch (IOException e) { } } }

// Пример конечной точки с аннотациями package com . devchronicles . websockets ; @ServerEndpoint ("/hello" ) public class HelloEndpoint { @OnMessage public void onMessage (Session session , String msg ) { try { session . getBasicRemote () . sendText ("Hello " + msg ) ; } catch (IOException e ) { }

Такой подход позволяет вам использовать аннотации, придерживаясь подхода простых Jаvа-объектов в старом стиле (POJO ), поскольку вы не расширяете базо­вый класс. У аннотированной конечной точки те же методы жизненного цикла, что и в первом примере кода, но она вводит дополнительный метод жизненного цикла onMessage .

Вместо реализации OnOpen и добавления обработчика onMessage в основанном на аннотациях подходе достаточно реализовать аннотированный метод жизненного цикла onMessage . Вы можете аннотировать с помощью @ОnМеssаgе несколько методов, чтобы получать различные типы данных, такие как String или ByteBuffer для дво­ичных данных.

Реализация веб-сокета со стороны клиента зависит от используемого веб-фрейм­ворка. Как бы то ни было, в следующем фрагменте показана простая версия на языке JavaScript :

var webSocket = new WebSocket("ws://127.0.0.1:8080/websockets/hello"); webSocket.send("world");

У меня есть приложение 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 (с которым соединяется мост) находится на той же машине, что и серверное приложение.

В статье рассказывается, как использовать веб-сокеты для создания веб-приложений. Но перед тем как погрузиться в изучение протокола и 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 = ""; // Подготовиться к вводу следующего сообщения
}
};