CC BY
20
Журавлев Н.Е. студент магистратуры факультет «Информационные системы и технологии» научный руководитель: Тимошина Н. В.
доцент
кафедры информатики и информационных технологий
КГУ им. К.Э. Циолковского Россия, г. Калуга
ВЗАИМОДЕЙСТВИЕ WEB-СЕРВЕРА И WEB-ПРИЛОЖЕНИЕ через
WEB-SOCKET
Аннотация: В статье рассматривается связь web-сервера на языке JavaScript и web-приложения на языке JavaScript через web-sockets. Приводятся особенности протокола HTTP, акцент сделан на рассмотрение его для веб-приложений в режиме реального времени. Приведены примеры создания связи web-сервера и web-приложения с помощью web-socket.
Ключевые слова: web-сервер, JavaScript, web-приложение, протокол передачи данных, web-socket.
Zhuravlev N. E. master's degree student 2nd year, faculty «Information systems and technologies»
scientific director: Timoshina N. V.
associate professor of computer science and information technology
KSU them. K. E. Tsiolkovsky Russia, Kaluga
INTERACTION BETWEEN A WEB SERVER AND A WEB APPLICATION VIA A WEB SOCKET
Annotation: The article deals with the connection of a web server in JavaScript and a web application in JavaScript via web-sockets. The features of the HTTP Protocol are given, the emphasis is placed on considering IT for web applications in real time. Examples of creating a connection between a web server and a web application using a web socket are given.
Key words: web server, JavaScript, web application, data transfer Protocol, web-socket.
Переход к интернету для всех нас теперь является естественным жестом. Мы открываем браузер, направляем его на интересующий нас контент, и через несколько секунд на экране появляется то, что мы хотели! Если мы считаем себя простыми конечными пользователями, все кажется простым и непосредственным, но давайте проанализируем, что происходит,
УДК 004.75
2 курс,
когда через наш браузер отправляет запрос на сайт. Прежде всего, мы должны спросить себя: кто отвечает на наш запрос? Ответ - веб-сервер.
Web-сервер - это, по сути, программа, которая ожидает запросы, размещая, так сказать, «прослушивание» определенных портов и предоставляя клиенту адекватный ответ, в зависимости от параметров запроса.
Или web-сервер - это программное приложение, которое работает на физическом сервере, который прослушивает выделенные порты, для связи с клиентами, которым требуется его содержимое и его службы.
Веб-сервер должен иметь возможность общаться с широким кругом клиентов (ПК, смартфон, Smart TV, планшет и т. Д.) И для этого он должен использовать протоколы, признанные всеми. Основным для просмотра вебстраниц является HTTP (Hyper Text Transfer Protocol).
Каждый раз, когда мы пишем интернет-адрес, наш браузер преобразует его в запрос http и доставляет его на указанный сервер. Затем он получает ответ http и файл HTML, который переводится (называется рендерингом) в виде текста и изображений, чтобы показать его нам на экране.
Опрошенные web-страницы могут быть как статическими, так и динамическими.
Статические страницы пишутся только с помощью HTML-кода, и в них уже содержатся все данные, которые затем будут показаны конечному пользователю.
Динамические страницы, с другой стороны, в дополнение к HTML используют другие языки (JavaScript, ASP и т.д.), Посредством которых определяются инструкции, по которым генерируется содержимое запрашиваемой страницы. В этом случае именно веб-сервер обрабатывает эти инструкции (представленные в форме скрипта), показывая конечному пользователю динамически сгенерированное содержимое с аспектом по умолчанию, установленным программистом. Наличие всей серверной рабочей нагрузки очень удобно для конечного пользователя, которому не нужно устанавливать какое-либо дополнительное программное обеспечение, кроме браузера, и он освобождается от какой-либо обработки с последующей экономией времени и пропускной способности.
Веб-приложение (от английского «веб-приложение) основано на кодах HTML, JavaScript или CSS. Они не нуждаются в установке, так как они загружаются веб-сервером и запускаются в браузере. Вы все еще можете создать ссылку на рабочем столе компьютера или на домашнем экране мобильного устройства, добавив закладку.
Выбор между веб-приложениями очень широк: от небольших инструментов до более популярных программ (таких как службы мгновенных сообщений или пакет Office), графических программ или браузерных игр. Кроме того, многие программы и сервисы предлагаются как в виде веб-приложений, так и в виде нативных приложений.
До версии 1.1 протокола, каждый запрос к серверу включал в себя новое соединение, в то время как с версии 1.1 было улучшено введение постоянных соединений, позволяющих веб-браузеру повторно использовать то же соединение для загрузки изображений, сценариев и т.д.
Кроме того, HTTP был разработан как полудуплекс, что означает, что передача данных разрешена только в одном направлении за один раз. Walkie-Talkie - это пример полудуплексного устройства, в котором одновременно может говорить только один человек. Чтобы преодолеть эти недостатки HTTP, разработчики создали некоторые решения или взломы между этим опросом, длинным опросом (комета) и потоковой передачей.
При опросе клиент выполняет синхронные вызовы для получения информации с сервера. Если на сервере доступна новая информация, он отправит данные в ответе. В противном случае клиенту не будет отправлено никакой информации, и клиент установит новое соединение через определенное время, чтобы перепроверить наличие новых данных. Этот механизм очень неэффективен, но это очень простой способ добиться поведения в реальном времени. Длительный опрос - это еще одно решение, при котором клиент устанавливает соединение с сервером, а сервер сохраняет соединение открытым до тех пор, пока данные не станут доступны или не будет достигнут заранее установленный тайм-аут. Из-за дисбаланса между синхронным HTTP и этими асинхронными приложениями это решение также имеет тенденцию быть сложным, нестандартным и неэффективным.
Концепция WebSocket была введена для удовлетворения этой постоянно растущей потребности в том, чтобы веб-приложения могли выполнять двунаправленную связь стандартным способом. Каждый язык программирования имеет свою реализацию.
Прежде чем увидеть практическое использование WebSockets, полезно сначала понять, что они из себя представляют и как они работают.
WebSockets - это протокол обмена сообщениями, который обеспечивает асинхронную и полнодуплексную связь. WebSockets не являются HTTP-соединениями, даже если они используют HTTP для инициирования соединения.
Полнодуплексная система позволяет осуществлять связь в обоих направлениях одновременно, типичным примером такого типа связи является телефонная связь, когда собеседники могут одновременно разговаривать и прослушиваться. Первоначально WebSockets были предложены как часть спецификации HTML5, которая обещает облегчить разработку и повысить эффективность сети для современных интерактивных веб-приложений, но впоследствии была перемещена в отдельный стандартный документ, чтобы спецификация была сосредоточена только на WebSocket. (RFC 6455 и API-интерфейс WebSocket JavaScript).
Если «время доставки пакета» это сколько пакет шел в реальности, то «пинг» это средняя скорость с которой пакет идет туда-обратно. Другими словами пинг можно считать некоей константой конкретного
идеальным временем доставки. В условиях интернета время доставки пакетов не всегда будет идеальным, т.е. не всегда будет равно половине пинга.
Проблема TCP в том, что когда один из пакетов теряется, пришедшие за ним пакеты оседают в буфере сетевого драйвера и не доступны программе до тех пор, пока потерявшийся пакет не будет доставлен повторно. Это явление называется очередью блокировок. Пакет к вам доставлен, но вам не доступен. Это явление реально, оно существует и является проблемой. В случае передачи данных, актуальность которых теряется за время, меньшее пинга, при потере 1 пакета вы автоматически теряете еще несколько благополучно пришедших пакетов.
Для создания связи необходим web-сервер node JS с установленным модулем Express и web-приложение.
На web-сервер необходимо установить модуль socket.io. Socket.IO позволяет работать в режиме реального времени, двунаправленной и событийной связи. Он работает на любой платформе, браузере или устройстве, в равной степени ориентируясь на надежность и скорость.
На web-приложение необходимо установить модуль socket.io-client. Это модуль является клиентской частью модуля socket.io.[1]
Создадим необходимые для дальнейшей работы константы на web-сервере.
const port = 4001
const app = express()
const server = http.createServer(app)
const io = socketIO(server)
Необходимо начать «слушать» сокеты, для этого открывается следующая функция:
io.on('connection', socket => {
Данный участок кода означает, что если получен пакет с title "message", то мы выведем его в консоль.
socket.on('message', (data) => { console.log(data) }
Мы также можем отдавать пакеты обратно, пример приведен в отрезке ниже, если получим пакет с title "auth".
socket.on('auth', (data) => { io.sockets.emit('auth', {name: 'Nikita', old:
22}) }
Функция io.sockets.emit отдаст пакет с title "auth" и объектом из 2 атрибутов name и old.
Проблема в том, что этот пакет получат все, кто находится на сайте. Для избежание этого, создадим «комнаты» где web-сервер сможет общаться с посетителем web-приложения «тет-а-тет». socketjoin(' название комнаты');
Данная функция будет срабатывать каждый раз, когда посетитель зашел в «комнату».
io.to('some room').emit('some event');
Данная функция будет отправлять сообщение «some event» тем, кто в комнате «some room».
Подведя итог можно сказать, что использование WebSocket нужно тогда, когда нужен по-настоящему низкий уровень задержек, приближающийся, при организации связи между клиентом и сервером, к обмену данными в реальном времени. Также важно помнить про очереди событий. WebSockets более эффективны и производительны, чем другие решения, такие как HTTPRequest. Они требуют меньшей пропускной способности и уменьшают задержку. Упрощение архитектур приложений в режиме реального времени. Для отправки сообщений WebSockets не требуется заголовок, что снижает необходимую пропускную способность.
Использованные источники: 1. Socket.io documentation [Электронный ресурс]: Socket. io. / documentation. URL: https://socket.io/docs/. (Дата обращения: 12.12.2019)
