Web Socket #

WebSocket adalah protokol komunikasi yang memungkinkan komunikasi dua arah antara klien dan server melalui satu koneksi TCP. WebSocket sangat berguna untuk aplikasi yang memerlukan komunikasi real-time, seperti aplikasi obrolan, game online, atau dashboard yang membutuhkan pembaruan data secara instan.

Menggunakan WebSocket di TypeScript memberikan Anda manfaat dari pengetikan statis, yang membantu dalam menulis kode yang lebih aman dan mudah dipelihara. Berikut adalah penjelasan mengenai WebSocket dan bagaimana menggunakannya di TypeScript.

Mengapa Menggunakan WebSocket? #

• Real-Time Communication: WebSocket memungkinkan komunikasi dua arah yang terus-menerus antara klien dan server, tanpa perlu melakukan polling terus-menerus seperti pada HTTP.
• Efisiensi: WebSocket lebih efisien dibandingkan HTTP karena tidak memerlukan overhead pembukaan dan penutupan koneksi untuk setiap pesan.
• Interaktif: Cocok untuk aplikasi yang memerlukan pembaruan data secara langsung, seperti permainan multiplayer atau aplikasi perdagangan saham.

Membangun WebSocket Server di TypeScript #

Untuk membuat WebSocket server di Node.js dengan TypeScript, Anda dapat menggunakan modul ws yang merupakan salah satu pustaka WebSocket yang populer.

Instalasi ws dan TypeScript Setup #

1. Inisialisasi Proyek dan Instalasi Dependencies:

   npm init -y
   npm install ws
   npm install typescript @types/ws --save-dev
   

2. Inisialisasi TypeScript Config:

   Jalankan perintah berikut untuk membuat tsconfig.json:

   npx tsc --init
   

Membuat WebSocket Server #

Contoh Implementasi Server WebSocket:

import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('New client connected');

    ws.on('message', (message) => {
        console.log('Received:', message.toString());

        // Mengirim pesan kembali ke klien
        ws.send(`Server received: ${message}`);
    });

    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

console.log('WebSocket server running on ws://localhost:8080');

• WebSocketServer: Membuat instance dari server WebSocket yang mendengarkan pada port tertentu (misalnya, 8080).
• wss.on('connection', ...): Event handler yang dijalankan ketika klien terhubung ke server.
• ws.on('message', ...): Menangani pesan yang diterima dari klien.
• ws.send(): Mengirim pesan kembali ke klien.

Membangun WebSocket Client di TypeScript #

Di sisi klien, Anda dapat menggunakan API WebSocket yang sudah ada di browser untuk berkomunikasi dengan WebSocket server.

Contoh Implementasi Klien WebSocket:

const socket = new WebSocket('ws://localhost:8080');

// Event ketika koneksi berhasil dibuka
socket.addEventListener('open', (event) => {
    console.log('Connected to WebSocket server');
    socket.send('Hello Server!');
});

// Event ketika menerima pesan dari server
socket.addEventListener('message', (event) => {
    console.log('Message from server:', event.data);
});

// Event ketika terjadi error
socket.addEventListener('error', (event) => {
    console.error('WebSocket error:', event);
});

// Event ketika koneksi ditutup
socket.addEventListener('close', (event) => {
    console.log('Disconnected from WebSocket server');
});

• new WebSocket(url): Membuat koneksi WebSocket ke server.
• socket.addEventListener('open', ...): Menangani event saat koneksi berhasil dibuka.
• socket.send(): Mengirim pesan ke server.
• socket.addEventListener('message', ...): Menangani pesan yang diterima dari server.

Menggunakan TypeScript untuk Mengetikkan Pesan WebSocket #

Salah satu keunggulan menggunakan TypeScript adalah Anda bisa mengetikkan pesan yang dikirim dan diterima melalui WebSocket, sehingga mengurangi kemungkinan kesalahan tipe.

Contoh Mengetikkan Pesan:

interface Message {
    type: string;
    payload: any;
}

// Server Side
wss.on('connection', (ws) => {
    ws.on('message', (data: string) => {
        const message: Message = JSON.parse(data);
        console.log('Received:', message);

        if (message.type === 'greeting') {
            ws.send(JSON.stringify({ type: 'response', payload: 'Hello Client!' }));
        }
    });
});

// Client Side
socket.addEventListener('open', () => {
    const message: Message = { type: 'greeting', payload: 'Hello Server!' };
    socket.send(JSON.stringify(message));
});

socket.addEventListener('message', (event) => {
    const message: Message = JSON.parse(event.data);
    console.log('Message from server:', message);
});

• interface Message: Mendefinisikan struktur pesan untuk memastikan bahwa pesan yang dikirim dan diterima memiliki format yang diharapkan.
• JSON.parse() dan JSON.stringify(): Mengkonversi pesan dari dan ke format JSON.

Mengelola Banyak Klien #

Ketika menggunakan WebSocket, server biasanya akan melayani banyak klien secara bersamaan. Anda mungkin ingin menyiarkan pesan ke semua klien atau menangani setiap klien secara terpisah.

Contoh Penyiaran Pesan ke Semua Klien:

wss.on('connection', (ws) => {
    ws.on('message', (data: string) => {
        const message: Message = JSON.parse(data);

        // Menyiarkan pesan ke semua klien yang terhubung
        wss.clients.forEach(client => {
            if (client.readyState === ws.OPEN) {
                client.send(JSON.stringify(message));
            }
        });
    });
});

• wss.clients: Mengakses semua klien yang terhubung ke server.
• client.readyState: Memastikan bahwa klien siap untuk menerima pesan sebelum mengirimkannya.

Best Practices untuk WebSocket di TypeScript #

• Error Handling: Selalu tangani error dengan baik, baik di sisi server maupun klien, untuk mencegah server crash atau koneksi yang tidak stabil.
• Security: Gunakan WebSocket Secure (wss://) untuk komunikasi yang aman. Pastikan juga untuk memverifikasi dan mengotentikasi klien yang terhubung.
• Data Validation: Validasi data yang diterima dari klien untuk mencegah serangan yang mungkin terjadi, seperti pengiriman data yang tidak valid atau berbahaya.

Kesimpulan #

Menggunakan WebSocket dalam TypeScript memungkinkan Anda untuk membangun aplikasi real-time dengan komunikasi dua arah antara klien dan server. Dengan TypeScript, Anda dapat memanfaatkan pengetikan statis untuk menulis kode yang lebih aman dan mudah dipelihara, terutama saat menangani pesan yang kompleks. WebSocket sangat berguna dalam aplikasi seperti obrolan, game online, dan aplikasi dashboard yang membutuhkan pembaruan data secara real-time.