Vue Academy · Ders

Vue ile Socket.io İstemcisi

socket.io-client, io(url), socket.on/emit ve socket olaylarından reaktif Vue durumu oluşturma.

Vue ile Socket.io İstemcisi, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. 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.

Socket.IO Neden Kullanılır

Ham WebSockets düşük düzeylidir. Socket.IO, üzerine otomatik yeniden bağlanma, yedek aktarımlar, odalar ve temiz, olay tabanlı bir API ekleyen popüler bir kitaplıktır.

Sunucu ve istemci için birbirini tamamlayan paketleri vardır; burada Vue içinde kullanılan tarayıcı istemcisine odaklanıyoruz.

İstemciyi Kurma

İstemci paketini Vue projenize ekleyin. Bu paket, sunucu paketinden ayrıdır.

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

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

io() ile Bağlanma

Bir soket oluşturup bağlanmak için io(url) çağrısını yapın. Ham WebSockets'ten farklı olarak http(s):// URL'si verirsiniz — Socket.IO aktarımı sizin için anlaşır.

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

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

socket.on ile Dinleme

Socket.IO, adlandırılmış olaylar üzerine kuruludur. Bir sunucu olayına tepki vermek için socket.on(name, handler) kullanın. İşleyici, sunucunun gönderdiği yükü alır.

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

Yerleşik Yaşam Döngüsü Olayları

Socket.IO, dinleyebileceğiniz kendi yaşam döngüsü olaylarını üretir: connect, disconnect ve connect_error.

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

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

socket.emit ile Gönderme

Göndermek için socket.emit(name, payload) çağrısını yapın. Olay adını siz belirlersiniz; sunucu da aynı adı dinler. Elle JSON kodlaması gerekmez — Socket.IO sizin için serileştirir.

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

sendMessage("Hello room!")

Reaktif Mesajlar Dizisi

Vue'da gelen mesajları reaktif bir ref dizisinde tutun. socket.on işleyiciniz bunları diziye ekler ve şablon otomatik olarak yeniden oluşturulur.

import { ref } from "vue"

const messages = ref([])

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

script setup İçinde Bağlama

Tipik bir bileşen onMounted içinde bağlanır, dinleyicileri kaydeder ve şablona bir gönderme işlevi sunar.

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

Dinleyicileri Temizleme

socket.on ile kaydedilen dinleyiciler bağlı kalır. Bileşen yeniden bağlanırsa yinelenen işleyiciler birikebilir. Kapatma işlemi sırasında bunları socket.off ile kaldırın.

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

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

onUnmounted İçinde Bağlantıyı Kesme

Bileşen yok edildiğinde, gezinmeler arasında açık bir soket bırakmamak için socket.disconnect() ile bağlantıyı kapatın.

import { onUnmounted } from "vue"

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

Alındı Onayları

Socket.IO'nun kullanışlı bir özelliği şudur: son emit bağımsız değişkeni olarak bir geri çağırma işlevi geçirirseniz sunucu, alındıyı onaylamak için bu işlevi çağırabilir. "Mesaj teslim edildi" deneyimi için harikadır.

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

Hızlı Kontrol

Socket.IO istemci API'sini anlayıp anlamadığınızı kontrol edin.

Özet

Bu derste şunları öğrendiniz:

socket.io-client paketindeki io(url), bir http(s) URL'si kullanarak bağlanır.
socket.on(name, handler), adlandırılmış sunucu olaylarına tepki verir.
socket.emit(name, payload) olay gönderir; yükler otomatik olarak serileştirilir.
Gelen verileri şablon için reaktif bir ref dizisine ekleyin.
onUnmounted içinde socket.off ve socket.disconnect() ile temizleme yapın.

Sıkça Sorulan Sorular

“Vue ile Socket.io İstemcisi” dersi ücretsiz mi?

Evet — “Vue ile Socket.io İstemcisi” 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.

“Vue ile Socket.io İstemcisi” dersinde ne öğreneceğim?

socket.io-client, io(url), socket.on/emit ve socket olaylarından reaktif Vue durumu oluşturma. 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 2. dersidir.

“Vue ile Socket.io İstemcisi” 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