В сегодняшнюю цифровую эпоху пользователи жаждут взаимодействия в Интернете в режиме реального времени, от живого чата до функций совместной работы и интерактивных обновлений. Чтобы удовлетворить эти требования, разработчики полагаются на WebSockets — мощный протокол связи, обеспечивающий беспрепятственную двустороннюю связь между клиентами и серверами. В этом подробном руководстве, предназначенном для начинающих пользователей NestJS, мы отправимся в увлекательное путешествие в мир приложений реального времени с помощью WebSockets в NestJS. Мы изучим основные концепции, преимущества и практическую реализацию функций реального времени, сохраняя при этом беззаботность и веселье.

Понимание веб-сокетов

WebSockets меняют правила игры для современных веб-приложений. В отличие от традиционных HTTP-запросов, которые следуют схеме «запрос-ответ», WebSockets поддерживает постоянное соединение между клиентом и сервером. Это означает, что данные можно отправлять и получать в режиме реального времени без необходимости постоянного повторного установления соединений. Двунаправленный характер WebSockets позволяет и серверу, и клиенту инициировать связь, обеспечивая обновления в реальном времени и мгновенные ответы.

Преимущества использования веб-сокетов

  1. Обновления в режиме реального времени. Веб-сокеты обеспечивают мгновенное обновление данных, предоставляя пользователям удобный и интерактивный интерфейс без ручного обновления страниц.
  2. Уменьшенная задержка. Благодаря WebSockets сообщения доставляются мгновенно, что сводит к минимуму задержку между отправкой и получением данных.
  3. Масштабируемость. В отличие от традиционных методов опроса, которые создают нагрузку на ресурсы сервера, WebSockets более эффективны, что делает их идеальными для масштабируемых приложений.

Начало работы с NestJS и WebSockets

Прежде чем мы углубимся в реализацию, давайте удостоверимся, что у вас установлены Node.js и NestJS. Если нет, зайдите на официальные сайты и настройте их на своем компьютере.

Начнем с создания нового приложения NestJS:

nest new real-time-app
cd real-time-app

Установка зависимостей

Далее нам нужно установить пакет @nestjs/websockets, который обеспечивает поддержку WebSocket для NestJS:

npm install @nestjs/websockets

Создание шлюза WebSocket

В NestJS управление веб-сокетами осуществляется через шлюзы веб-сокетов. Шлюз WebSocket обрабатывает соединения WebSocket и управляет входящими сообщениями. Давайте создадим наш первый шлюз WebSocket:

nest generate gateway notifications

Эта команда создаст новый шлюз WebSocket с именем notifications.

Пример кода: широковещательная рассылка сообщений в реальном времени

Теперь давайте реализуем забавный, но практичный пример. Предположим, мы создаем приложение для чата в реальном времени, в котором пользователи могут обмениваться сообщениями. Когда пользователь отправляет новое сообщение, мы хотим передать его всем подключенным клиентам. Вот как мы можем добиться этого в нашем файле notifications.gateway.ts:

import { WebSocketGateway, WebSocketServer, SubscribeMessage, MessageBody, ConnectedSocket } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway()
export class NotificationsGateway {

  @WebSocketServer()
  server: Server;

  @SubscribeMessage('newMessage')
   handleMessage(@ConnectedSocket() client: Socket, @MessageBody() message: string): void {
    // Business logic to save the message to the database
    // Broadcasting the new message to all connected clients, excluding the sender
    client.broadcast.emit('newMessage', message);
  
    // Let's add a bit of humor - respond to the sender with an acknowledgement
    client.emit('acknowledgement', 'Your message was received loud and clear!');
  }
}

В приведенном выше коде мы определяем шлюз WebSocket и реализуем метод handleMessage, который будет запускаться всякий раз, когда клиент отправляет сообщение с именем события newMessage. Затем мы транслируем полученное сообщение всем подключенным клиентам, используя client.broadcast.emit(), гарантируя, что отправитель не получит свое собственное сообщение. Кроме того, мы отвечаем отправителю подтверждением, чтобы добавить нотку юмора в наше приложение!

Настройка модуля WebSocket

Чтобы включить WebSockets в вашем приложении NestJS, вам необходимо импортировать и настроить модуль WebSocket в корневом модуле приложения app.module.ts:

import { Module } from '@nestjs/common';
import { NotificationsGateway } from './notifications.gateway';

@Module({
   imports: [],
   controllers: [],
   providers: [NotificationsGateway],
})
export class AppModule {}

Подключение со стороны клиента

Теперь, когда наш сервер WebSocket готов, давайте подключимся к нему со стороны клиента. Для простоты мы будем использовать базовую настройку HTML и JavaScript:

<! - index.html →
<!DOCTYPE html>
<html>
 <head>
  <title>Real-Time Chat</title>
 </head>
 <body>
  <h1>Real-Time Chat</h1>
  <div id="chatBox"></div>
  <input type="text" id="messageInput" placeholder="Type your message">
  <button onclick="sendMessage()">Send</button>
  <script>
   const socket = new WebSocket('ws://localhost:3000');
   const chatBox = document.getElementById('chatBox');
   const messageInput = document.getElementById('messageInput');
   function displayMessage(message) {
   const newMessage = document.createElement('div');
   newMessage.textContent = message;
   chatBox.appendChild(newMessage);
   }
   function sendMessage() {
   const message = messageInput.value;
   socket.send(message);
   displayMessage(`You: ${message}`);
   messageInput.value = '';
   }
   socket.addEventListener('message', (event) => {
   displayMessage(`Friend: ${event.data}`);
   });
   socket.addEventListener('open', () => {
   displayMessage('Connected to the Chat!');
   });
  </script>
 </body>
</html>

Заключение

Поздравляем! Вы открыли возможности общения в реальном времени с помощью WebSockets в NestJS. Вы изучили основы настройки шлюзов WebSocket, широковещательной рассылки сообщений и подключения со стороны клиента. Благодаря этим новообретенным знаниям вы можете реализовать в своих приложениях функции, работающие в режиме реального времени, чтобы ваши пользователи оставались заинтересованными и довольными.

И так, чего же ты ждешь? Идите вперед и создавайте потрясающие приложения реального времени с помощью NestJS и WebSockets. Окунитесь в динамичный мир взаимодействия в реальном времени и раскройте свой творческий потенциал!

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .