Одной из моих мечтаний была возможность создать собственное полнофункциональное приложение для чата. Вдохновленный Facebook, я попытался реализовать свое первое приложение для чата 6 лет назад. В то время меня всегда беспокоил вопрос: «Как мое приложение узнает, что новое сообщение пришло и готово к получению с сервера. Нужно ли моему приложению делать запросы к серверу — несколько раз через короткие промежутки времени? Насколько затратным будет этот процесс, чтобы всегда устанавливать соединение с сервером с помощью рукопожатия». Чтобы решить все эти проблемы, в игру вступает Socket.IO.
Но что такое Socket.IO?
Socket.IO — это библиотека, которая обеспечивает двустороннюю связь между браузером и сервером в режиме реального времени и на основе событий.
Чтобы лучше понять это, это библиотека, которая обеспечивает открытое соединение между клиентом и сервером с использованием WebSockets, и это соединение остается открытым, так что клиент и сервер могут общаться друг с другом без разрыва соединения после каждого запроса (что является затратный процесс, когда нам постоянно нужно, чтобы наше приложение общалось с сервером для небольших запросов).
Что такое WebSocket и как работают сокетные соединения?
WebSocket — это протокол связи — набор правил, регулирующих процесс связи между клиентом и сервером, обеспечивающий полнодуплексный (двусторонний — двунаправленный) канал связи по одному TCP (протокол управления передачей — еще один набор правил, регулирующий процесс того, как два хоста будут взаимодействовать друг с другом) соединение.
Клиент попытается установить соединение WebSocket, если это возможно, и прибегнет к длительному опросу HTTP, если нет. Хотя Socket.IO действительно использует WebSocket в качестве транспорта, когда это возможно, он добавляет дополнительные метаданные к каждому пакету. Вот почему клиент WebSocket не сможет успешно подключиться к серверу Socket.IO, а клиент Socket.IO также не сможет подключиться к обычному серверу WebSocket.
Но как его использовать?
Чтобы использовать библиотеку Socket.IO в своем проекте, вам просто нужно установить ее с помощью npm. Есть две библиотеки Socket.IO, которые необходимо установить как на стороне сервера, так и на стороне клиента.
Настройка сервера
Первое, что вам нужно сделать, это настроить сервер с помощью node.js. Чтобы запустить проект node.js, просто откройте терминал внутри папки проекта и введите команду
Инициализация $ npm
Эта команда настроит проект node.js. Затем, чтобы установить библиотеку socket.io, просто введите команду
$ npm установить socket.io
Эта команда установит библиотеку socket.io в наш проект. Теперь, чтобы настроить наш сервер, нам нужно импортировать его в наш проект. Для этого создайте новый файл server.js и внутри него импортируйте библиотеку, набрав
Здесь мы храним экземпляр socket.io в переменной с именем io, любой обход 3000 мы упоминаем порт, где socket.io не будет работать. Также здесь мы использовали cors для привязки адреса и порта приложения, на котором будет работать интерфейс. Теперь мы вызовем функцию в () в io и привяжем функцию к событию соединения, которое будет запускаться каждый раз, когда клиент устанавливает соединение. с сервером.
эта функция на данный момент будет просто регистрировать идентификатор, который случайным образом назначается каждому клиенту, когда он подключается к нашему серверу. Вот и все, что нам нужно для настройки нашего сервера.
Настройка клиента
Теперь представим, что у вас уже есть базовое приложение Html-CSS. Теперь нам нужно установить socket.io для клиента. Для этого просто введите команду
$ npm install socket. io-клиент
Затем импортируйте его в файл сценария и подключитесь к серверу, используя
Теперь, всякий раз, когда вы пытаетесь запустить свое приложение, вы устанавливаете соединение с сервером, и вам будет присвоен уникальный случайный идентификатор сокета, и вы сможете увидеть журнал в консоли. Теперь, подключившись к серверу с помощью разных вкладок/окон браузера, вы заметите, что каждому из них был назначен уникальный идентификатор сокета, который был распечатан на терминале.
Это все основные настройки, необходимые для использования библиотеки socket.io в проекте.
Как сокет будет испускать/прослушивать события?
Теперь на стороне клиента нам нужно генерировать некоторые события, а затем наш сервер будет прослушивать эти события. всякий раз, когда возникает событие, сервер прослушивает его и выполняет желаемую функцию, а затем возвращает ответ клиенту.
Давайте посмотрим на это на примере. Предположим, кто-то хочет создать чат-приложение, тогда каждый раз, когда пользователь вводит сообщение и нажимает кнопку отправки, сообщение должно быть отправлено этому назначенному пользователю. Чтобы реализовать эту базовую функциональность, мы можем создать событие send-message, и всякий раз, когда это событие произойдет, сервер получит данные сообщения и отправит их нужному пользователю. Во внешнем интерфейсе предположим, что у нас есть кнопка и поле сообщения с идентификаторами.
кнопка — #sendBtn
текстовое поле — #сообщение
текстовая область — #messageDisplay
Приведенный выше код будет генерировать событие send-message и передавать вместе с ним сообщение. Теперь все, что нам нужно сделать, это прослушать это событие на нашем сервере, используя функцию on() на выходе.
Как видно из приведенного выше рисунка, код просто регистрирует сообщение, полученное от клиента. Теперь мы можем отправить сообщение, которое мы получили от клиента, и передать это сообщение обратно всем другим клиентам, кроме того, кто отправил его, отправив новое событие «receive-message».
Это будет транслировать сообщение. Теперь мы будем прослушивать это событие на стороне клиента, используя функцию on().
Таким образом, вы успешно реализовали базовое чат-приложение, которое будет транслировать сообщения, как в чате или группе. Вы можете дополнительно создавать комнаты, используя идентификатор комнаты, и можете создать сеанс между двумя пользователями, предоставив им уникальный идентификатор.
