Веб-приложения реального времени приобрели популярность в последние годы. Эти программы обеспечивают поток данных в режиме реального времени без необходимости многократно обновлять веб-страницы, обеспечивая бесперебойную связь между клиентами и серверами. Благодаря своей масштабируемости, скорости и удобству для пользователя Node.js и связанные с ним технологии, такие как Express и WebSockets, являются предпочтительными вариантами для разработки приложений реального времени.
Что такое веб-сокеты?
WebSockets — это протокол двусторонней связи между клиентом и сервером, позволяющий отправлять и получать данные в режиме реального времени. WebSockets преодолевают ограничения традиционной связи HTTP, которая требует установления нового соединения для каждого запроса. WebSockets позволяют установить постоянное соединение, которое позволяет доставлять и получать данные в любое время без необходимости инициировать новое соединение.
Предпосылки
Прежде чем мы начнем, убедитесь, что у вас установлено следующее:
- Node.js
- нпм
- Выражать
- Сокет.IO
Настройка проекта
Сначала создайте новый каталог для вашего проекта и инициализируйте его с помощью npm:
mkdir real-time-chat cd real-time-chat npm init
Установите необходимые пакеты:
npm install express socket.io --save
Создайте новый файл с именем server.js
и добавьте следующий код:
const express = require('express'); const app = express(); const server = require('http').Server(app); const io = require('socket.io')(server); app.use(express.static(__dirname + '/public')); app.get('/', (req, res) => { res.sendFile(__dirname + '/public/index.html'); }); io.on('connection', (socket) => { console.log('a user connected'); socket.on('disconnect', () => { console.log('user disconnected'); }); socket.on('chat message', (msg) => { console.log('message: ' + msg); io.emit('chat message', msg); }); }); server.listen(3000, () => { console.log('listening on *:3000'); });
Мы импортируем нужный пакет в этот код, настраиваем приложение Express и создаем новый сервер с помощью модуля http
. Мы также настроили сервер Socket.IO, который позволяет нам общаться с нашими клиентами в режиме реального времени.
Статические файлы поставляются из указанного каталога с помощью функции app.use()
. Этот экземпляр обслуживает файлы из каталога public
.
Метод app.get()
устанавливает маршрут к домашней странице, которая обеспечивает доступ к файлу index.html
общедоступного каталога.
Прослушиватель соединения устанавливается методом io.on()
, который следит за клиентскими подключениями.
Когда клиент отключается, выдается событие под названием "отключение", и процедура socket.on()
отслеживает его. Мы записываем заметку в консоль всякий раз, когда клиент отключается.
Событие 'сообщение в чате', которое запускается всякий раз, когда клиент отправляет сообщение, также отслеживается методом socket.on()
.
Когда сообщение получено. , мы посылаем его всем клиентам с помощью io.emit()
и записываем в консоль.
Наконец, мы запускаем сервер и открываем порт 3000 для прослушивания.
Создание внешнего интерфейса
Создайте новый каталог с именем public
и добавьте в него новый файл с именем index.html
. В этот файл следует добавить приведенный ниже код:
<!DOCTYPE html> <html> <head> <title>Real-Time Chat Application</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="chat-container"> <header> <h1>Real-Time Chat Application</h1> </header> <main class="chat-window"> <ul class="message-list"></ul> <form id="message-form"> <input type="text" name="message" placeholder="Type your message here"> <button>Send</button> </form> </main> </div> <script src="/socket.io/socket.io.js"></script> <script src="script.js"></script> </body> </html>
В этом HTML-файле мы создаем структуру интерфейса чата. У нас есть заголовок, отображающий название приложения, «основной» элемент с окном чата и формой отправки сообщения, а также тег скрипта, который загружает клиентскую библиотеку socket.io и наш клиентский файл JavaScript.
Создание формы для отправки сообщений требует использования тега <form>
.
Мы прикрепим к нему прослушиватель при отправке формы, поскольку он имеет атрибут id
со значением 'message-form'.
Атрибут placeholder
в теге <input>
формы с названием "сообщение" предлагает пользователю "ввести свое сообщение здесь" в качестве подсказки.
Кроме того, имеется тег "Отправить" с пометкой<button>
, по которому пользователь может щелкнуть, чтобы отправить форма.
В теге<script>
мы создадим новый экземпляр клиента socket.io и прикрепим прослушиватели событий для отправки формы и получения сообщений чата. Давайте добавим файл script.js
и добавим следующий код:
const socket = io(); // Handle form submission const form = document.getElementById('message-form'); form.addEventListener('submit', e => { e.preventDefault(); const messageInput = form.elements.message; const message = messageInput.value.trim(); if (message) { socket.emit('chat message', message); messageInput.value = ''; } }); // Handle incoming chat messages const messageList = document.querySelector('.message-list'); socket.on('chat message', message => { const li = document.createElement('li'); li.textContent = message; messageList.appendChild(li); });
В этом коде JavaScript на стороне клиента мы сначала создаем новый экземпляр клиента socket.io, используя io()
. Затем мы подключаем прослушиватель событий для отправки формы, используя addEventListener()
. Внутри прослушивателя событий мы предотвращаем поведение отправки формы по умолчанию, используя e.preventDefault()
, получаем ввод сообщения, используя form.elements.message
, и отправляем событие chat message
с сообщением на сервер, используя socket.emit()
. Мы также очищаем входное значение сообщения, используя messageInput.value = " "
.
Мы также подключаем прослушиватель событий для получения сообщений чата с помощью socket.on()
. Внутри прослушивателя событий мы создаем новый элемент списка, используя document.createElement()
, и добавляем полученное сообщение как текстовое содержимое, используя li.textContent
. Затем мы добавляем элемент списка в список сообщений, используя messageList.appendChild(li)
.
Заключение
С помощью этого кода у нас есть функциональное приложение для чата в реальном времени, которое позволяет пользователям отправлять и получать сообщения в режиме реального времени. Мы можем запустить сервер, используя узел index.js
, и перейти к http://localhost:3000
в веб-браузере, чтобы протестировать его.
Поздравляем с созданием вашего первого приложения реального времени с помощью Node.js, Express и WebSockets! Для начала ознакомьтесь с моей предыдущей статьей https://medium.com/@blissfelix18/integrating-node-js-and-express-js-with-socket-io-1a4871347c4
Ищете внештатного технического писателя? Не смотрите дальше! Если вам понравилась эта статья, не забудьте похлопать в ладоши и оставить комментарий ниже. Давайте свяжемся и поработаем вместе над вашим следующим проектом. Если вы заинтересованы в сотрудничестве со мной, не стесняйтесь обращаться по электронной почте [email protected].
Первоначально опубликовано на https://dev.to 17 февраля 2023 г.