HTTP Fundamentals

Aplikasi toko buku milik Budi tampil indah di browser, tetapi daftar bukunya tidak mungkin tersimpan di memori tab yang sedang dibuka — begitu halaman ditutup, semuanya hilang. Data yang sesungguhnya hidup di server, dan browser harus berkomunikasi dengannya setiap kali daftar produk, keranjang, atau status pesanan dibutuhkan. Bahasa percakapan yang dipakai keduanya adalah HTTP (HyperText Transfer Protocol), dan memahami bentuk dasar percakapan inilah fondasi sebelum kita menulis satu baris kode jaringan pun.

Pada bagian ini kita membedah model kerja HTTP, anatomi pesannya, metode permintaan yang lazim, keluarga kode status, serta peran header — semuanya ringkas, sebagai bekal untuk chapter fetch dan seterusnya. Semua contoh kode pada section Network dan API berjalan dengan server tiruan yang tertanam di berkas contoh itu sendiri: server kecil buatan node:http mendengarkan di localhost dengan port acak, sehingga node nama-berkas.mjs bisa dijalankan tanpa internet dan keluarannya selalu sama.

Model Request-Response #

HTTP bekerja dengan pola tanya-jawab yang disiplin. Pihak yang bertanya disebut client — browser, aplikasi mobile, atau skrip Node — dan pihak yang menjawab disebut server. Client yang memulai; server tidak pernah mengirim apa pun sebelum diminta.

Satu siklus komunikasi selalu berbentuk:

1. Client menyusun request (permintaan): tujuan berupa URL, metode aksi, header, dan kadang body berisi data.
2. Request dikirim lewat jaringan menuju server yang menjaga alamat itu.
3. Server memproses permintaan — membaca database, memeriksa izin, menghitung hasil.
4. Server mengirim response (tanggapan): kode status, header, dan biasanya body berisi data.
5. Client membaca response dan memutuskan langkah berikutnya — menampilkan tabel, menandai formulir salah, atau mencoba lagi.

Sifat penting yang sering mengejutkan pemula: HTTP bersifat stateless (tak menyimpan keadaan). Server tidak mengingat permintaan sebelumnya; setiap request tiba sebagai kejadian yang berdiri sendiri. Bila Budi menambahkan buku ke keranjang lalu memuat ulang halaman, permintaan keduanya tidak saling mengenal — data seperti identitas sesi harus dikirim ulang pada setiap permintaan agar server tahu siapa yang bertanya.

Anatomi Request dan Response #

Request dan response ternyata hanya teks yang terstruktur. Request dibuka oleh request line — misalnya GET /produk/17 HTTP/1.1 yang berisi metode, alamat sumber daya (path), dan versi protokol. Response dibuka oleh status line — misalnya HTTP/1.1 200 OK. Setelah baris pembuka, keduanya mengikuti pola yang sama: satu blok header berupa pasangan Nama: nilai, satu baris kosong, lalu body opsional berisi data.

Berkas berikut memeriksa percakapan itu dari dua sisi sekaligus. Server tiruan mencetak permintaan yang diterimanya, sedangkan client fetch mencetak bagian penting response yang diterimanya:

// anatomi-permintaan.mjs
// Server tiruan node:http + fetch: membedah request dan response.
// Jalankan di terminal: node anatomi-permintaan.mjs (tanpa internet).

import http from "node:http";

// --- Server tiruan: mendengarkan di port acak localhost ---
const server = http.createServer((req, res) => {
  console.log(`SERVER menerima : ${req.method} ${req.url} HTTP/${req.httpVersion}`);
  console.log(`SERVER header   : accept=${req.headers.accept}, user-agent=${req.headers["user-agent"]}`);
  res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
  res.end(JSON.stringify({ judul: "Pulpen Gel", harga: 5000 }));
});

