Vue Academy · Oppitunti

Socket.io-asiakasohjelma Vuen kanssa

socket.io-client, io(url), socket.on/emit ja socket-tapahtumien reaktiivinen Vue-tila

Oppitunti 2/413 vaihetta

Socket.io-asiakasohjelma Vuen kanssa on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Miksi Socket.IO?

Raakatason WebSocket-yhteydet ovat matalan tason ratkaisu. Socket.IO on suosittu kirjasto, joka lisää niiden päälle automaattisen uudelleenyhdistämisen, varasiirtotavat, huoneet ja selkeän tapahtumapohjaisen API:n.

Sillä on toisiaan vastaavat palvelin- ja asiakaspaketit; tässä keskitymme Vuen sisällä käytettävään selainasiakkaaseen.

Asiakkaan asentaminen

Lisätkää asiakaspaketti Vue-projektiinne. Se on erillinen palvelinpaketista.

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

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

Yhdistäminen io()-funktiolla

Kutsukaa io(url)-funktiota socketin luomiseksi ja yhteyden muodostamiseksi. Toisin kuin raakojen WebSocket-yhteyksien tapauksessa, antakaa sille http(s)://-URL-osoite — Socket.IO neuvottelee siirtotavan puolestanne.

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

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

Kuunteleminen socket.on-funktiolla

Socket.IO perustuu nimettyihin tapahtumiin. Käyttäkää socket.on(name, handler)-funktiota palvelimen tapahtumaan reagoimiseen. Käsittelijä vastaanottaa palvelimen välittämän hyötykuorman sellaisenaan.

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

Sisäänrakennetut elinkaaritapahtumat

Socket.IO lähettää omia elinkaaritapahtumiaan, joita voitte kuunnella: connect, disconnect ja connect_error.

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

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

Lähettäminen socket.emit-funktiolla

Lähettäkää kutsumalla socket.emit(name, payload)-funktiota. Valitsette tapahtuman nimen itse, ja palvelin kuuntelee samaa nimeä. JSON-koodausta ei tarvitse tehdä manuaalisesti — Socket.IO sarjallistaa tiedot puolestanne.

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

sendMessage("Hello room!")

Reaktiivinen viestitaulukko

Säilyttäkää saapuvat viestit Vuessa reaktiivisessa ref-taulukossa. socket.on-käsittelijä lisää viestit siihen, ja templaatti renderöidään automaattisesti uudelleen.

import { ref } from "vue"

const messages = ref([])

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

Liittäminen script setup -osioon

Tyypillinen komponentti muodostaa yhteyden onMounted-hookissa, rekisteröi kuuntelijat ja tarjoaa lähetysfunktiolle pääsyn templaatista.

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

Kuuntelijoiden siivoaminen

socket.on-funktiolla rekisteröidyt kuuntelijat pysyvät liitettyinä. Jos komponentti liitetään uudelleen, käsittelijöitä voi kertyä useita samoja. Poistakaa ne socket.off-funktiolla komponenttia purettaessa.

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

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

Yhteyden katkaiseminen onUnmounted-hookissa

Kun komponentti tuhotaan, sulkekaa yhteys socket.disconnect()-funktiolla, jotta avoin socket ei jää vuotamaan näkymästä toiseen siirryttäessä.

import { onUnmounted } from "vue"

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

Kuittaukset

Socket.IO:n hyödyllinen ominaisuus on, että voitte välittää callback-funktion viimeisenä emit-argumenttina, jolloin palvelin voi kutsua sitä vastaanoton vahvistamiseksi. Tämä sopii erinomaisesti ”viesti toimitettu” -käyttöliittymäkokemukseen.

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

Pikatesti

Testatkaa Socket.IO-asiakas-API:a koskevat tietonne.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Tässä oppitunnissa opitte:

socket.io-client-paketin io(url) muodostaa yhteyden http(s)-URL-osoitteen avulla.
socket.on(name, handler) reagoi nimettyihin palvelintapahtumiin.
socket.emit(name, payload) lähettää tapahtumia, ja hyötykuormat sarjallistetaan automaattisesti.
Lisätkää saapuvat tiedot reaktiiviseen ref-taulukkoon, josta templaatti voi näyttää ne.
Siivotkaa kuuntelijat socket.off-funktiolla ja katkaiskaa yhteys socket.disconnect()-funktiolla onUnmounted-hookissa.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Socket.io-asiakasohjelma Vuen kanssa” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Socket.io-asiakasohjelma Vuen kanssa”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Socket.io-asiakasohjelma Vuen kanssa”?

socket.io-client, io(url), socket.on/emit ja socket-tapahtumien reaktiivinen Vue-tila Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Socket.io-asiakasohjelma Vuen kanssa”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

WebSocketin perusteet selaimessa
Socket.io-asiakasohjelma Vuen kanssa
Reaaliaikaisen chat-komponentin rakentaminen
useWebSocket-composable uudelleenyhdistämisellä

← Takaisin: Vue Academy