Vue Academy · Lektion

Socket.io-Client mit Vue

socket.io-client, io(url), socket.on/emit und reaktiver Vue-Status aus Socket-Ereignissen

Socket.io-Client mit Vue ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Socket.IO

Rohe WebSockets sind sehr hardwarenah. Socket.IO ist eine beliebte Bibliothek, die automatische Wiederverbindung, Fallback-Transporte, Räume und eine übersichtliche ereignisbasierte API ergänzt.

Dafür gibt es passende Pakete für Server und Client; hier konzentrieren wir uns auf den Browser-Client in Vue.

Client installieren

Fügen Sie das Client-Paket zu Ihrem Vue-Projekt hinzu. Es ist vom Server-Paket getrennt.

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

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

Mit io() verbinden

Rufen Sie io(url) auf, um einen Socket zu erstellen und eine Verbindung herzustellen. Anders als bei rohen WebSockets übergeben Sie eine http(s)://-URL — Socket.IO handelt den Transport für Sie aus.

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

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

Mit socket.on auf Ereignisse reagieren

Socket.IO basiert auf benannten Ereignissen. Verwenden Sie socket.on(name, handler), um auf ein Serverereignis zu reagieren. Der Handler erhält die Nutzlast, die der Server gesendet hat.

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

Integrierte Lebenszyklusereignisse

Socket.IO löst eigene Lebenszyklusereignisse aus, auf die Sie lauschen können: connect, disconnect und connect_error.

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

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

Mit socket.emit senden

Rufen Sie zum Senden socket.emit(name, payload) auf. Sie wählen den Ereignisnamen; der Server lauscht auf denselben Namen. Eine manuelle JSON-Kodierung ist nicht erforderlich — Socket.IO serialisiert für Sie.

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

sendMessage("Hello room!")

Ein reaktives Nachrichten-Array

Halten Sie eingehende Nachrichten in einem reaktiven ref-Array. Ihr socket.on-Handler fügt Nachrichten hinzu, und das Template wird automatisch neu gerendert.

import { ref } from "vue"

const messages = ref([])

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

In script setup einbinden

Eine typische Komponente stellt in onMounted die Verbindung her, registriert Listener und stellt dem Template eine Sendefunktion bereit.

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

Listener bereinigen

Listener, die mit socket.on registriert wurden, bleiben angehängt. Wird die Komponente erneut gemountet, können sich doppelte Handler ansammeln. Entfernen Sie sie beim Aufräumen mit socket.off.

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

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

In onUnmounted trennen

Wenn die Komponente zerstört wird, schließen Sie die Verbindung mit socket.disconnect(), damit beim Navigieren kein offener Socket zurückbleibt.

import { onUnmounted } from "vue"

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

Bestätigungen

Ein praktisches Socket.IO-Feature: Übergeben Sie eine Callback-Funktion als letztes emit-Argument, und der Server kann sie aufrufen, um den Empfang zu bestätigen. Ideal für eine UX mit dem Status „Nachricht zugestellt“.

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

Schnelltest

Prüfen Sie Ihr Verständnis der Socket.IO-Client-API.

Zusammenfassung

In dieser Lektion haben Sie gelernt:

io(url) aus socket.io-client stellt mit einer http(s)-URL eine Verbindung her.
socket.on(name, handler) reagiert auf benannte Serverereignisse.
socket.emit(name, payload) sendet Ereignisse; Nutzlasten werden automatisch serialisiert.
Übertragen Sie eingehende Daten in ein reaktives ref-Array für das Template.
Räumen Sie mit socket.off und socket.disconnect() in onUnmounted auf.

Häufig gestellte Fragen

Ist die Lektion „Socket.io-Client mit Vue“ kostenlos?

Ja — der vollständige Text von „Socket.io-Client mit Vue“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Socket.io-Client mit Vue“?

socket.io-client, io(url), socket.on/emit und reaktiver Vue-Status aus Socket-Ereignissen Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Socket.io-Client mit Vue“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

WebSocket-Grundlagen im Browser
Socket.io-Client mit Vue
Eine Echtzeit-Chatkomponente erstellen
useWebSocket-Composable mit Wiederverbindung

← Zurück zu Vue Academy