server.listen(0, "127.0.0.1", async () => {
  // Port 0 berarti "pilihkan port kosong apa pun" — nilainya dibaca dari server.address().
  const port = server.address().port;

  // --- Client: fetch mengirim request, lalu menerima response ---
  const response = await fetch(`http://127.0.0.1:${port}/produk/17`);
  console.log("CLIENT status      :", response.status, response.statusText);
  console.log("CLIENT content-type:", response.headers.get("content-type"));
  const data = await response.json();
  console.log("CLIENT body        :", data.judul, "-", data.harga);

  server.closeAllConnections();
  server.close();
});

Output yang Dihasilkan:

SERVER menerima : GET /produk/17 HTTP/1.1
SERVER header   : accept=*/*, user-agent=node
CLIENT status      : 200 OK
CLIENT content-type: application/json; charset=utf-8
CLIENT body        : Pulpen Gel - 5000

Mari kita telaah baris-baris pentingnya:

1. Baris 5 (import http from "node:http"): node:http adalah modul bawaan Node untuk membuat server HTTP; kita memakainya hanya untuk membangun server tiruan di localhost.
2. Baris 8 (http.createServer(...)): callback menerima dua object — req (request yang datang) dan res (response yang akan dikirim). Pada baris 9–10 server mencetak req.method, req.url, dan versi protokol, lalu dua header yang dikirim fetch secara otomatis.
3. Baris 11–12 (res.writeHead(...) / res.end(...)): writeHead menuliskan status line beserta header; end mengirim body dan menandai tanggapan selesai. Inilah padanan “status line + header + body” dari sisi server.
4. Baris 15–17 (server.listen(0, ...)): angka 0 meminta sistem operasi memilih port kosong apa pun, sehingga berkas ini aman dijalankan kapan pun tanpa bentrok port; nomor aslinya dibaca lewat server.address().port.
5. Baris 20 (fetch(...)): client mengirim request GET ke /produk/17. URL lengkapnya menyertakan port acak tadi, tetapi pola percakapannya sama persis seperti menutur server sungguhan.
6. Baris 21–22 (response.status / response.headers.get(...)): dari sisi client, status line terbaca sebagai angka response.status (200) dan response.statusText ("OK"), sedangkan header dibaca dengan headers.get("content-type").
7. Baris 23 (response.json()): body — teks JSON yang dikirim server — diuraikan menjadi object JavaScript. Mekanismenya dibedah tuntas di chapter Fetch Requests.
8. Baris 26–27 (closeAllConnections() / close()): server tiruan dimatikan agar proses Node berhenti dengan rapi setelah demonstrasi selesai.

Metode yang Paling Sering Dipakai #

Request line selalu diawali metode, kata kerja yang menjelaskan niat client. Lima metode ini akan kita pakai sepanjang section ini:

Kapan masing-masing dipakai, bagaimana mengirim body-nya, dan konsep idempotensi dibahas khusus di chapter Request Methods.

Keluarga Kode Status #

Status line pada response diawali kode status tiga digit — ringkasan satu angka tentang nasib permintaan. Kode dikelompokkan menurut digit pertamanya:

Chapter Response Status akan membuktikan satu perilaku yang mengejutkan banyak pemula: fetch tidak melempar galat ketika statusnya 404 atau 500.

Header: Metadata Pesan #

Header adalah pasangan Nama: nilai yang mendampingi body — ibarat label pengiriman pada paket. Header request menjelaskan apa yang dikirim dan apa yang diharapkan; header response menjelaskan apa yang dikembalikan dan bagaimana memperlakukannya.

Beberapa header yang akan sering kita temui:

• Content-Type — format isi pesan, misalnya application/json; pemakaiannya paling sering keliru, karena itu dibedah khusus di chapter Headers dan Content Types.
• Accept — format yang bersedia diterima client.
• Authorization — kredensial seperti token akses.
• Cache-Control — petunjuk berapa lama respons boleh disimpan sementara.

Nama header tidak peka huruf besar-kecil: Content-Type dan content-type adalah header yang sama. Keduanya juga jadi kunci mekanisme keamanan lintas situs (CORS) yang kita bahas di chapter tersendiri.

Dengan peta ringkas ini — request-response, metode, status, header — kita siap menulis kode komunikasi yang sesungguhnya. Chapter berikutnya memperkenalkan fetch, jendela utama JavaScript menuju server.