Hướng Dẫn Sử Dụng Socket.io Trong NestJS Để Xây Dựng Ứng Dụng Thời Gian Thực

Giới Thiệu Về Socket.io

Trong thời đại công nghệ hiện nay, việc xây dựng các ứng dụng thời gian thực là rất quan trọng. Socket.io là một thư viện JavaScript mạnh mẽ giúp kết nối các bên ở những địa điểm khác nhau, cho phép truyền tải dữ liệu ngay lập tức thông qua một server trung gian. Socket.io có thể được áp dụng trong nhiều lĩnh vực như ứng dụng chat, game online, hoặc dịch vụ đặt bàn trực tuyến.

Socket.io cung cấp khả năng giao tiếp hai chiều giữa trình duyệt web và máy chủ một cách đáng tin cậy và hiệu suất cao, giúp xử lý khối lượng lớn dữ liệu. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng Socket.io trong framework NestJS kết hợp với TypeScript.

Tìm Hiểu Về NestJS

NestJS là một framework mạnh mẽ và linh hoạt trên nền tảng Node.js, được thiết kế để phát triển các ứng dụng phía máy chủ. Với các khái niệm lập trình hướng đối tượng, lập trình hàm, và lập trình phản ứng, NestJS tập trung vào việc giúp các nhà phát triển xây dựng các ứng dụng quy mô lớn một cách dễ dàng và hiệu quả.

Các Thành Phần Chính Trong NestJS:

• Modules: Giúp tổ chức mã nguồn thành các phần nhỏ dễ quản lý.
• Controllers: Xử lý các yêu cầu HTTP và trả về phản hồi cho người dùng.
• Services: Chứa logic nghiệp vụ của ứng dụng và có thể được inject vào controllers.
• Providers: Bao gồm các services, repositories, và helpers khác.

Ưu Điểm Của NestJS:

• Kiến trúc module hóa cho phép quản lý và tái sử dụng dễ dàng.
• Hỗ trợ TypeScript với tính năng tự động hoàn thành và kiểm tra kiểu tĩnh.
• Sử dụng cơ chế Dependency Injection để quản lý phụ thuộc hiệu quả.
• Dễ dàng mở rộng và tích hợp với các thư viện như TypeORM hay Mongoose.

Cài Đặt Socket.io Trong NestJS

Để bắt đầu, bạn cần cài đặt các gói cần thiết cho Socket.io và NestJS thông qua lệnh sau:

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

Tạo Gateway Để Quản Lý WebSocket

Trong NestJS, Gateway là phần chịu trách nhiệm xử lý các kết nối WebSocket. Hãy tạo một file mới có tên chat.gateway.ts và cấu hình như sau:

import { ConfigService } from '@nestjs/config';
import { JwtService } from '@nestjs/jwt';
import { ConnectedSocket, MessageBody, OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit, SubscribeMessage, WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

@WebSocketGateway({ cors: { origin: '*' } })
export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer()
  server: Server;
  
  constructor(private configService: ConfigService, private jwtService: JwtService) {}
  
  afterInit(server: Socket) {
    console.log('Server initialized');
  }
  
  handleConnection(client: Socket, ...args: any[]) {
    console.log('Client connected ' + client.id);
  }
  
  handleDisconnect(client: Socket) {
    console.log('Client disconnected ' + client.id);
  }
}

Giải Thích Các Phương Thức:

• afterInit(server: Server): Thực hiện các hoạt động sau khi gateway được khởi tạo.
• handleConnection(client: Socket): Xử lý các sự kiện khi một client kết nối.
• handleDisconnect(client: Socket): Xử lý sự kiện ngắt kết nối của client.

Đăng Ký Gateway Trong Module

Để sử dụng Gateway trong ứng dụng của bạn, hãy mở file app.module.ts và thêm vào như sau:

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ChatGateway } from './chat.gateway';

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

Sử Dụng JWT Để Xác Thực Người Dùng

Để xác thực người dùng thông qua JWT trong Socket.io, bạn cần đăng ký JwtService trong constructor và kiểm tra JWT trong phương thức handleConnection:

handleConnection(client: Socket, ...args: any[]) {
  console.log('Client connected ' + client.id);
  const authHeader = client.handshake.headers['authorization'];
  if (authHeader) {
    try {
      const token = authHeader;
      const decoded = this.jwtService.verify(token, { secret: this.configService.get('JWT_SECRET') });
      client.data = decoded;
    } catch (error) {
      console.log(error);
      client.emit('error', { message: 'Unauthorized' });
      client.disconnect();
    }
  } else {
    client.emit('error', { message: 'Unauthorized' });
    client.disconnect();
  }
}

Xử Lý Sự Kiện Với @SubscribeMessage

Để xử lý các tin nhắn từ client, bạn có thể sử dụng decorator @SubscribeMessage(). Dưới đây là ví dụ:

@SubscribeMessage('events')
handleEvent(@ConnectedSocket() client: Socket, @MessageBody() data: any): string {
  console.log(client.data.id); // log id của client
  const message: string = data.message;
  return message;
}

Kết Nối Client Đến Socket

Cuối cùng, hãy tạo một client để kết nối đến server:

const io = require('socket.io-client');
const socket = io('http://localhost:3000', { extraHeaders: { authorization: 'Bearer your_jwt_token_here' }});

socket.on('connect', () => { console.log('Connected to the server'); });

socket.on('error', (error) => { console.log('Error:', error.message); });

socket.on('events', (data) => { console.log('Received data:', data); });

socket.emit('events', { message: 'Hello server!' });

Kết Luận

Việc áp dụng Socket.io trong NestJS không chỉ đơn giản mà còn đem lại nhiều lợi ích cho ứng dụng của bạn. Bài viết này đã cung cấp cho bạn những thông tin cơ bản và hướng dẫn cần thiết để bắt đầu dự án của mình. Hy vọng bạn sẽ áp dụng thành công và phát triển những ứng dụng thời gian thực độc đáo!

Hãy ghé thăm Bếp UIT của chúng tôi để khám phá những món ăn hấp dẫn. Chúng tôi sử dụng Socket.io để xử lý chức năng đặt bàn, mang lại trải nghiệm mượt mà và tiện lợi cho khách hàng.
source: viblo