В сегодняшнюю цифровую эпоху пользователи жаждут взаимодействия в Интернете в режиме реального времени, от живого чата до функций совместной работы и интерактивных обновлений. Чтобы удовлетворить эти требования, разработчики полагаются на WebSockets — мощный протокол связи, обеспечивающий беспрепятственную двустороннюю связь между клиентами и серверами. В этом подробном руководстве, предназначенном для начинающих пользователей NestJS, мы отправимся в увлекательное путешествие в мир приложений реального времени с помощью WebSockets в NestJS. Мы изучим основные концепции, преимущества и практическую реализацию функций реального времени, сохраняя при этом беззаботность и веселье.
Понимание веб-сокетов
WebSockets меняют правила игры для современных веб-приложений. В отличие от традиционных HTTP-запросов, которые следуют схеме «запрос-ответ», WebSockets поддерживает постоянное соединение между клиентом и сервером. Это означает, что данные можно отправлять и получать в режиме реального времени без необходимости постоянного повторного установления соединений. Двунаправленный характер WebSockets позволяет и серверу, и клиенту инициировать связь, обеспечивая обновления в реальном времени и мгновенные ответы.
Преимущества использования веб-сокетов
- Обновления в режиме реального времени. Веб-сокеты обеспечивают мгновенное обновление данных, предоставляя пользователям удобный и интерактивный интерфейс без ручного обновления страниц.
- Уменьшенная задержка. Благодаря WebSockets сообщения доставляются мгновенно, что сводит к минимуму задержку между отправкой и получением данных.
- Масштабируемость. В отличие от традиционных методов опроса, которые создают нагрузку на ресурсы сервера, 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 .