Vue Academy · Pelajaran

Asas WebSocket dalam Pelayar

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

Pelajaran 1 daripada 413 langkah

Asas WebSocket dalam Pelayar ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Masa Nyata dalam Pelayar

HTTP menggunakan model permintaan dan respons: klien bertanya, pelayan menjawab, kemudian sambungan ditutup. Untuk sembang, papan pemuka langsung atau permainan berbilang pemain, anda memerlukan pelayan untuk menghantar data tanpa diminta.

Protokol WebSocket menyediakan satu sambungan dua hala yang bertahan lama antara pelayar dan pelayan.

Membuka Sambungan

Pelayar menyediakan pembina global WebSocket. Hantar URL menggunakan skema ws:// (biasa) atau wss:// (TLS).

Mencipta objek itu akan memulakan jabat tangan sambungan dengan serta-merta.

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

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

Pengendali onopen

Sambungan belum bersedia sebaik sahaja anda membinanya. Peristiwa onopen dicetuskan setelah jabat tangan selesai dan soket bersedia untuk membawa data.

Hantar mesej pertama anda dari dalam onopen, jangan sekali-kali sebelumnya.

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

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

Menerima Mesej

Data masuk tiba melalui onmessage. Muatan berada pada event.data dan secara lalai ialah rentetan.

Kebanyakan aplikasi menghantar JSON, jadi huraikannya semula menjadi objek.

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

Menghantar Mesej

Gunakan ws.send() untuk menghantar data. WebSockets membawa rentetan mentah atau data binari, jadi kodkan objek dengan JSON.stringify terlebih dahulu.

Kedua-dua pihak bersetuju tentang bentuk data — dalam contoh ini, type serta payload.

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

sendChat("Good morning")

Perjalanan Pergi Balik Lengkap

Dengan menggabungkan pembukaan, penghantaran dan penerimaan, anda memperoleh klien gema yang lengkap. Buka soket, hantar apabila soket dibuka dan catat apa sahaja yang diterima semula.

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 Sambungan

Peristiwa onclose dicetuskan apabila sambungan berakhir — sama ada anda memanggil ws.close() atau rangkaian terputus. Peristiwa itu membawa code berangka dan rentetan reason.

Kod 1000 bermaksud penutupan biasa.

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")

Mengendalikan Ralat

Peristiwa onerror dicetuskan apabila berlaku kegagalan pengangkutan. Peristiwa ralat itu sendiri sengaja memberikan sedikit maklumat demi keselamatan; anggaplah ia sebagai isyarat bahawa sesuatu telah berlaku dan sambungan mungkin akan ditutup.

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

Sifat readyState

ws.readyState ialah nombor yang menunjukkan kedudukan soket dalam kitar hayatnya. Sentiasa semak sifat ini sebelum menghantar supaya anda tidak mencetuskan ralat pada soket yang belum dibuka.

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)
  }
}

Pemalar readyState Bernama

Daripada menggunakan nombor ajaib, gunakan pemalar pada kelas WebSocket. Pemalar tersebut jauh lebih jelas berbanding 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")
}

Menggabungkan Semuanya dalam Vue

Dalam komponen Vue, anda biasanya mencipta soket dalam onMounted dan menutupnya dalam onUnmounted. Pengendali mengemas kini rujukan reaktif yang dipaparkan 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())

Semakan Ringkas

Semak pemahaman anda tentang nilai readyState WebSocket.

Jawab dalam pelajaran interaktif

Ringkasan

Dalam pelajaran ini, anda telah mempelajari perkara berikut:

new WebSocket(url) memulakan sambungan dua hala menggunakan ws:// atau wss://.
onopen dicetuskan apabila soket bersedia; hantar data hanya selepas itu.
onmessage menghantar data melalui event.data — huraikan JSON untuk mendapatkan objek.
ws.send(JSON.stringify(msg)) menghantar data.
onclose dan onerror mengendalikan penutupan serta kegagalan.
readyState ialah 0 CONNECTING, 1 OPEN, 2 CLOSING dan 3 CLOSED.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Asas WebSocket dalam Pelayar” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Asas WebSocket dalam Pelayar”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Asas WebSocket dalam Pelayar”?

new WebSocket(url), onopen/onmessage/onerror/onclose, send(), readyState. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Asas WebSocket dalam Pelayar” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Asas WebSocket dalam Pelayar
Klien Socket.io dengan Vue
Membina Komponen Sembang Masa Nyata
Komposabel useWebSocket dengan Sambungan Semula

← Kembali ke Vue Academy