Socket.io-klient med Vue
socket.io-client, io(url), socket.on/emit og reaktiv Vue-state basert på socket-hendelser.
Socket.io-klient med Vue er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Hvorfor Socket.IO?
Rå WebSockets er lavnivå. Socket.IO er et populært bibliotek som legger til automatisk ny tilkobling, alternative transporter, rom og et ryddig hendelsesbasert API.
Det finnes matchende server- og klientpakker; her fokuserer vi på nettleserklienten som brukes i Vue.
Installere klienten
Legg klientpakken til i Vue-prosjektet Deres. Den er separat fra serverpakken.
// terminal
// npm install socket.io-client
import { io } from "socket.io-client"Koble til med io()
Kall io(url) for å opprette en sokkel og koble til. I motsetning til rå WebSockets oppgir De en http(s)://-URL – Socket.IO forhandler transporten for Dem.
import { io } from "socket.io-client"
const socket = io("https://api.example.com", {
autoConnect: true,
})Lytte med socket.on
Socket.IO er bygget rundt navngitte hendelser. Bruk socket.on(name, handler) til å reagere på en serverhendelse. Håndtereren mottar den nyttelasten serveren sendte ut.
socket.on("message", (msg) => {
console.log("New message:", msg.text, "from", msg.user)
})Innebygde livssyklushendelser
Socket.IO sender ut egne livssyklushendelser som De kan lytte til: connect, disconnect og connect_error.
socket.on("connect", () => {
console.log("Connected, id:", socket.id)
})
socket.on("disconnect", (reason) => {
console.log("Disconnected:", reason)
})Sende med socket.emit
Send ved å kalle socket.emit(name, payload). De velger hendelsesnavnet, og serveren lytter etter det samme navnet. Manuell JSON-koding er ikke nødvendig – Socket.IO serialiserer for Dem.
function sendMessage(text) {
socket.emit("send", { text, at: Date.now() })
}
sendMessage("Hello room!")En reaktiv meldingsmatrise
I Vue kan De lagre innkommende meldinger i en reaktiv ref-matrise. socket.on-håndtereren legger meldinger til, og malen gjengis automatisk på nytt.
import { ref } from "vue"
const messages = ref([])
socket.on("message", (msg) => {
messages.value.push(msg)
})Koble det sammen i script setup
En typisk komponent kobler til i onMounted, registrerer lyttere og gjør en sendefunksjon tilgjengelig for malen.
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 })
}Rydde opp i lyttere
Lyttere som registreres med socket.on, forblir tilknyttet. Hvis komponenten monteres på nytt, kan De få flere identiske håndterere. Fjern dem med socket.off når komponenten tas ned.
function onMessage(m) { messages.value.push(m) }
onMounted(() => socket.on("message", onMessage))
onUnmounted(() => socket.off("message", onMessage))Koble fra i onUnmounted
Når komponenten ødelegges, lukker De tilkoblingen med socket.disconnect() slik at De ikke lekker en åpen sokkel mellom navigeringer.
import { onUnmounted } from "vue"
onUnmounted(() => {
socket.disconnect()
})Kvitteringer
En nyttig Socket.IO-funksjon: Send en callback som det siste emit-argumentet, så kan serveren kalle den for å bekrefte mottak. Det er nyttig for brukeropplevelsen rundt «melding levert».
socket.emit("send", { text: "hi" }, (ack) => {
console.log("Server confirmed:", ack.status)
})Hurtigsjekk
Kontroller forståelsen Deres av Socket.IO-klient-API-et.
Oppsummering
I denne leksjonen har De lært:
io(url)frasocket.io-clientkobler til med en http(s)-URL.socket.on(name, handler)reagerer på navngitte serverhendelser.socket.emit(name, payload)sender hendelser; nyttelaster serialiseres automatisk.- Legg innkommende data til i en reaktiv
ref-matrise for malen. - Rydd opp med
socket.offogsocket.disconnect()ionUnmounted.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 42
- Leksjoner
- 156
Ofte stilte spørsmål
Er leksjonen «Socket.io-klient med Vue» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Socket.io-klient med Vue», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Socket.io-klient med Vue»?
socket.io-client, io(url), socket.on/emit og reaktiv Vue-state basert på socket-hendelser. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Vue Academy?
Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Socket.io-klient med Vue»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?
Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Grunnleggende WebSocket i nettleseren
- Socket.io-klient med Vue
- Bygg en sanntidschat-komponent
- useWebSocket-composable med gjenoppkobling