MODUL 13 (SPESIALIS IOT): WEBSOCKETS REAL-TIME TELEMETRY

📌 META MODUL & PRASYARAT

• Bidang Spesialisasi: Bi-directional Full-Duplex Web Streaming.
• Target Pembaca: Pembelajar yang sudah memahami Arsitektur Broker (Modul 12).
• Learning Outcome:
• Memahami perbedaan HTTP Polling vs WebSockets Full-Duplex Connection.
• Mampu membuat WebSockets Server di ESP32 (WebSocketsServer.h).
• Mampu membuat Web Client JS (new WebSocket('ws://...')) untuk menerima data tanpa refresh halaman.
• Memahami penghematan overhead bandwidth pada WebSockets.
• Estimasi Waktu Belajar: 120 Menit.
• Tingkat Kesulitan: 🟡 Menengah (Level 13 / 40).
• Prasyarat: Modul 12 (Arsitektur MQTT Broker).

📋 TABEL PERBANDINGAN HTTP POLLING VS WEBSOCKETS

⚡ CHEAT SHEET KODE WEBSOCKETS CLIENT JAVASCRIPT

// Menghubungkan Browser JS ke ESP32 WebSocket Server
const socket = new WebSocket('ws://192.168.1.105:81/');

socket.onopen = function(event) {
    console.log('Terhubung ke WebSockets ESP32!');
    socket.send('PING_FROM_BROWSER');
};

socket.onmessage = function(event) {
    console.log('Data Sensor Real-time Diterima:', event.data);
    const data = JSON.parse(event.data);
    document.getElementById('temp-display').innerText = data.temp + ' °C';
};

socket.onclose = function(event) {
    console.warn('Koneksi WebSockets terputus. Mencoba reconnect...');
};