Blogger Jateng
Home / Tutorial

Aplikasi Waktu Nyata dengan WebSocket di Node.js

Aplikasi real-time sangat penting untuk membangun pengalaman pengguna yang interaktif di era platform digital saat ini. Aplikasi obrolan, permainan langsung, dasbor pasar saham, alat kolaboratif - apa pun yang baru saja Anda pikirkan, kemungkinan besar itu adalah sesuatu dengan fungsionalitas waktu nyata sebagai inti keberhasilannya. Di sinilah WebSockets, sebuah protokol yang memungkinkan komunikasi dupleks penuh melalui koneksi tunggal antara klien dan server, menjadi yang terdepan. Dikombinasikan dengan Node.js, runtime JavaScript sisi server secepat kilat (Terhubung ke acara secara real time) Banyak aplikasi paling dinamis di web didukung oleh WebSockets.

Apa itu WebSockets?

Pengantar WebSockets WebSockets adalah protokol standar dari tahun 2011 yang menyediakan saluran dua arah yang berkesinambungan dan dua arah antara klien dan server. Tidak seperti HTTP, yang menggunakan model request-response, WebSockets memungkinkan transmisi dua arah aliran data tanpa permintaan HTTP yang berulang. Hal ini membuat mereka sangat cocok untuk latensi rendah, kasus penggunaan dengan interaksi tinggi seperti:

  • Aplikasi Obrolan Langsung
  • Game Multiplayer Online
  • Alat Kolaborasi Waktu Nyata
  • Siaran Langsung Olahraga dan Pembaruan Keuangan
  • Streaming Data IoT

WebSockets dibangun di atas Transmission Control Protocol (TCP) dan menggunakan mekanisme framing yang ringan, sehingga membuatnya efisien dan cocok untuk aplikasi real-time berskala besar.

sumber: forproger.ru

Mengapa Menggunakan Node.js dengan WebSockets?

Node. js, yang dikenal dengan arsitektur non-blocking berbasis event yang sangat cocok untuk aplikasi berbasis WebSocket. Model berbasis event-nya membantu pengembang mengelola beberapa jalur koneksi secara simultan tanpa beban bahasa sisi server tradisional.

Keuntungan utama menggunakan Node.js dengan WebSockets meliputi:

  • Skalabilitas: Node.sh dapat mendukung ribuan koneksi WebSocket secara bersamaan dengan I/O asinkron.
  • Performa: Berkat arsitekturnya yang ringan dan event loop yang tidak memblokir, Node.js stanwood untuk komunikasi real-time.
  • Ekosistem yang kaya: Library seperti ws dan framework seperti Socket.IO menyederhanakan implementasi WebSocket dalam aplikasi Node.js.

Soket Web Node: Pengembangan Aplikasi Waktu Nyata js

Sekarang kita akan membahas pembuatan aplikasi obrolan waktu nyata WebSockets/Node yang sangat dasar. js. Contoh ini menggunakan pustaka ws yang populer untuk fungsionalitas WebSocket.

Langkah 1: Menyiapkan Lingkungan

Pertama, instal Node.js jika Anda belum melakukannya. Pertama, buatlah sebuah proyek baru:

mkdir websocket-chat
cd websocket-chat
npm init -y
npm install ws

Langkah 2: Membangun Kode Server

Buat berkas server.js dan tambahkan kode di bawah ini:

const WebSocket = require('ws');

// Create a WebSocket server
const wss = new WebSocket.Server({ port: 8080 });

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

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

    // Listen for messages from the client
    ws.on('message', (message) => {
        console.log(`Received: ${message}`);

        // Broadcast the message to all connected clients
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

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

Server ini akan mendengarkan port 8080 dan menangani koneksi WebSocket. Jika klien mengirim pesan, server akan mengirimkannya ke semua klien yang terhubung.

Langkah 3: Membuat Klien Sederhana

Buat sebuah indeks. Buat berkas HTML untuk digunakan sebagai klien:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Chat</title>
</head>
<body>
    <h1>WebSocket Chat</h1>
    <textarea id="chat" cols="30" rows="10" readonly></textarea><br>
    <input type="text" id="message" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>

    <script>
        const ws = new WebSocket('ws://localhost:8080');
        const chat = document.getElementById('chat');
        const messageInput = document.getElementById('message');

        ws.onmessage = (event) => {
            chat.value += event.data + '\n';
        };

        function sendMessage() {
            const message = messageInput.value;
            ws.send(message);
            messageInput.value = '';
        }
    </script>
</body>
</html>

Klien ini membuat koneksi ke server WebSocket, mengirim pesan, dan menampilkan pesan yang diterima di jendela obrolan.

Langkah 4: Jalankan Aplikasi

Mulai server:

node server.js

Buka index.html untuk klien browser dan sekarang dapat mengobrol secara real-time dengan klien lain di server yang sama!

Meningkatkan Aplikasi Dunia Nyata

Anda juga bisa menggunakan framework seperti Socket untuk aplikasi siap produksi. IO dan layanan serupa lainnya yang menyediakan fallback untuk mendukung klien yang lebih baik yang tidak menawarkan WebSockets. Skalabilitas dan keamanan dijamin dengan fitur tambahan seperti otentikasi, antrian pesan, dan pengelompokan.

Kesimpulan

WebSockets dan Node.js, menjadikannya pilihan yang kuat untuk aplikasi real-time-memungkinkan komunikasi dengan latensi rendah. Kombinasi teknologi ini memastikan kinerja, skalabilitas, dan interaktivitas, baik saat Anda membuat platform obrolan, dasbor langsung, atau game interaktif. Menggunakan WebSockets di Node.js memungkinkan pengembang untuk mengimplementasikan pengalaman pengguna yang luar biasa seperti yang dibutuhkan dalam web modern.