HTTP Range Requests: Mengoptimalkan Pengiriman Konten Besar dan Media Streaming di Web

1. Pendahuluan

Pernahkah Anda bertanya-tanya bagaimana pemutar video di YouTube atau Netflix bisa langsung melompat ke bagian mana pun dari video tanpa harus mengunduh seluruhnya dari awal? Atau bagaimana manajer unduhan Anda bisa melanjutkan unduhan yang terputus di tengah jalan? Jawabannya terletak pada fitur HTTP yang sangat powerful dan sering diabaikan: HTTP Range Requests.

Di era aplikasi web modern yang semakin kaya akan media dan data besar, mengelola pengiriman konten secara efisien adalah kunci untuk pengalaman pengguna yang mulus dan hemat sumber daya. Mengunduh seluruh file video berukuran gigabyte hanya untuk memutar beberapa detik pertama adalah pemborosan bandwidth yang sangat besar. Di sinilah HTTP Range Requests berperan.

Dalam artikel ini, kita akan menyelami HTTP Range Requests secara mendalam. Kita akan memahami cara kerjanya, melihat contoh implementasi di sisi frontend (JavaScript) dan backend (Node.js), serta membahas manfaat dan praktik terbaiknya. Bersiaplah untuk mengoptimalkan cara aplikasi web Anda menangani konten besar! 🎯

2. Apa Itu HTTP Range Requests?

Secara sederhana, HTTP Range Requests adalah mekanisme yang memungkinkan klien (misalnya, browser Anda) untuk meminta sebagian dari suatu sumber daya (file) dari server, bukan seluruhnya. Ini sangat kontras dengan permintaan HTTP standar yang selalu mengunduh seluruh sumber daya.

Konsep ini diimplementasikan melalui penggunaan header Range pada permintaan HTTP oleh klien, dan respons 206 Partial Content (atau 416 Range Not Satisfiable) dari server, disertai header Content-Range.

Mari kita pecah komponen-komponen utamanya:

Header Range (Permintaan Klien): Ketika klien ingin meminta sebagian dari file, ia akan menyertakan header Range dalam permintaannya. Format paling umum adalah bytes=start-end.
- Range: bytes=0-499: Meminta 500 byte pertama (dari byte 0 hingga 499).
- Range: bytes=500-999: Meminta 500 byte berikutnya.
- Range: bytes=500-: Meminta semua byte dari byte 500 hingga akhir file.
- Range: bytes=-500: Meminta 500 byte terakhir dari file.
- Klien juga bisa meminta beberapa rentang sekaligus, misalnya Range: bytes=0-499, 1000-1499.
Status Code 206 Partial Content (Respons Server): Jika server mendukung Range Requests dan dapat memenuhi permintaan rentang yang diminta, ia akan merespons dengan status 206 Partial Content. Ini menandakan bahwa server hanya mengirimkan sebagian dari sumber daya.
Header Content-Range (Respons Server): Bersamaan dengan status 206, server juga akan menyertakan header Content-Range untuk memberitahu klien rentang byte mana yang dikirimkannya dan ukuran total file.
- Content-Range: bytes 500-999/10000: Berarti server mengirimkan byte 500 hingga 999, dan total ukuran file adalah 10000 byte.
Header Accept-Ranges (Respons Server, Opsional): Server dapat menyertakan header Accept-Ranges: bytes dalam respons 200 OK (atau 206 Partial Content) untuk memberitahu klien bahwa ia mendukung Range Requests berbasis byte. Ini adalah indikasi penting bagi klien untuk tahu apakah fitur ini bisa digunakan.
Status Code 416 Range Not Satisfiable (Respons Server): Jika klien meminta rentang yang tidak valid (misalnya, rentang di luar ukuran file), server akan merespons dengan status 416 Range Not Satisfiable.

📌 Intinya: Range Requests adalah negosiasi antara klien dan server untuk mengirimkan hanya bagian yang relevan dari sebuah file, bukan seluruhnya.

3. Bagaimana Cara Kerjanya dalam Praktik?

Mari kita bayangkan sebuah file video berukuran 10MB.

Klien (Browser/Pemutar Video): Ingin memutar video. Ia tidak ingin mengunduh 10MB sekaligus. Ia mungkin hanya ingin 1MB pertama untuk mulai memutar. Permintaan awal:
```
GET /videos/my-awesome-video.mp4 HTTP/1.1
Host: example.com
Range: bytes=0-1048575  // Meminta 1MB pertama
```

Server: Menerima permintaan. Jika server mendukung Range Requests, ia akan membaca header Range, mengambil 1MB pertama dari file, dan mengirimkannya kembali. Respons server:

HTTP/1.1 206 Partial Content
Content-Type: video/mp4
Content-Length: 1048576 // Ukuran 1MB
Content-Range: bytes 0-1048575/10485760 // Rentang yang dikirim / Total ukuran file
Accept-Ranges: bytes // Mengindikasikan dukungan Range Requests

