Viestien lähettäminen ja vastaanottaminen
Vaihtakaa dataa send-metodilla ja onmessage-tapahtumalla.
Viestien lähettäminen ja vastaanottaminen on ilmainen JavaScript 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 JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.
Tekstin lähettäminen
Kun yhteys on avattu, komento socket.send(string) lähettää tekstiviestin palvelimelle.
socket.onopen = () => {
socket.send("ping");
};Vastaanottaminen onmessage-tapahtumalla
onmessage suoritetaan jokaisesta saapuvasta kehyksestä. Tiedot ovat ominaisuudessa event.data.
socket.onmessage = (event) => {
console.log("Received:", event.data);
};JSON-kehystys
WebSocketit välittävät raakoja merkkijonoja. Jos haluatte lähettää rakenteisia tietoja, sarjallistakaa ne komennolla JSON.stringify ja jäsentäkää ne vastaanotettaessa.
socket.send(JSON.stringify({ type: "chat", text: "hi" }));
socket.onmessage = (e) => {
const msg = JSON.parse(e.data);
console.log(msg.type, msg.text);
};Viestityypin reititys
Yleinen toimintamalli on lisätä viestiin type-kenttä ja ohjata käsittely sen perusteella.
socket.onmessage = (e) => {
const msg = JSON.parse(e.data);
switch (msg.type) {
case "chat": showChat(msg); break;
case "presence": updatePresence(msg); break;
}
};Binääritietojen lähettäminen
send hyväksyy binäärisisältöä varten myös tyypit ArrayBuffer, tyypitetyt taulukot ja Blob.
const bytes = new Uint8Array([1, 2, 3, 4]);
socket.send(bytes.buffer);Binäärin vastaanottaminen
Kun binaryType = "arraybuffer", event.data on ArrayBuffer, jonka voitte kääriä tyypitettyyn taulukkoon.
socket.binaryType = "arraybuffer";
socket.onmessage = (e) => {
if (e.data instanceof ArrayBuffer) {
const view = new Uint8Array(e.data);
console.log(view.length);
}
};Backpressure ja bufferedAmount
bufferedAmount ilmoittaa jonoon asetettujen mutta vielä lähettämättömien tavujen määrän. Tarkistakaa sen arvo ennen kuin lähetätte socketiin valtavan määrän tietoa ja vältätte näin muistin rajoittamattoman kasvun.
if (socket.bufferedAmount < 1_000_000) {
socket.send(payload);
}Heartbeat-viestit
Lähettäkää säännöllisiä ping-viestejä, jotta molemmat osapuolet tietävät yhteyden olevan aktiivinen eivätkä välityspalvelimet sulje käyttämättömiä yhteyksiä.
setInterval(() => {
if (socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify({ type: "ping" }));
}
}, 30000);Pyyntö–vastaus WebSocketin kautta
Merkitkää lähtevät viestit tunnisteella ja ratkaiskaa odottava promise, kun vastaava vastaus saapuu.
const pending = new Map();
function request(payload) {
const id = crypto.randomUUID();
socket.send(JSON.stringify({ id, ...payload }));
return new Promise((res) => pending.set(id, res));
}
socket.onmessage = (e) => {
const msg = JSON.parse(e.data);
if (pending.has(msg.id)) { pending.get(msg.id)(msg); pending.delete(msg.id); }
};Viestien jonottaminen ennen yhteyden avaamista
Jos saatatte lähettää viestejä ennen socketin avautumista, puskuroikaa viestit ja lähettäkää ne onopen-tapahtumassa.
const queue = [];
function safeSend(data) {
if (socket.readyState === WebSocket.OPEN) socket.send(data);
else queue.push(data);
}
socket.onopen = () => { queue.forEach((d) => socket.send(d)); queue.length = 0; };Saapuvien tietojen tarkistaminen
Älkää koskaan luottako verkosta saapuviin tietoihin. Käsitelkää JSON.parse try/catch-rakenteessa ja tarkistakaa tietojen rakenne ennen niiden käyttöä.
socket.onmessage = (e) => {
let msg;
try { msg = JSON.parse(e.data); }
catch { return; }
if (typeof msg.type !== "string") return;
handle(msg);
};Pikatarkistus
Testatkaa viestien käsittelyä.
Kertaus: lähettäminen ja vastaanottaminen
Lähetitte tekstiä ja binääritietoja, käsittelitte tapahtuman onmessage, kehystitte tiedot JSON-muotoon, reitititte viestit tyypin perusteella, seurasitte backpressurea ominaisuuden bufferedAmount avulla, lisäsitte heartbeat-viestit ja jonotitte viestit ennen socketin avautumista. Seuraavaksi: yhteyden elinkaari.
Opi JavaScript 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
- 59
- Oppitunnit
- 200
Usein kysytyt kysymykset
Onko oppitunti ”Viestien lähettäminen ja vastaanottaminen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Viestien lähettäminen ja vastaanottaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Viestien lähettäminen ja vastaanottaminen”?
Vaihtakaa dataa send-metodilla ja onmessage-tapahtumalla. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript 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 ”Viestien lähettäminen ja vastaanottaminen”-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ä JavaScript Academy-oppitunnilla?
Kyllä. Jokainen JavaScript 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
- WebSocket-yhteyden avaaminen
- Viestien lähettäminen ja vastaanottaminen
- Yhteyden elinkaari ja virheet
- Uudelleenyhdistämisstrategiat