Створення панелі моніторингу в реальному часі за допомогою NestJS і WebSocket.

У сьогоднішньому швидко змінюваному світі реальні додатки в реальному часі стали стандартом для надання миттєвої інформації користувачам. Від сповіщень до живих потоків, користувачі очікують миттєвих оновлень. Одним із найефективніших способів реалізувати комунікацію в реальному часі у веб-додатках є використання WebSocket. У цій статті ми розглянемо, як створити панель моніторингу в реальному часі за допомогою NestJS, сучасного фреймворку для Node.js, і WebSocket.

Чому NestJS і WebSocket?

NestJS — потужний фреймворк для створення серверних додатків. Він побудований на TypeScript і використовує модульну архітектуру, надану Angular, що робить його ідеальним для створення масштабованих і підтримуваних серверних додатків. WebSocket, у свою чергу, забезпечує двосторонні канали зв'язку через одне TCP-з'єднання, що дозволяє серверам і клієнтам незалежно та миттєво обмінюватися повідомленнями.

Поєднуючи архітектурну силу NestJS з можливостями реального часу WebSocket, ми можемо створювати ефективні та надійні панелі моніторингу в реальному часі.

Початок роботи

Спочатку переконайтеся, що у вас встановлені Node.js і npm. Почнемо з налаштування нового проекту NestJS.

npm i -g @nestjs/cli  
nest new real-time-dashboard

Перейдіть до вашої директорії проекту:

cd real-time-dashboard

Налаштування WebSocket з NestJS

NestJS має вбудований пакет для обробки WebSocket-комунікацій під назвою @nestjs/websockets, який надає базові можливості для роботи з WebSocket з коробки.

Встановлення пакету WebSocket

Хоча цей пакет вже включений за замовчуванням у NestJS, переконайтеся, що він встановлений:

npm install @nestjs/websockets @nestjs/platform-socket.io

Створення WebSocket шлюзу

Шлюз WebSocket у NestJS — це клас, який обробляє WebSocket-комунікації, подібно до контролера в REST API.

Створимо шлюз WebSocket для нашої панелі моніторингу в реальному часі:

import { SubscribeMessage, WebSocketGateway, WebSocketServer, OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect } from '@nestjs/websockets';  
import { Server, Socket } from 'socket.io';  

@WebSocketGateway()  
export class DashboardGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {  
 @WebSocketServer() server: Server;  

 afterInit(server: Server) {  
 console.log('WebSocket server initialized');  
 }  

 handleConnection(client: Socket, ...args: any[]) {  
 console.log(`Client connected: ${client.id}`);  
 }  

 handleDisconnect(client: Socket) {  
 console.log(`Client disconnected: ${client.id}`);  
 }  

 @SubscribeMessage('sendMessage')  
 handleMessage(client: Socket, payload: string): void {  
 console.log(`Message received: ${payload}`);  
 this.server.emit('receiveMessage', payload);  
 }  
}

Реєстрація шлюзу

Тепер потрібно зареєструвати наш шлюз у модулі. Для цього скористаємося системою впровадження залежностей NestJS.

import { Module } from '@nestjs/common';  
import { DashboardGateway } from './dashboard.gateway';  

@Module({  
 providers: [DashboardGateway],  
})  
export class DashboardModule {}

Нарешті, імпортуємо цей модуль до основного модуля додатка (app.module.ts).

import { Module } from '@nestjs/common';  
import { DashboardModule } from './dashboard/dashboard.module';  

@Module({  
 imports: [DashboardModule],  
})  
export class AppModule {}

Інтеграція з фронтендом

Щоб протестувати наш WebSocket сервер, корисно мати простий клієнт для фронтенду.
Ми використовуватимемо звичайний HTML та JavaScript з клієнтом Socket.IO.

Створіть файл index.html:

Real-Time Dashboard
Send    
       ```  

## Запуск додатка

Щоб запустити додаток, переконайтеся, що ваш додаток NestJS працює. Потім відкрийте `index.html` у браузері. Ви можете запустити сервер NestJS за допомогою команди:

npm run start
```

Відкрийте index.html у браузері та спробуйте відправляти повідомлення. Ви повинні побачити, як повідомлення з'являються в списку динамічно.

Висновок

У цій статті ми продемонстрували, як створити панель моніторингу в реальному часі за допомогою NestJS і WebSocket. Ми налаштували базовий WebSocket сервер за допомогою фреймворку NestJS і інтегрували його з простим фронтендом для візуалізації повідомлень в реальному часі. Це потужне поєднання можна розширити для підтримки більш складних функцій у реальному часі, таких як живі сповіщення, потокова передача даних та колаборативні додатки. NestJS і WebSocket забезпечують ідеальну платформу для створення сучасних, чуйних і динамічних панелей моніторингу. Успішного кодування!

Перекладено з: Building a Real-Time Dashboard with NestJS and WebSockets