BAB 37 – Fitur JavaScript Lain yang Sering Digunakan di Project Real-Time

BAB 37 – Fitur JavaScript Lain yang Sering Digunakan di Project Real-Time

JavaScript adalah bahasa utama untuk pengembangan web modern. Selain kemampuan dasar seperti manipulasi DOM atau event handling, JavaScript memiliki banyak fitur canggih yang sangat berguna untuk membangun aplikasi real-time.

Aplikasi real-time ini biasanya melibatkan interaksi langsung pengguna, update data instan, komunikasi dua arah, streaming media, dan visualisasi data.

Artikel ini akan membahas fitur-fitur utama JavaScript selain WebSocket, yang sering dipakai dalam proyek real-time, lengkap dengan penjelasan, contoh kode, dan implementasi praktis.

1. Fetch API dan AJAX

Apa itu

Fetch API adalah API modern untuk melakukan HTTP request secara asynchronous. AJAX (Asynchronous JavaScript and XML) adalah konsep lama yang serupa, digunakan untuk mengirim permintaan HTTP tanpa me-refresh halaman.

Fitur

  • Mendukung GET, POST, PUT, DELETE
  • Bisa menggunakan async/await atau .then()
  • Menangani JSON, Blob, FormData
  • Bisa digunakan untuk request ke API real-time

Contoh

// Fetch data pesan dari server
async function getMessages() {
  try {
    const response = await fetch('/api/messages');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching messages:', error);
  }
}
getMessages();

Penggunaan di Real-Time Project

  • Mengambil riwayat chat sebelum WebSocket terhubung
  • Memperbarui data dashboard tanpa reload
  • Sinkronisasi awal state aplikasi

2. Event Loop dan Asynchronous Programming

Apa itu

JavaScript menggunakan event loop untuk menjalankan operasi non-blocking. Semua operasi asynchronous seperti HTTP request, timer, atau WebSocket bekerja dengan callback, promises, dan async/await.

Fitur

  • Non-blocking I/O
  • Promises & async/await
  • setTimeout, setInterval untuk scheduling
  • Event-driven architecture

Contoh

console.log('Start');

setTimeout(() => {
  console.log('Async task finished');
}, 1000);

console.log('End');

Penggunaan di Real-Time Project

  • Menangani update data real-time tanpa freezing UI
  • Menyinkronkan event dari WebSocket dengan timer
  • Membuat debounce/throttle untuk input pengguna

3. Web Storage API

Apa itu

Web Storage API memungkinkan penyimpanan data di browser dalam localStorage atau sessionStorage.

Fitur

  • localStorage: persist data di browser, tetap ada meski browser ditutup
  • sessionStorage: data hanya bertahan selama tab dibuka
  • Mendukung penyimpanan string sederhana

Contoh

// Menyimpan username
localStorage.setItem('username', 'Alice');

// Mengambil data
const user = localStorage.getItem('username');
console.log(user); // Alice

Penggunaan di Real-Time Project

  • Menyimpan state aplikasi sementara
  • Cache data untuk offline mode
  • Menyimpan pengaturan user di client

4. IndexedDB

Apa itu

IndexedDB adalah database NoSQL di browser untuk menyimpan data lebih besar secara offline.

Fitur

  • Menyimpan objek JavaScript secara langsung
  • Mendukung transaksi, index, cursor
  • Cocok untuk data real-time offline

Contoh

const request = indexedDB.open('ChatDB', 1);

request.onupgradeneeded = event => {
  const db = event.target.result;
  db.createObjectStore('messages', { keyPath: 'id', autoIncrement: true });
};

request.onsuccess = event => {
  const db = event.target.result;
  const tx = db.transaction('messages', 'readwrite');
  const store = tx.objectStore('messages');
  store.add({ text: 'Hello world', user: 'Alice', timestamp: Date.now() });
};

Penggunaan di Real-Time Project

  • Menyimpan history chat saat offline
  • Menyimpan state game real-time sebelum sinkronisasi server
  • Caching data sensor / telemetry di aplikasi IoT

5. Service Workers

Apa itu

Service Worker adalah script yang berjalan di background browser, terpisah dari halaman utama, memungkinkan caching, offline mode, dan push notification.

Fitur

  • Intercept request network
  • Background sync
  • Push notifications
  • Offline caching untuk Progressive Web App (PWA)

Contoh

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => response || fetch(event.request))
  );
});

Penggunaan di Real-Time Project

  • Menyediakan offline fallback untuk aplikasi chat atau dashboard
  • Menyimpan assets / data penting agar tetap tampil saat offline
  • Push notification untuk update real-time

6. WebRTC

Apa itu

WebRTC adalah API browser untuk peer-to-peer real-time communication, mendukung audio, video, dan data channel.

Fitur

  • Peer-to-peer streaming (audio/video)
  • DataChannel untuk transfer teks/biner
  • Enkripsi end-to-end
  • NAT traversal via STUN/TURN

Contoh

const pc = new RTCPeerConnection();
pc.ondatachannel = event => {
  const channel = event.channel;
  channel.onmessage = msg => console.log(msg.data);
};

Penggunaan di Real-Time Project

  • Video call dan voice chat
  • Multiplayer game P2P
  • Collaborative file sharing

7. Server-Sent Events (SSE)

Apa itu

