Implementasi Websocket di Server

NestJS bisa digunakan untuk menangani koneksi dan komunikasi dengan websocket. Dalam NestJs implmentasi websocket disebut gateway dengan menggunakan decorator@WebSocketGateway(). Gateways bersifat platform-agnostic, artinya tidak terikat pada library WebSocket tertentu. Hal ini memungkinkan gateway untuk bekerja dengan library WebSocket apa pun, asalkan ada adapter yang sesuai. NestJS menyediakan dua library websocket yang didukung secara default, yaitu socket.io dan ws.

Instalasi

Untuk memulai belajar implementasi WebSockets-based applications di NestJS, pertama kita lakukan instalasi package yang diperlukan.

terminal

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

Kemudian kita buat module websocket dan file gateway untuk menangani koneksi websocket.

terminal

npx nest g module app/websocket

Kemudian secara manual file websocket.gateway.ts

websocket.gateway.ts

import {

  MessageBody,
  SubscribeMessage,
  WebSocketGateway,
  WebSocketServer,
} from '@nestjs/websockets';

import { Server } from 'socket.io';

@WebSocketGateway({
  namespace: 'events',
  cors: {
    origin: '*', // ubah kedomain spesifik jika perlu
  },
})
export class MessageGateway {
  @WebSocketServer()
  server: Server;

  @SubscribeMessage('send_message')
  sendMessage(@MessageBody() body: any) {

    this.server.emit('send_message.reply', {
      msg: 'new Message',
      data: body,
    });
  }
}

Info

• @WebSocketGateway: Dekorator ini mendefinisikan gateway WebSocket. Dalam NestJS, gateway bertugas untuk menangani koneksi WebSocket dan event-event yang terkait.
• namespace: 'events': Menentukan namespace untuk gateway WebSocket. Dalam kasus ini, gateway hanya akan menangani koneksi pada namespace 'events'. contoh https://localhost:3000/events atau ws://localhost/event
• cors: { origin: '*' }: Mengizinkan koneksi dari semua origin. Hal ini biasa digunakan saat development, adapun saat production harus menggunaka spesifik url
• @WebSocketServer(): Decorator ini memberitahu NestJS untuk menginisialisasi properti server sebagai instance dari server WebSocket. Dengan decorator ini, kita dapat langsung mengakses instance dari server WebSocket yang berjalan di gateway.
• server: Server: mendeklarasi properti server dari tipe Server. Server biasanya di import dari library Websocket seperti socket.io -@SubscribeMessage('send_message')decorator yang menunjukkan bahwa nestjs akan mendengarkan pesan yang dikirimkan pada eventsend_message
• this.server.emit('send_message.reply', { msg: 'new Message', data: body, }); : ini adalah perintah agar nestjs mengirmkan pesan kepada event send_message.reply.

Kemudian kita export Class MessageGateway agar bisa diakses oleh method lain

websocket.module.ts

import { Module } from '@nestjs/common';
import { MessageGateway } from './websocket.gateway';

@Global()
@Module({
  providers: [MessageGateway],
  exports: [MessageGateway],
})
export class WebsocketModule {}

Pengujian Koneksi WebSocket di Postman

Buatlah request baru dengan pilih new dan pilih socket.io seperti gambar di bawah.

kemudian pada kolom url tuliskan url server seperti contoh http://localhost:5002/event dengan event merupakan namespace. Setelah itu klik connect untuk menghubungkan client dengan server.

Apabil koneksi berhasil maka akan tampak seperti gambar dibawah ini.

Kemudian buat Request baru untuk receiver sepert gambar di bawah ini. Pada tab events tambahkan send_message.reply dan listen true agar client bersiap menerima data jika dikirimkan ke channel send_message.

Penjelasan

• tab events : digunakan untuk membuat simulasi listen websocket
• pada simulasi ini receiver akan memperoleh pesan yang dikirimkan pada event send_message.reply

Penjelasan

• tab message : digunakan untuk membuat simulasi mengirimkan message
• pada simulasi ini sender akan mengirimkan pesan pada event send_message

Pada simulasi ini, kita telah berhasil mengirimkan pesan dari sender dan pesan berhasil diterima oleh receiver.