Веб-приложения меняются и развиваются, что отличает потребности пользователей от того, когда был создан первый протокол сетевого подключения. Следовательно, протокол HTTP развивался годами, но еще не достиг уровня реального времени, такого как TCP- соединение между двумя компьютерами.
Эти ограничения, а не вредят разработчикам и пользователям, стали источником мотивации и креативности, создавая решения, которые позволяют нам не только эмулировать систему передачи в реальном времени, но и то, что мы можем делать это через HTTP. почти родной путь.
WebSocket
Именно здесь возникает Websocket, относительно новый протокол, который поддерживается только большинством современных браузеров, который позволяет нам лишить HTTP всех его ограничений и, таким образом, иметь возможность эффективно обмениваться данными через заголовки GET .
Websocket все еще находится в периоде активного созревания, поэтому вполне возможно, что мы не найдем его в новых решениях, к счастью, в Node.js у нас уже есть некоторые инструменты, которые позволяют нам обрабатывать их, не полагаясь на свою изобретательность при создании инструментов более низкого уровня.
требования
Это продвинутый учебник, поэтому сначала нам потребуется функциональная установка Node.js в нашей системе, мы можем взглянуть на этот учебник, прежде чем углубляться в него, кроме того, нам понадобятся разрешения администратора для установки библиотек. Мы собираемся использовать. Мы должны быть знакомы с такими понятиями JavaScript, как обратный вызов и анонимные функции. Наконец, у нас должен быть текстовый редактор, такой как Sublime Text, который позволяет нам писать разные коды, которые есть в примерах.
Создать веб-сокет
Чтобы начать создавать приложение, которое позволяет нам использовать Websockets, мы должны сначала создать небольшую структуру, это очень просто, но необходимо, эта структура будет состоять из:
1 - папка, в которой мы будем хранить файлы нашего проекта.
2 - файл с именем server.js, этот файл, как указывает его имя, будет сервером, через который мы будем устанавливать соединение в режиме реального времени с помощью веб-сокетов .
3 - файл под названием client.html, этот файл будет интерфейсом для связи с нашим сервером через браузер, он необходим для того, чтобы мы могли отправлять и получать соответствующую информацию.
Поскольку у нас есть определенная структура, теперь мы можем начать бросать несколько строк кода, для этого мы должны начать с установки внешней библиотеки ws в нашей среде, поскольку именно это позволит нам использовать рассматриваемый протокол. Чтобы установить эту библиотеку, нам просто нужно открыть консоль Node.js, мы находимся в папке, где будут находиться наши файлы, и помещаем следующую команду:
НПМ установить WSПри его выполнении мы можем увидеть следующий результат в нашей командной консоли:
После того, как мы установили библиотеку, мы можем продолжить нашу работу, теперь в нашем файле server.js мы должны написать следующий код, сначала давайте посмотрим, что это такое, затем мы объясним это:
var WSServer = require ('ws'). Сервер, wss = новый WSServer ({port: 8085}); wss.on ('connection', function (socket) {socket.on ('message', function (msg) {console.log ('Received:', msg, '\ n', 'From IP:', socket .upgradeReq.connection.remoteAddress); if (msg === 'Hello') {socket.send ('If it работает!');}}); socket.on ('close', функция (code, desc) {console .log ('Disconnected:' + code + '-' + desc);});}); Первое, что мы делаем, это требуем, чтобы библиотека ws, которую мы только что установили, сразу же в той же инструкции вызывает ваш сервер класса, затем мы создаем экземпляр, с помощью которого мы собираемся создать сервер, работающий на порте 8085, этот порт может быть любым что у нас есть доступ, в этом случае используется 8085, чтобы не было конфликта с другими службами, которые в настоящее время находятся в этой среде тестирования. Поскольку мы определили наш экземпляр, мы теперь применим метод. on () для события соединения, затем в обратном вызове того же объекта мы передаем объект с именем socket, с этим мы получим сообщения клиента и написали подпрограмму, которая, если мы получим слово «Hello», сервер вернет сообщение где мы также будем печатать что-то в командной консоли. Наконец, если мы закроем соединение, у нас будет только одно сообщение в консоли.
Как только у нас будет наш сервер, пришло время построить наш клиент, для этого в файле client.html мы определим структуру, в которую мы будем помещать HTML-теги и JavaScript, который будет работать как ссылка на наш сервер. Давайте посмотрим, как выглядит наш файл:
Клиент Websockets ОтправитьЧасть HTML довольно проста: у нас есть ввод текста и кнопка отправки, а также div, называемый output, который будет получать информацию с сервера, чтобы показать ее пользователю. Интересная вещь появляется на этикетке где первое, что мы делаем, это создаем объект типа WebSocket, и мы указываем путь, по которому вы должны его найти, в нашем случае это localhost: 8085, и поэтому мы можем видеть, что то, что мы сделали на сервере, уже имеет смысл. Затем мы связываем наши отправляющие элементы, текст и выходные данные с переменными, которые мы можем использовать.(function () {var ws = new WebSocket ("ws: // localhost: 8085"), output = document.getElementById ('output'), send = document.getElementById ('send'); функция logStr (eventStr, msg ) {return '
'+ eventStr +': '+ msg +'
«; } send.addEventListener ('click', function () {var msg = document.getElementById ('msg'). value; ws.send (msg); output.innerHTML + = logStr ('Sent', msg);}) ; ws.onmessage = function (e) {exit.innerHTML + = logStr ('Received', e.data); }; ws.onclose = function (e) {exit.innerHTML + = logStr ('Disconnected', e.code + '-' + e.type); }; ws.onerror = function (e) {exit.innerHTML + = logStr ('Error', e.data); }; } ());
Затем мы определяем каждый из методов, которые мы можем получить от сервера, поэтому каждый раз, когда мы отправляем что-либо, это записывается в нашем выводе, все благодаря методу send () . Другой метод, который мы используем, - это onmessage (), который активируется, только если наш сервер отвечает, и результат добавляется в наш HTML.
Наконец, мы используем методы onclose () и onerror (), первый дает нам сообщение, когда соединение с Websocket прекращается или закрывается, а второй сообщает нам, если произошла какая-либо ошибка. При этом мы можем только запустить сервер в нашей консоли и запустить наш пример, для этого мы используем следующую команду:
узел server.jsЭто поднимет сервер, но для проверки функциональности нашего кода мы должны выполнить наш файл client.html в нашем предпочтительном браузере, написать что-то в текстовом поле и нажать кнопку отправки, это создаст связь с веб-сокетом, и мы увидим ответ консоли: $config[ads_text5] not found
На рисунке мы можем видеть, как командная консоль печатает полученное сообщение, даже записывает IP-адрес, с которого она получает данные, это было то, что мы запрограммировали в нашем файле server.js, где мы также указали, что если бы мы получили слово «Hello», мы отправили бы ответное сообщение, которое мы видим в окне браузера на том же изображении. Теперь, если мы обновляем браузер, соединение разорвано, это также регистрируется нашим приложением, давайте посмотрим:
Наконец, если мы закроем соединение в нашей консоли с помощью CTRL + C, чтобы остановить сервер, наш браузер вызовет обработчик ошибок, и там мы увидим новое сообщение: $config[ads_text5] not found
Если мы были наблюдателями, мы, возможно, заметили что-то важное: ни разу, чтобы получить ответы, нам пришлось обновить браузер или сделать запрос Ajax, все было двунаправлено напрямую с WebSockets, это то, что называется в реальном времени.
Другие решения
То, что мы показали, является одной из самых элементарных и ручных форм, которые существуют, однако нам нужно знать, каков рабочий процесс, но реальную функциональность и готовность к производственным средам мы достигаем с помощью библиотеки socket.io, это делает Так же, как мы это делали в учебном пособии, но в гораздо более компактном и менее подверженном ошибкам разработчику, что позволяет нам сосредоточиться только на логике приложения, а не на технической его части.
Чтобы установить socket.io, нам просто нужно выполнить npm install socket.io, и вместе с ним из репозитория мы загрузим последнюю стабильную версию библиотеки, которая позволит нам начать нашу разработку.
На этом мы завершили это руководство, с помощью которого мы сделали важный шаг в Node.js, чтобы узнать, как использовать Websockets, эта технология становится все более важной, поскольку она помогает нам создавать приложения, о которых никогда не думали в Интернете., Также важно, чтобы мы документировали себя о протоколе, поскольку это способ понять потенциал того, чего мы можем достичь, просто разрабатывая приложения.
СТАТЬИ