Vue Academy · Ders

Tarayıcıda WebSocket Temelleri

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

1. ders / 413 adım

Tarayıcıda WebSocket Temelleri, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Tarayıcıda Gerçek Zamanlı Çalışma

HTTP, istek/yanıt modelini kullanır: istemci sorar, sunucu yanıtlar ve bağlantı kapanır. Sohbet, canlı panolar veya çok oyunculu oyunlar için sunucunun istek gelmeden veri itmesi gerekir.

WebSocket protokolü, tarayıcı ile sunucu arasında tek ve uzun ömürlü, iki yönlü bir bağlantı sağlar.

Bağlantı Açma

Tarayıcı, genel kullanıma açık bir WebSocket oluşturucusuyla birlikte gelir. ws:// (düz) veya wss:// (TLS) şemasını kullanarak bir URL geçirin.

Nesnenin oluşturulması, bağlantı el sıkışmasını hemen başlatır.

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

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

onopen İşleyicisi

Bağlantı, nesneyi oluşturduğunuz anda hazır olmaz. El sıkışma tamamlanıp soket veri taşımaya hazır olduğunda onopen olayı bir kez çalışır.

İlk mesajınızı daha önce değil, onopen içinden gönderin.

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

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

Mesajları Alma

Gelen veriler onmessage üzerinden ulaşır. Yük event.data içindedir ve varsayılan olarak bir dizedir.

Çoğu uygulama JSON gönderir; bu nedenle JSON'u yeniden bir nesneye ayrıştırırsınız.

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

Mesaj Gönderme

İletim yapmak için ws.send() kullanın. WebSockets ham dizeler veya ikili veriler taşır; bu nedenle nesneleri önce JSON.stringify ile kodlayın.

Her iki taraf da bir veri biçimi üzerinde anlaşır — burada bu biçim bir type ve bir payload içerir.

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

sendChat("Good morning")

Tam Bir Gidiş Dönüş

Açma, gönderme ve alma işlemlerini bir araya getirdiğinizde eksiksiz bir yankı istemcisi elde edersiniz. Soketi açın, açıldığında gönderin ve geri gelen her şeyi günlüğe kaydedin.

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

Bağlantıyı Kapatma

Bağlantı sona erdiğinde — ister ws.close() çağrılmış ister ağ bağlantısı kopmuş olsun — onclose olayı çalışır. Olay, sayısal bir code ve bir reason dizesi taşır.

1000 kodu normal kapanış anlamına gelir.

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

Hataları Ele Alma

onerror olayı, aktarım hatalarında çalışır. Güvenlik nedeniyle hata olayının kendisi bilerek çok az ayrıntı içerir; bunu bir şeylerin ters gittiğini ve muhtemelen bağlantının kapanacağını bildiren bir sinyal olarak ele alın.

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

readyState Özelliği

ws.readyState, soketin yaşam döngüsünde hangi aşamada olduğunu belirten bir sayıdır. Henüz açılmamış bir sokette hata almamak için göndermeden önce her zaman kontrol edin.

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

Adlandırılmış readyState Sabitleri

Sihirli sayılar yerine WebSocket sınıfındaki sabitleri kullanın. Bunlar 0, 1 veya 3 değerlerinden çok daha anlaşılırdır.

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

Vue'da Bir Araya Getirme

Bir Vue bileşeninin içinde genellikle soketi onMounted içinde oluşturur, onUnmounted içinde kapatıp temizlersiniz. İşleyiciler, şablonunuzun oluşturduğu reaktif ref'leri günceller.

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

Hızlı Kontrol

WebSocket readyState değerlerini anlayıp anlamadığınızı kontrol edin.

İnteraktif derste cevapla

Özet

Bu derste şunları öğrendiniz:

new WebSocket(url), ws:// veya wss:// kullanarak iki yönlü bir bağlantı başlatır.
Soket hazır olduğunda onopen çalışır; yalnızca bundan sonra gönderim yapın.
onmessage, verileri event.data üzerinden iletir — bir nesne elde etmek için JSON'u ayrıştırın.
ws.send(JSON.stringify(msg)) veri gönderir.
onclose ve onerror, kapatma işlemini ve hataları ele alır.
readyState değerleri 0 CONNECTING, 1 OPEN, 2 CLOSING ve 3 CLOSED anlamına gelir.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Tarayıcıda WebSocket Temelleri” dersi ücretsiz mi?

Evet — “Tarayıcıda WebSocket Temelleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Tarayıcıda WebSocket Temelleri” dersinde ne öğreneceğim?

new WebSocket(url), onopen/onmessage/onerror/onclose, send() ve readyState. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Tarayıcıda WebSocket Temelleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Tarayıcıda WebSocket Temelleri
Vue ile Socket.io İstemcisi
Gerçek Zamanlı Sohbet Bileşeni Oluşturma
Yeniden Bağlanma Özellikli useWebSocket Composable'ı

← Vue Academy Sayfasına Dön