WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi · Oppitunti

Pyyntö–vastaus WebSocketeilla

Oppikaa tekniikoita perinteisen pyyntö–vastaus-semantiiikan simulointiin WebSocket-viestien tunnisteilla ja kuittauksilla.

Oppitunti 2/411 vaihetta

Pyyntö–vastaus WebSocketeilla on ilmainen WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.

Fire-and-forget-mallia pidemmälle

WebSocketit sopivat erinomaisesti reaaliaikaiseen ja jatkuvaan datavirtaan. Esimerkkejä ovat chat-viestit, reaaliaikaiset päivitykset ja pelitilat!

Mutta entä jos tarvitsette perinteisen request-response-vuorovaikutuksen, jossa haette palvelimelta tiettyjä tietoja ja odotatte siihen yhtä vastausta?

Asynkroninen toimintatapa

Toisin kuin HTTP:ssä, jossa jokainen pyyntö saa välittömän ja suoran vastauksen, WebSocketit toimivat asynkronisella ja viestipohjaisella mallilla.

Kun lähetätte viestin WebSocketin kautta, ette automaattisesti tiedä, mikä saapuvista viesteistä on juuri siihen liittyvä vastaus. Se on kuin lähettäisitte kirjeen ja odottaisitte tiettyä vastauskirjettä postipinosta!

Pyyntöjen yksilölliset tunnisteet

Tämän ratkaisemiseksi otamme käyttöön tärkeän käsitteen: viestitunnisteet. Aina kun asiakas lähettää pyynnön, se liittää mukaan yksilöllisen tunnisteen.

Palvelin käsittelee pyynnön ja sisällyttää saman tunnisteen vastaukseensa. Näin asiakas voi yhdistää vastauksen alkuperäiseen pyyntöönsä.

Pyyntöjen seuranta asiakkaalla

Asiakaspuolella tarvitsemme tavan seurata odottavia pyyntöjä ja määrittää, mitä tehdään, kun niiden vastaukset saapuvat. Yleinen toteutustapa on tallentaa kunkin odottavan pyynnön Promise Map-rakenteeseen tai objektiin.

Kokeilkaa tämän perusasetelman suorittamista selaimen konsolissa:

const ws = new WebSocket("ws://localhost:8080");
const pendingRequests = new Map();

ws.onopen = () => console.log("WebSocket Connected!");
ws.onclose = () => console.log("WebSocket Disconnected.");
ws.onerror = (error) => console.error("WebSocket Error:", error);

// This will be updated later to handle responses

Palvelin vastaa tunnisteella

Palvelimen tehtävä on yksinkertainen: kun se vastaanottaa viestin, jossa on id, sen tulee käsitellä viesti ja lähettää vastaus, joka sisältää saman id:n.

Tässä on yksinkertaistettu Node.js-palvelinkoodiesimerkki:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  ws.on('message', message => {
    const request = JSON.parse(message);
    console.log('Received:', request);

    // Assume processing takes time...
    setTimeout(() => {
      const response = {
        id: request.id, // Echo the original ID!
        type: 'response',
        payload: `Hello from server, for request ${request.id}`
      };
      ws.send(JSON.stringify(response));
    }, 1000);
  });
});
console.log('Server started on ws://localhost:8080');

Koko tapahtumaketju käytännössä

Seurataan pyyntö-vastaus-kierrosta:

Asiakas luo yksilöllisen id:n (esimerkiksi 1).
Asiakas tallentaa Promise-olion tunnisteelle id: 1 kohteessa pendingRequests.
Asiakas lähettää viestin {id: 1, type: 'fetchUser', userId: 123}.
Palvelin vastaanottaa pyynnön, käsittelee sen ja valmistelee vastauksen.
Palvelin lähettää viestin {id: 1, type: 'userFetched', data: {...}}.
Asiakas vastaanottaa viestin, hakee tunnisteen id: 1 kohteesta pendingRequests ja ratkaisee sen Promise-olion.

`sendRequest`-funktio