SSE adalah metode server push satu arah (server → client) via HTTP. Lebih ringan daripada WebSocket, tapi hanya satu arah.

Fitur

  • Automatic reconnect
  • EventSource API sederhana di browser
  • Text-based streaming

Contoh

const evtSource = new EventSource('/events');
evtSource.onmessage = event => console.log(event.data);

Penggunaan di Real-Time Project

  • News feed
  • Stock ticker
  • Notifikasi sistem

8. Canvas API dan WebGL

Apa itu

Canvas API dan WebGL memungkinkan rendering grafik 2D/3D di browser.

Fitur

  • Gambar, animasi, dan visualisasi data
  • WebGL untuk grafik 3D / GPU acceleration
  • Event-driven rendering

Contoh

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50);

Penggunaan di Real-Time Project

  • Real-time dashboard visualisasi
  • Whiteboard collaborative apps
  • Game berbasis browser

9. Web Audio API

Apa itu

Web Audio API memungkinkan manipulasi audio real-time di browser.

Fitur

  • Playback dan audio processing
  • Audio visualization
  • Audio effects dan filtering

Contoh

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioCtx.createOscillator();
oscillator.connect(audioCtx.destination);
oscillator.start();
oscillator.stop(audioCtx.currentTime + 1);

Penggunaan di Real-Time Project

  • Voice chat / WebRTC integration
  • Music streaming apps
  • Audio visualization / games

10. Geolocation API

Apa itu

API untuk mendapatkan posisi user secara real-time.

Fitur

  • GPS, network, atau sensor location
  • WatchPosition untuk update lokasi terus-menerus

Contoh

navigator.geolocation.getCurrentPosition(pos => {
  console.log(pos.coords.latitude, pos.coords.longitude);
});

Penggunaan di Real-Time Project

  • Delivery / ride tracking apps
  • Location-based notifications
  • Mapping / IoT apps

11. Notifications API dan Push API

Apa itu

API untuk push notifications di browser.

Fitur

  • Menampilkan alert di desktop atau mobile
  • Terintegrasi dengan Service Worker untuk push background
  • Mendukung interaksi dengan user

Contoh

Notification.requestPermission().then(permission => {
  if(permission === 'granted') {
    new Notification('Pesan baru diterima!');
  }
});

Penggunaan di Real-Time Project

  • Notifikasi chat / event
  • Alerts dari monitoring system
  • Stock / crypto updates

12. Web Workers

Apa itu

Web Workers memungkinkan JavaScript berjalan di thread terpisah, tidak blocking UI.

Fitur

  • Background computation
  • Multi-threading sederhana
  • Komunikasi dengan postMessage

Contoh

const worker = new Worker('worker.js');
worker.onmessage = e => console.log(e.data);
worker.postMessage('Mulai proses');

Penggunaan di Real-Time Project

  • Proses data real-time tanpa freeze UI
  • Analisis sensor / telemetry
  • Kalkulasi game physics atau AI

13. Clipboard API

Apa itu

API untuk membaca dan menulis data ke clipboard.

Contoh

navigator.clipboard.writeText('Hello World');
navigator.clipboard.readText().then(text => console.log(text));

Penggunaan di Real-Time Project

  • Copy-paste link atau pesan
  • Sharing data dari aplikasi collaborative

14. Pointer Events / Drag & Drop

Apa itu

Event untuk mouse, touch, dan stylus interactivity.

Fitur

  • Drag & drop UI
  • Touch gestures
  • Whiteboard / drawing apps

Contoh

element.addEventListener('pointerdown', e => console.log(e.clientX, e.clientY));

Penggunaan di Real-Time Project

  • Collaborative drawing apps
  • Drag & drop dashboard widgets
  • Interactive games

15. Performance API / Memory API

Apa itu

API untuk memantau performa dan memori aplikasi.

Fitur

  • Measure FPS, response time, latency
  • Detect memory leaks
  • Profiling real-time performance

Contoh

console.log(performance.now()); // timestamp high resolution

Penggunaan di Real-Time Project

  • Optimasi dashboard / game real-time
  • Monitoring aplikasi browser-heavy
  • Profiling algoritma real-time

Kesimpulan

JavaScript menyediakan banyak fitur selain WebSocket yang mendukung aplikasi real-time modern, antara lain:

  1. Fetch / AJAX – Async HTTP request
  2. Event Loop / Async Programming – Non-blocking operations
  3. Web Storage / IndexedDB – Offline storage
  4. Service Workers – Background sync & offline support
  5. WebRTC – Peer-to-peer audio/video/data
  6. SSE – Server push
  7. Canvas / WebGL – Grafik 2D/3D
  8. Web Audio API – Audio processing
  9. Geolocation API – Tracking posisi user
  10. Notifications / Push – Alert real-time
  11. Web Workers – Background processing
  12. Clipboard API – Copy/paste
  13. Pointer Events / Drag & Drop – UI interactivity
  14. Performance / Memory API – Profiling dan optimasi

Fitur-fitur ini memungkinkan developer membangun aplikasi real-time yang kompleks, interaktif, dan scalable, mulai dari chat, dashboard, game, collaborative apps, hingga IoT dan multimedia streaming.

Dengan penguasaan semua fitur ini, JavaScript menjadi bahasa unggul untuk membangun aplikasi web modern dengan pengalaman real-time yang handal.

Related Posts