Asiakaspuolen tapahtumien käsittely
Hallinnoikaa selaimessa tehokkaasti yhteyden tapahtumia, kuten `open`, `message`, `error` ja `close`.
Asiakaspuolen tapahtumien käsittely on ilmainen WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-kurssilla on yhteensä 4 oppituntia.
Johdanto: miksi tapahtumat ovat tärkeitä
WebSockets on dynaaminen tekniikka! Toisin kuin yksinkertaiset HTTP-pyynnöt, WebSocket-yhteys pysyy avoinna. Siksi tarvitsette keinon tietää, milloin yhteydessä tapahtuu jotakin.
Tässä tapahtumien käsittely tulee avuksi. Sen avulla selainpohjainen sovelluksenne voi reagoida yhteyden avautumiseen, viestien saapumiseen, virheisiin tai yhteyden sulkeutumiseen.
Yhteys muodostettu: `onopen`
Ensimmäinen tärkeä tapahtuma on open. Se suoritetaan heti, kun WebSocket-yhteys on muodostettu onnistuneesti ja on valmis lähettämään ja vastaanottamaan dataa.
Se on merkki siitä, että voitte aloittaa viestinnän!
Yhteyden avautumisen käsittely
Katsotaan, miten open-tapahtumaa käsitellään. Kun yhteys on valmis, viesti tulostetaan lokiin ja sen jälkeen lähetetään 'Hello'-viesti.
const ws = new WebSocket('wss://echo.websocket.events');
ws.onopen = (event) => {
console.log('Connection established!');
ws.send('Hello WebSocket Server!');
};
// Other event handlers will be added laterDatan vastaanottaminen: `onmessage`
Kun yhteys on muodostettu, palvelin lähettää dataa. message-tapahtuma suoritetaan aina, kun asiakas vastaanottaa dataa palvelimelta.
Vastaanotettu data on event.data-ominaisuudessa. Se voi olla tekstiä tai binääridataa, joka voi vaatia jäsentämistä (esimerkiksi JSON).
Saapuvien viestien käsittely
Lisätään nyt tapahtumankuuntelija saapuville viesteille. Tulostamme lokiin palvelimelta vastaanottamamme datan.
const ws = new WebSocket('wss://echo.websocket.events');
ws.onopen = (event) => {
console.log('Connection established!');
ws.send('Hello WebSocket Server!');
};
ws.onmessage = (event) => {
console.log(`Server says: ${event.data}`);
};
// Other event handlers will be added laterVirheiden sieppaaminen: `onerror`
Kaikki ei aina suju ongelmitta! Verkko-ongelmat, palvelinongelmat tai virheelliset protokollat voivat käynnistää error-tapahtuman. Tämä tapahtuma ilmoittaa ongelmasta, mutta ei aina tarjoa tarkkoja virhetietoja suoraan.
Sisällyttäkää aina virheenkäsittelijä, jotta sovelluksista tulee vikasietoisia.
Yhteysvirheiden käsittely
Näin määritätte onerror-käsittelijän. Se sieppaa yleiset virheet WebSocket-yhteyden elinkaaren aikana.
const ws = new WebSocket('wss://echo.websocket.events');
ws.onopen = (event) => {
console.log('Connection established!');
ws.send('Hello WebSocket Server!');
};
ws.onmessage = (event) => {
console.log(`Server says: ${event.data}`);
};
ws.onerror = (error) => {
console.error('WebSocket encountered an error!');
// More specific error details might be in the browser console
};
// Other event handlers will be added laterYhteys suljettu: `onclose`
Kun asiakas tai palvelin sulkee WebSocket-yhteyden tarkoituksella, close-tapahtuma suoritetaan. Tapahtumaolio sisältää code- ja reason-arvot.
Näiden tietojen avulla voitte ymmärtää, miksi yhteys päättyi. Tämä on tärkeää virheenkorjauksessa tai yhteyden uudelleenmuodostamisen yrittämisessä.
Yhteyden sulkemiseen reagoiminen
Lisätään onclose-käsittelijä. Se tulostaa lokiin sulkemiskoodin ja syyn, joiden avulla yhteyden päättymistä on helpompi ymmärtää.
const ws = new WebSocket('wss://echo.websocket.events');
ws.onopen = (event) => {
console.log('Connection established!');
ws.send('Hello WebSocket Server!');
};
ws.onmessage = (event) => {
console.log(`Server says: ${event.data}`);
};
ws.onerror = (error) => {
console.error('WebSocket encountered an error!');
};
ws.onclose = (event) => {
console.log(`Connection closed! Code: ${event.code}, Reason: ${event.reason || 'No reason provided'}`);
// Common codes: 1000 (normal), 1001 (going away), 1006 (abnormal closure)
};Tapahtumien käsittelyn tarkistus
Olette tutustuneet tärkeimpiin WebSocket-tapahtumiin. Nyt testataan ymmärrystänne!
Kertaus: WebSocket-tapahtumien hallinta
Hienoa työtä! Olette tutustuneet tärkeimpiin asiakaspuolen WebSocket-tapahtumiin:
onopen: Suoritetaan, kun yhteys on valmis.onmessage: Käsittelee palvelimelta saapuvaa dataa.onerror: Sieppaa yhteyteen liittyvät ongelmat.onclose: Ilmaisee, että yhteys on päättynyt, ja tarjoaa koodin sekä syyn.
Näiden tapahtumien ymmärtäminen on olennaista vankkojen ja vuorovaikutteisten reaaliaikaisten sovellusten rakentamisessa!
Opi WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi 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
- 12
- Oppitunnit
- 47
Usein kysytyt kysymykset
Onko oppitunti ”Asiakaspuolen tapahtumien käsittely” ilmainen?
Kyllä – oppitunnin ”Asiakaspuolen tapahtumien käsittely” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-kurssin, päivitä CoddyKit PROhon. WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Asiakaspuolen tapahtumien käsittely”?
Hallinnoikaa selaimessa tehokkaasti yhteyden tapahtumia, kuten `open`, `message`, `error` ja `close`. Harjoittelet WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Asiakaspuolen tapahtumien käsittely”-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ä WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-oppitunnilla?
Kyllä. Jokainen WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-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
- Selaimen WebSocket-API:n perusteet
- Tietojen lähettäminen ja vastaanottaminen
- Asiakaspuolen tapahtumien käsittely
- Automaattinen uudelleenyhdistäminen clientillä