Phenquestions
Протокол WebSocket обеспечивает двустороннюю связь между клиентом и сервером. Этот процесс аналогичен тому, как совершаются звонки на ваш телефон: сначала вы устанавливаете соединение, а затем вы можете начать общаться друг с другом. Протокол WebSocket используется практически везде - от многопользовательских браузерных игр до приложений чата.
В этой статье показано, как создать протокол WebSocket и использовать его для связи с несколькими пользователями.
Предпосылки
Прежде чем перейти к процессу создания и использования протокола WebSocket, вам сначала нужно установить несколько вещей, которые требуются для этого процесса. Первое, что вам нужно установить, это Node.js, серверная платформа, которая преобразует язык программирования JavaScript в машинный код, позволяющий запускать JavaScript прямо на вашем компьютере. Чтобы установить Node.js, пользователи Windows могут просто перейти на официальный Node.js и нажмите зеленую кнопку LTS в центре экрана.
Для пользователей Linux и macOS щелкните значок Загрузки раздел в подзаголовке веб-сайта.
После открытия Загрузки вы увидите установочные файлы для всех трех основных платформ. Выберите пакет, который поддерживается вашей системой.
Запустите установщик, который поставляется с загруженными файлами, и Node.js будет установлен на ваш компьютер. Чтобы проверить, установлена ли программа, откройте терминал и введите следующую команду:
$ node -v
После установки Node.js, теперь у вас есть доступ к различным модулям JavaScript, которые сделают вашу работу более эффективной в долгосрочной перспективе. Откройте каталог, в котором вы хотите создать архитектуру клиента и сервера, затем откройте терминал внутри этого каталога и выполните следующую команду:
$ npm init -y
Эта команда используется для создания пакета.json, который позволяет настраивать и устанавливать различные узлы.js пакеты. Установите пакет протокола WebSocket, введя в терминале следующую команду:
$ npm установить WS
Создайте три файла с именем индекс.html, клиент.js и сервер.js. Как указано в названиях, эти файлы JavaScript являются клиентской и серверной архитектурой нашего протокола WebSocket. Теперь мы наконец можем приступить к написанию кода наших клиентских и серверных приложений.
Создание сервера WebSocket
Чтобы создать сервер WebSocket, мы начнем с написания кода для сервера. Открой сервер.js файл, который вы создали в текстовом редакторе или IDE в предыдущем разделе, и введите следующие строки внутри файла.
const WebSocket = require ('WS');const ws = новый WebSocket.Сервер (порт: 8080);
приставка.log («Сервер запущен»);
WS.on ('соединение', (wss) =>
приставка.log ("Подключен новый клиент")
wss.send ('Добро пожаловать на сервер!');
wss.on ('сообщение', (сообщение) =>
приставка.log ('Сервер получил: $ сообщение');
wss.send ('Получил ваше сообщение:' + сообщение);
);
);
Теперь мы более подробно объясним, что делает каждая строка.
Код Пояснение
Как упоминалось ранее, в Node доступны некоторые встроенные модули.js, которые значительно облегчают вашу работу. Чтобы импортировать эти модули, мы будем использовать требовать ключевое слово.
const WebSocket = require ('WS');const ws = новый WebSocket.Сервер (порт: 8080);
приставка.log («Сервер запущен»);
Первая строка используется для импорта узла.js модуль WebSocket. Используя этот модуль, в следующей строке мы создаем наш сервер WebSocket, который прослушивает порт 8080. В приставка.бревно() строка просто чтобы сообщить нам, что сервер запущен. Вы увидите, что это появляется внутри вашего терминала, когда вы запустите следующую команду в терминале:
$ node сервер
В следующей строке мы устанавливаем соединение между сервером и клиентом.
WS.on ('соединение', (wss) =>приставка.log ("Подключен новый клиент")
);
После того, как соединение было установлено, wss.Строка send () отправляет сообщение клиенту. В этом случае появляется сообщение «Добро пожаловать на сервер.”
wss.send ('Добро пожаловать на сервер!');Наконец, wss.on ('message') - сервер должен получать сообщение от клиента. Для подтверждения сервер отправляет это сообщение обратно клиенту в последней строке.
wss.on ('сообщение', (сообщение) =>приставка.log ('Сервер получил: $ сообщение');
wss.send ('Получил ваше сообщение:' + сообщение);
);
Создание клиента WebSocket
На стороне клиента нам нужны как индекс.html файл и клиент.js файл. Конечно, вы можете просто добавить контент из клиента.js файл в ваш индекс.html, но я предпочитаю хранить их отдельно. Давайте сначала посмотрим на клиента.js код. Откройте файл и введите в него следующие строки:
const socket = new WebSocket ('ws: // localhost: 8080');разъем.addEventListener ('открыть', () =>
приставка.log ('Подключено к серверу!');
);
разъем.addEventListener ('сообщение', (msg) =>
приставка.log ('Получен клиент: $ msg.данные');
);
const sendMsg = () =>
разъем.send ('Как дела, дружище!');
Код Пояснение
Как с сервером.js, мы создадим новый WebSocket, который прослушивает порт 8080, который можно увидеть в локальный: 8080 раздел кода.
const socket = new WebSocket ('ws: // localhost: 8080');В следующей строке, addEventListener заставляет вашего клиента прислушиваться к любым событиям, которые происходят в данный момент. В этом случае это будет создание и запуск сервера. Как только соединение установлено, клиент выводит сообщение на терминал.
разъем.addEventListener ('открыть', () =>приставка.log ('Подключено к серверу!');
);
Еще раз, клиент слушает любые события, происходящие в данный момент. Когда сервер отправляет сообщение, клиент получает его, а затем отображает сообщение в терминале.
разъем.addEventListener ('сообщение', (msg) =>приставка.log ('Получен клиент: $ msg.данные');
);
Последние несколько строк - это просто функция, в которой клиент отправляет сообщение на сервер. Мы подключим это к кнопке в нашем html файле, чтобы лучше понять, как это работает.
const sendMsg = () =>разъем.send ('Как дела, дружище!');
Подготовка файла HTML
Наконец, откройте индекс.html и добавьте ссылку на своего клиента.js файл внутри него. В моем случае я просто добавлю следующие строки кода:
Как вы можете видеть в строках ниже, src (внутри тега сценария) относится к клиентскому файлу javascript. Функция sendMsg, созданная в клиенте.js файл, также был связан с функцией кнопки onClick.
Собираем все вместе
Теперь вы можете начать тестирование клиентской и серверной архитектуры. Сначала откройте терминал и выполните следующую команду, чтобы запустить сервер:
$ node сервер
После запуска сервера откройте каталог, в котором находится ваш индекс.html присутствует, и дважды щелкните его, чтобы открыть в браузере. В терминале появится следующее сообщение о том, что клиент подключился:
Вы также можете проверить сообщения, отправленные с сервера клиенту, нажав кнопку правой кнопкой мыши, а затем открыв Осмотреть окно. В этом окне щелкните значок Приставка раздел, и вы сможете увидеть сообщения, отправленные с сервера.
После того, как вы нажмете на кнопку, и сервер, и клиент смогут отправлять и получать сообщения друг от друга.
Сервер:
Клиент:
Вуаля, ваше соединение с WebSocket установлено!
Заключение
Протокол WebSocket - отличный способ установить связь между клиентом и сервером. Этот протокол используется в нескольких областях, включая многопользовательские браузерные игры, системы чата различных платформ социальных сетей и даже процессы сотрудничества между кодировщиками.