Pyyntöjen lähettämistä voi helpottaa käärimällä logiikan apufunktioon. Tämä funktio luo tunnisteen, tallentaa promisen, lähettää viestin ja palauttaa promisen.

Lisätkää tämä asiakaspuolen koodiin:

let nextRequestId = 0;

function sendRequest(type, payload) {
  const requestId = nextRequestId++;
  const message = { id: requestId, type, payload };

  return new Promise((resolve, reject) => {
    pendingRequests.set(requestId, { resolve, reject, timeoutId: null });
    ws.send(JSON.stringify(message));
    console.log("Sent request:", message);

    // We'll add timeout logic soon!
  });
}

// Example usage (after ws is open):
// sendRequest('getUser', { id: 1 }).then(data => console.log(data));

Palvelimen vastausten käsittely

Päivitetään nyt asiakkaan ws.onmessage-käsittelijä käsittelemään saapuvat palvelinvastaukset oikein ja ratkaisemaan (tai hylkäämään) niihin liittyvät promiset.

Tässä pendingRequests-kartta pääsee todella oikeuksiinsa!

ws.onmessage = (event) => {
  const message = JSON.parse(event.data);
  console.log("Received:", message);

  const { id, error, payload } = message;
  if (pendingRequests.has(id)) {
    const { resolve, reject, timeoutId } = pendingRequests.get(id);
    clearTimeout(timeoutId); // Important: clear the timeout!
    pendingRequests.delete(id); // Remove from tracking

    if (error) {
      reject(new Error(error));
    } else {
      resolve(payload); // Resolve with the response payload
    }
  } else {
    console.warn("Unmatched message ID or broadcast received:", message);
    // Handle messages that are not direct responses to a request (e.g., broadcasts)
  }
};

Aikakatkaisut ja virheenkäsittely

Entä jos palvelin ei koskaan vastaa? Tai yhteys katkeaa?

Odottaville pyynnöille on tärkeää toteuttaa aikakatkaisut. Jos vastausta ei vastaanoteta määritetyn ajan kuluessa, asiakkaan tulee hylätä promise automaattisesti aikakatkaisuvirheellä.

Näin pyynnöt eivät jää odottamaan loputtomasti eivätkä kuluta muistia.

Testaa ymmärryksesi

Mitkä seuraavista ovat olennaisia osia vankan pyyntö-vastaus-mallin toteuttamisessa WebSocketien avulla?

Vastaa interaktiivisessa oppitunnissa

Kertaus: pyyntö-vastaus

Olette oppineet jäljittelemään perinteistä pyyntö-vastaus-mallia WebSocketien avulla!

Yksilölliset viestitunnisteet: Liittäkää tunniste jokaiseen pyyntöön.
Seuranta asiakkaalla: Tallentakaa odottavien pyyntöjen Promise-oliot Map-rakenteeseen.
Palvelimen tunnisteen palautus: Palvelin sisällyttää pyynnön tunnisteen vastaukseensa.
Aikakatkaisut: Toteuttakaa aikakatkaisut, jotta vastaanottamatta jääneet vastaukset käsitellään hallitusti.

Tämän mallin ansiosta WebSocketit soveltuvat erinomaisesti sekä suoratoistoon että yksittäisiin tiedonsiirtoihin!

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Pyyntö–vastaus WebSocketeilla” ilmainen?

Kyllä – oppitunnin ”Pyyntö–vastaus WebSocketeilla” 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 ”Pyyntö–vastaus WebSocketeilla”?

Oppikaa tekniikoita perinteisen pyyntö–vastaus-semantiiikan simulointiin WebSocket-viestien tunnisteilla ja kuittauksilla. 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 2/4.

Kuinka kauan ”Pyyntö–vastaus WebSocketeilla”-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

Julkaisu–tilaus-viestinnän toteuttaminen
Pyyntö–vastaus WebSocketeilla
Kaksisuuntainen suoratoisto ja vuonhallinta
Backpressure ja viestien ryhmittely

← Takaisin: WebSockets- ja reaaliaikaisten järjestelmien ohjelmointi