Klien: Menerima 1MB pertama dan mulai memutar video. Ketika pengguna melompat ke menit ke-5, klien menghitung perkiraan byte offset dan mengirim permintaan Range Request baru:
```
GET /videos/my-awesome-video.mp4 HTTP/1.1
Host: example.com
Range: bytes=5242880-6291455 // Meminta segmen di sekitar menit ke-5
```
Server: Merespons lagi dengan 206 Partial Content dan segmen yang diminta.

Proses ini berulang setiap kali klien membutuhkan bagian lain dari file, memungkinkan streaming yang efisien dan navigasi yang cepat.

4. Implementasi di Frontend (JavaScript)

Di sisi frontend, Anda bisa menggunakan fetch API untuk melakukan Range Requests. Anda perlu mengatur header Range secara manual.

async function fetchPartialContent(url, startByte, endByte) {
    try {
        const response = await fetch(url, {
            headers: {
                'Range': `bytes=${startByte}-${endByte || ''}` // endByte bisa kosong untuk 'hingga akhir'
            }
        });

        if (response.status === 206) {
            const blob = await response.blob();
            const contentRange = response.headers.get('Content-Range');
            console.log('Partial content fetched:', blob);
            console.log('Content-Range:', contentRange);
            return blob;
        } else if (response.status === 200) {
            console.warn('Server responded with 200 OK, not 206 Partial Content. Entire file might be downloaded.');
            const blob = await response.blob();
            return blob; // Mengembalikan seluruh file jika server tidak mendukung range
        } else {
            console.error('Failed to fetch partial content:', response.status, response.statusText);
            throw new Error(`HTTP error! status: ${response.status}`);
        }
    } catch (error) {
        console.error('Error fetching content:', error);
        throw error;
    }
}

// Contoh penggunaan:
const videoUrl = 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4'; // Contoh file MP4 publik
const fileSize = 10485760; // Asumsikan ukuran file total 10MB (contoh saja, idealnya dapatkan dari header Content-Length pertama kali)

// Meminta 100KB pertama
fetchPartialContent(videoUrl, 0, 102399)
    .then(blob => {
        if (blob) {
            const url = URL.createObjectURL(blob);
            const videoElement = document.createElement('video');
            videoElement.src = url;
            videoElement.controls = true;
            document.body.appendChild(videoElement);
            console.log('100KB pertama video berhasil dimuat dan diputar.');
        }
    })
    .catch(err => console.error('Gagal memuat video:', err));

// Meminta 100KB terakhir
fetchPartialContent(videoUrl, fileSize - 102400)
    .then(blob => {
        if (blob) {
            console.log('100KB terakhir video berhasil dimuat.');
        }
    })
    .catch(err => console.error('Gagal memuat segmen terakhir:', err));

Catatan: Untuk kasus streaming video yang sebenarnya, Anda akan menggunakan Media Source Extensions (MSE) API di browser, yang memungkinkan Anda membuat stream media dari segmen-segmen data yang Anda unduh menggunakan Range Requests. Kode di atas hanya untuk menunjukkan konsep dasar pengambilan data.

5. Implementasi di Backend (Node.js/Express)

Di sisi server, Anda perlu membaca header Range dari permintaan masuk, mem-parsing-nya, lalu mengirimkan sebagian file yang diminta dengan status 206 Partial Content dan header Content-Range.

Berikut contoh implementasi sederhana menggunakan Express.js:

const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();
const port = 3000;

const filePath = path.join(__dirname, 'assets', 'sample-video.mp4'); // Pastikan ada file ini
const videoSize = fs.statSync(filePath).size;

app.get('/video', (req, res) => {
    const range = req.headers.range;

    if (!range) {
        // Jika tidak ada header Range, kirim seluruh file dengan status 200 OK
        res.writeHead(200, {
            'Content-Length': videoSize,
            'Content-Type': 'video/mp4',
            'Accept-Ranges': 'bytes' // Beri tahu klien bahwa kita mendukung Range Requests
        });
        fs.createReadStream(filePath).pipe(res);
        return;
    }

    const parts = range.replace(/bytes=/, "").split("-");
    const start = parseInt(parts[0], 10);
    const end = parts[1] ? parseInt(parts[1], 10) : videoSize - 1;

    if (start >= videoSize || end >= videoSize || start > end) {
        // Jika rentang tidak valid
        res.writeHead(416, {
            'Content-Range': `bytes */${videoSize}`
        });
        return res.end();
    }

    const chunksize = (end - start) + 1;
    const file = fs.createReadStream(filePath, { start, end });
    const head = {
        'Content-Range': `bytes ${start}-${end}/${videoSize}`,
        'Accept-Ranges': 'bytes',
        'Content-Length': chunksize,
        'Content-Type': 'video/mp4',
    };

    res.writeHead(206, head); // Kirim status 206 Partial Content
    file.pipe(