0Pricing
Vue Academy · Lekcja

Klient Socket.io z Vue

socket.io-client, io(url), socket.on/emit oraz reaktywny stan Vue na podstawie zdarzeń socketu.

Klient Socket.io z Vue to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dlaczego Socket.IO?

Surowe WebSockety działają na niskim poziomie. Socket.IO to popularna biblioteka, która dodaje automatyczne ponowne łączenie, transporty zastępcze, pokoje oraz przejrzyste API oparte na zdarzeniach.

Udostępnia odpowiadające sobie pakiety serwera i klienta; w tym miejscu skupimy się na kliencie przeglądarkowym używanym wewnątrz Vue.

Instalowanie klienta

Należy dodać pakiet klienta do projektu Vue. Jest on oddzielny od pakietu serwera.

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

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

Łączenie za pomocą io()

Wywołanie io(url) tworzy gniazdo i nawiązuje połączenie. W przeciwieństwie do surowych WebSocketów należy przekazać adres URL http(s):// — Socket.IO samodzielnie negocjuje transport.

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

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

Nasłuchiwanie za pomocą socket.on

Socket.IO opiera się na nazwanych zdarzeniach. Za pomocą socket.on(name, handler) można reagować na zdarzenie serwera. Procedura obsługi otrzymuje dowolny payload wysłany przez serwer.

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

Wbudowane zdarzenia cyklu życia

Socket.IO emituje własne zdarzenia cyklu życia, których można nasłuchiwać: connect, disconnect i connect_error.

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

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

Wysyłanie za pomocą socket.emit

Aby wysłać dane, należy wywołać socket.emit(name, payload). Nazwę zdarzenia wybiera aplikacja, a serwer nasłuchuje tej samej nazwy. Nie trzeba ręcznie kodować danych w formacie JSON — Socket.IO robi to automatycznie.

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

sendMessage("Hello room!")

Reaktywna tablica wiadomości

W Vue wiadomości przychodzące należy przechowywać w reaktywnej tablicy ref. Procedura obsługi socket.on dodaje do niej wiadomości, a szablon automatycznie renderuje się ponownie.

import { ref } from "vue"

const messages = ref([])

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

Konfigurowanie w script setup

Typowy komponent nawiązuje połączenie w onMounted, rejestruje procedury nasłuchiwania i udostępnia szablonowi funkcję wysyłania.

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

Usuwanie procedur nasłuchiwania

Procedury nasłuchiwania zarejestrowane za pomocą socket.on pozostają podłączone. Jeśli komponent zostanie zamontowany ponownie, może dojść do nagromadzenia zduplikowanych procedur obsługi. Podczas sprzątania należy usunąć je za pomocą socket.off.

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

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

Rozłączanie w onUnmounted

Po zniszczeniu komponentu należy zamknąć połączenie za pomocą socket.disconnect(), aby otwarte gniazdo nie pozostało aktywne podczas przechodzenia między widokami.

import { onUnmounted } from "vue"

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

Potwierdzenia

Przydatna funkcja Socket.IO: jako ostatni argument emit można przekazać callback, a serwer może go wywołać, aby potwierdzić odbiór. To świetne rozwiązanie dla interfejsu informującego o dostarczeniu wiadomości.

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

Szybkie sprawdzenie

Proszę sprawdzić swoje rozumienie API klienta Socket.IO.

Podsumowanie

W tej lekcji poznano:

  • io(url) z pakietu socket.io-client nawiązuje połączenie za pomocą adresu URL http(s).
  • socket.on(name, handler) reaguje na nazwane zdarzenia serwera.
  • socket.emit(name, payload) wysyła zdarzenia, a payloady są automatycznie serializowane.
  • Dane przychodzące można dodawać do reaktywnej tablicy ref, aby szablon mógł je wyświetlać.
  • Należy sprzątać za pomocą socket.off i socket.disconnect() w onUnmounted.

Często zadawane pytania

Czy lekcja „Klient Socket.io z Vue” jest bezpłatna?

Tak — pełny tekst „Klient Socket.io z Vue” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Klient Socket.io z Vue”?

socket.io-client, io(url), socket.on/emit oraz reaktywny stan Vue na podstawie zdarzeń socketu. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Klient Socket.io z Vue”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Podstawy WebSocket w przeglądarce
  2. Klient Socket.io z Vue
  3. Budowanie komponentu czatu czasu rzeczywistego
  4. Composable useWebSocket z ponownym połączeniem
← Powrót do Vue Academy