Vue Academy · Pelajaran

Dasar-Dasar WebSocket di Browser

new WebSocket(url), onopen/onmessage/onerror/onclose, send(), serta readyState.

Dasar-Dasar WebSocket di Browser adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Waktu Nyata di Peramban

HTTP menggunakan pola permintaan/respons: klien bertanya, server menjawab, lalu koneksi ditutup. Untuk percakapan, dasbor langsung, atau permainan multipemain, Anda memerlukan server untuk mengirimkan data tanpa diminta.

Protokol WebSocket menyediakan satu koneksi dua arah yang berumur panjang antara peramban dan server.

Membuka Koneksi

Peramban menyediakan konstruktor global WebSocket. Teruskan URL menggunakan skema ws:// (biasa) atau wss:// (TLS).

Pembuatan objek tersebut langsung memulai jabat tangan koneksi.

const ws = new WebSocket("wss://echo.example.com/socket")

// Construction kicks off the connection.
// Nothing is sent yet — we wait for it to open.

Penangan onopen

Koneksi belum siap tepat saat Anda membuatnya. Peristiwa onopen dijalankan setelah jabat tangan selesai dan soket siap membawa data.

Kirim pesan pertama Anda dari dalam onopen, jangan sebelumnya.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  console.log("Connected!")
  ws.send("hello server")
}

Menerima Pesan

Data masuk tiba melalui onmessage. Muatannya berada di event.data dan secara bawaan berupa teks.

Sebagian besar aplikasi mengirim JSON, jadi uraikan kembali data tersebut menjadi objek.

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  console.log("Got:", msg.type, msg.payload)
}

Mengirim Pesan

Gunakan ws.send() untuk mengirimkan data. WebSockets membawa teks mentah atau data biner, jadi enkode objek dengan JSON.stringify terlebih dahulu.

Kedua pihak menyepakati suatu struktur — dalam contoh ini, type dan payload.

function sendChat(text) {
  const msg = { type: "chat", payload: { text } }
  ws.send(JSON.stringify(msg))
}

sendChat("Good morning")

Perjalanan Pulang-Pergi Lengkap

Menggabungkan pembukaan, pengiriman, dan penerimaan menghasilkan klien gema yang lengkap. Buka soket, kirim saat terbuka, lalu log apa pun yang kembali.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  ws.send(JSON.stringify({ type: "ping" }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log("Server replied:", data)
}

Menutup Koneksi

Peristiwa onclose dijalankan saat koneksi berakhir — baik karena Anda memanggil ws.close() maupun karena jaringan terputus. Peristiwa ini membawa code numerik dan teks reason.

Kode 1000 berarti penutupan normal.

ws.onclose = (event) => {
  console.log("Closed:", event.code, event.reason)
  if (event.code !== 1000) {
    console.log("Unexpected close — may want to reconnect")
  }
}

// Trigger a clean close yourself:
// ws.close(1000, "done")

Menangani Kesalahan

Peristiwa onerror dijalankan saat terjadi kegagalan transportasi. Peristiwa kesalahan itu sendiri sengaja hanya memberikan sedikit detail demi keamanan; anggaplah sebagai tanda bahwa sesuatu gagal dan koneksi kemungkinan akan segera ditutup.

ws.onerror = (event) => {
  console.error("WebSocket error occurred")
  // onclose usually fires right after onerror.
}

Properti readyState

ws.readyState adalah angka yang menunjukkan posisi soket dalam siklus hidupnya. Selalu periksa nilainya sebelum mengirim agar Anda tidak menimbulkan kesalahan pada soket yang belum terbuka.

0 CONNECTING
1 OPEN
2 CLOSING
3 CLOSED

function safeSend(data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data))
  } else {
    console.warn("Not open, readyState =", ws.readyState)
  }
}

Konstanta readyState Bernama

Alih-alih menggunakan angka khusus, gunakan konstanta pada kelas WebSocket. Konstanta tersebut jauh lebih jelas daripada 0, 1, atau 3.

console.log(WebSocket.CONNECTING) // 0
console.log(WebSocket.OPEN)       // 1
console.log(WebSocket.CLOSING)    // 2
console.log(WebSocket.CLOSED)     // 3

if (ws.readyState === WebSocket.OPEN) {
  ws.send("ready to talk")
}

Menerapkannya di Vue

Di dalam komponen Vue, biasanya Anda membuat soket di onMounted dan membongkarnya di onUnmounted. Penangan tersebut memperbarui ref reaktif yang ditampilkan oleh templat Anda.

import { ref, onMounted, onUnmounted } from "vue"

const messages = ref([])
let ws

onMounted(() => {
  ws = new WebSocket("wss://echo.example.com/socket")
  ws.onmessage = (e) => messages.value.push(JSON.parse(e.data))
})

onUnmounted(() => ws && ws.close())

Uji Singkat

Periksa pemahaman Anda tentang nilai readyState WebSocket.

Ringkasan

Dalam pelajaran ini, Anda telah mempelajari:

new WebSocket(url) memulai koneksi dua arah menggunakan ws:// atau wss://.
onopen dijalankan saat soket siap; kirim data hanya setelah itu.
onmessage mengirimkan data melalui event.data — uraikan JSON untuk mendapatkan objek.
ws.send(JSON.stringify(msg)) mengirimkan data.
onclose dan onerror menangani pembongkaran dan kegagalan.
readyState adalah 0 CONNECTING, 1 OPEN, 2 CLOSING, 3 CLOSED.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar-Dasar WebSocket di Browser” gratis?

Ya — teks lengkap “Dasar-Dasar WebSocket di Browser” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Dasar-Dasar WebSocket di Browser”?

new WebSocket(url), onopen/onmessage/onerror/onclose, send(), serta readyState. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Dasar-Dasar WebSocket di Browser” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Dasar-Dasar WebSocket di Browser
Klien Socket.io dengan Vue
Membangun Komponen Chat Real-Time
Composable useWebSocket dengan Penyambungan Ulang

← Kembali ke Vue Academy