Веб-приложения реального времени приобрели популярность в последние годы. Эти программы обеспечивают поток данных в режиме реального времени без необходимости многократно обновлять веб-страницы, обеспечивая бесперебойную связь между клиентами и серверами. Благодаря своей масштабируемости, скорости и удобству для пользователя 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 г.