Vue Academy · Pelajaran

Klien Socket.io dengan Vue

socket.io-client, io(url), socket.on/emit, serta state Vue reaktif dari event socket.

Klien Socket.io dengan Vue adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Mengapa Socket.IO?

WebSockets mentah bekerja pada tingkat rendah. Socket.IO adalah pustaka populer yang menambahkan penyambungan ulang otomatis, transportasi cadangan, ruang percakapan, dan API berbasis peristiwa yang rapi.

Pustaka ini memiliki paket server dan klien yang saling cocok; di sini kita berfokus pada klien peramban yang digunakan di dalam Vue.

Memasang Klien

Tambahkan paket klien ke proyek Vue Anda. Paket ini terpisah dari paket server.

// terminal
// npm install socket.io-client

import { io } from "socket.io-client"

Menyambungkan dengan io()

Panggil io(url) untuk membuat soket dan menyambungkannya. Tidak seperti WebSockets mentah, Anda memberikan URL http(s):// — Socket.IO menegosiasikan transportasi untuk Anda.

import { io } from "socket.io-client"

const socket = io("https://api.example.com", {
  autoConnect: true,
})

Mendengarkan dengan socket.on

Socket.IO dibangun berdasarkan peristiwa bernama. Gunakan socket.on(name, handler) untuk merespons peristiwa dari server. Penangan tersebut menerima muatan apa pun yang dikirimkan server.

socket.on("message", (msg) => {
  console.log("New message:", msg.text, "from", msg.user)
})

Peristiwa Siklus Hidup Bawaan

Socket.IO mengirimkan peristiwa siklus hidupnya sendiri yang dapat Anda dengarkan: connect, disconnect, dan connect_error.

socket.on("connect", () => {
  console.log("Connected, id:", socket.id)
})

socket.on("disconnect", (reason) => {
  console.log("Disconnected:", reason)
})

Mengirim dengan socket.emit

Untuk mengirimkan data, panggil socket.emit(name, payload). Anda memilih nama peristiwa; server mendengarkan nama yang sama. Tidak diperlukan enkode JSON manual — Socket.IO melakukan serialisasi untuk Anda.

function sendMessage(text) {
  socket.emit("send", { text, at: Date.now() })
}

sendMessage("Hello room!")

Larik Pesan Reaktif

Di Vue, simpan pesan masuk dalam larik ref reaktif. Penangan socket.on Anda menambahkannya ke larik tersebut, lalu templat merender ulang secara otomatis.

import { ref } from "vue"

const messages = ref([])

socket.on("message", (msg) => {
  messages.value.push(msg)
})

Menerapkannya di script setup

Komponen biasanya menyambung di onMounted, mendaftarkan pendengar, dan menyediakan fungsi kirim untuk templat.

import { ref, onMounted, onUnmounted } from "vue"
import { io } from "socket.io-client"

const messages = ref([])
const socket = io("https://api.example.com")

onMounted(() => {
  socket.on("message", (m) => messages.value.push(m))
})

function send(text) {
  socket.emit("send", { text })
}

Membersihkan Pendengar

Pendengar yang didaftarkan dengan socket.on tetap terpasang. Jika komponen dipasang ulang, Anda dapat menumpuk penangan duplikat. Hapus pendengar tersebut dengan socket.off saat membongkar komponen.

function onMessage(m) { messages.value.push(m) }

onMounted(() => socket.on("message", onMessage))
onUnmounted(() => socket.off("message", onMessage))

Memutuskan Sambungan di onUnmounted

Saat komponen dihancurkan, tutup koneksi dengan socket.disconnect() agar soket yang terbuka tidak bocor selama navigasi.

import { onUnmounted } from "vue"

onUnmounted(() => {
  socket.disconnect()
})

Konfirmasi Penerimaan

Salah satu fitur Socket.IO yang menarik: teruskan fungsi panggilan balik sebagai argumen terakhir emit, lalu server dapat memanggilnya untuk mengonfirmasi penerimaan. Sangat berguna untuk pengalaman pengguna "pesan terkirim".

socket.emit("send", { text: "hi" }, (ack) => {
  console.log("Server confirmed:", ack.status)
})

Uji Singkat

Periksa pemahaman Anda tentang API klien Socket.IO.

Ringkasan

Dalam pelajaran ini, Anda telah mempelajari:

io(url) dari socket.io-client tersambung menggunakan URL http(s).
socket.on(name, handler) merespons peristiwa server yang bernama.
socket.emit(name, payload) mengirimkan peristiwa; muatan diserialisasi secara otomatis.
Masukkan data yang datang ke larik ref reaktif agar dapat ditampilkan oleh templat.
Bersihkan dengan socket.off dan socket.disconnect() di onUnmounted.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Klien Socket.io dengan Vue” gratis?

Ya — teks lengkap “Klien Socket.io dengan Vue” 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 “Klien Socket.io dengan Vue”?

socket.io-client, io(url), socket.on/emit, serta state Vue reaktif dari event socket. 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 2 dari 4.

Berapa lama pelajaran “Klien Socket.io dengan Vue” 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