Node.js-taustakehityksen bootcamp · Oppitunti

WebSocketit NestJS:llä

Ymmärtäkää WebSocketien perusteet ja se, miten NestJS tarjoaa vankan tuen reaaliaikaiseen kaksisuuntaiseen viestintään.

Oppitunti 2/612 vaihetta

WebSocketit NestJS:llä on ilmainen Node.js-taustakehityksen bootcamp-oppitunti CoddyKitissä. Tämä on oppitunti 2/6. 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 Node.js-taustakehityksen bootcamp-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Node.js-taustakehityksen bootcamp-kurssilla on yhteensä 6 oppituntia.

Reaaliaikaisen viestinnän käyttöönotto

Oletteko koskaan pohtineet, miten chat-sovellukset, reaaliaikaiset urheilutulokset tai moninpelit päivittyvät välittömästi? Kyse on reaaliaikaisesta viestinnästä!

Perinteiset verkkopyynnöt muistuttavat lyhyttä puhelua: esitätte kysymyksen, saatte vastauksen ja lopetatte puhelun. Jatkuvat päivitykset edellyttävät jotain pitkäkestoisempaa.

WebSockets tarjoavat tämän jatkuvasti käytettävissä olevan yhteyden, jonka kautta tiedot voivat kulkea vapaasti palvelimen ja asiakasohjelman välillä ilman jatkuvia uusia pyyntöjä.

HTTP:n rajoitukset ja WS

Verrataan, miten HTTP ja WebSockets käsittelevät viestintää:

HTTP: Pyyntö-vastausprotokolla. Asiakasohjelma lähettää pyynnön, palvelin lähettää vastauksen ja yhteys suljetaan. Tämä on tehotonta jatkuviin kaksisuuntaisiin päivityksiin.
WebSockets: Pysyvä kaksisuuntainen viestintäprotokolla. Kun yhteys on muodostettu, sekä asiakasohjelma että palvelin voivat lähettää tietoja milloin tahansa muodostamatta yhteyttä uudelleen.

Ajatelkaa HTTP:tä kirjeen lähettämisenä ja WebSocketeja avoimena puhelinlinjana.

WS-yhteyden muodostuminen

WebSocket-yhteys ei synny itsestään. Se alkaa erityisellä HTTP-pyynnöllä, jota kutsutaan kättelyksi:

Asiakasohjelma lähettää HTTP-pyynnön, jossa on 'Upgrade'-otsake, ja pyytää protokollan vaihtamista.
Jos palvelin tukee WebSocketeja, se vastaa 'Upgrade'-otsakkeella ja vahvistaa vaihdon.
Yhteys päivitetään HTTP:stä WebSocket-protokollaan (suojatussa yhteydessä ws:// tai wss://).

Kättelyn jälkeen raakaa TCP-yhteyttä käytetään kaksisuuntaiseen WebSocket-viestintään.

NestJS ja WebSockets-moduuli

WebSocket-palvelinten rakentaminen alusta alkaen voi olla monimutkaista. NestJS yksinkertaistaa tätä tehokkaalla WebSocket-moduulillaan.

Se tarjoaa tehokkaita abstraktioita, kuten Gateways-komponentit, jotka integroituvat saumattomasti sen modulaariseen arkkitehtuuriin. Näin voitte keskittyä sovelluslogiikkaan matalan tason yhteyksien hallinnan sijaan.

NestJS tukee useita taustalla toimivia WebSocket-kirjastoja, joista @nestjs/platform-ws on yleinen ja helppokäyttöinen vaihtoehto.

NestJS Gateways -komponenttien ymmärtäminen

NestJS:ssä Gateway on luokka, joka on koristeltu annotaatiolla @WebSocketGateway(). Se toimii WebSocket-yhteyksien ensisijaisena sisääntulopisteenä samalla tavoin kuin Controller käsittelee HTTP-pyyntöjä.

Gateways-komponentit kuuntelevat saapuvia WebSocket-tapahtumia eli asiakkaiden lähettämiä viestejä ja voivat myös lähettää tapahtumia takaisin yhdistetyille asiakkaille. Ne ovat keskeinen osa NestJS-sovelluksen reaaliaikaisten toimintojen hallintaa.

Perusmuotoinen Node.js WS -palvelin

Tarkastellaan yksinkertaista WebSocket-palvelinta, joka käyttää ws-kirjastoa Node.js:ssä. Esimerkki havainnollistaa yhteyksien ja viestien kuuntelemisen perusidean, jonka NestJS abstrahoi puolestamme.

Suorittakaa tämä esimerkki ja tarkkailkaa konsolin tulostetta, kun asiakas muodostaa yhteyden. (Voitte muodostaa yhteyden selaimen konsolissa komennolla new WebSocket('ws://localhost:8080').)

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

wss.on('connection', ws => {
  console.log('Client connected!');
  ws.on('message', message => {
    console.log(`Received: ${message}`);
    ws.send(`Echo: ${message}`);
  });
  ws.on('close', () => console.log('Client disconnected.'));
});

console.log('WebSocket server started on port 8080');

NestJS Gateway -komponentin rakentaminen

Gateway-komponentin luomiseksi NestJS:ssä määrittelette luokan ja koristelette sen annotaatiolla @WebSocketGateway(). Tämä annotaatio voi saada valinnaisen portin ja taustalla toimivalle WebSocket-palvelimelle tarkoitetut asetukset.

Tässä on chat-Gatewayn perusrakenne:

import { WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { Server } from 'socket.io'; // Or 'ws' Server type

@WebSocketGateway(8080, { cors: true }) // Listens on port 8080
export class ChatGateway {
  @WebSocketServer()
  server: Server; // Inject the WebSocket server instance

  // Gateway logic will go here
}

Viestien käsittely annotaatioilla

NestJS Gateways -komponentit käyttävät annotaatioita käsitelläkseen asiakkailta saapuvia tiettyjä viestejä eli tapahtumia.

@SubscribeMessage('eventName'): Merkitsee metodin käsittelemään tietynnimisiä viestejä.
@MessageBody(): Poimii saapuvan viestin datasisällön.
@ConnectedSocket(): Poimii yhdistetyn asiakkaan socket-instanssin.

Tämä helpottaa asiakkaiden viestien reitittämistä ja käsittelyä.

import { SubscribeMessage, MessageBody, ConnectedSocket } from '@nestjs/websockets';
import { Socket } from 'socket.io'; // Or 'ws' Socket type

// ... inside ChatGateway class

@SubscribeMessage('sendMessage')
handleMessage(
  @MessageBody() data: string,
  @ConnectedSocket() client: Socket,
): string {
  console.log(`Client ${client.id} sent: ${data}`);
  client.emit('messageReceived', `You said: ${data}`);
  return data; // Can also return observable or promise
}

Yhteyksien elinkaaren hallinta

Gateways-komponentit voivat hallita myös yhteyden muodostamisen ja katkeamisen tapahtumia toteuttamalla elinkaarirajapintoja:

OnGatewayConnection: Logiikkaa varten, joka suoritetaan asiakkaan muodostaessa yhteyden.
OnGatewayDisconnect: Logiikkaa varten, joka suoritetaan asiakkaan katkaistessa yhteyden.
OnGatewayInit: Alustustehtäviä varten, kun Gateway on valmis.

Näiden metodien avulla voitte hallita asiakkaan yhteyden elinkaarta.

import { OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit } from '@nestjs/websockets';
import { Socket } from 'socket.io';

// ... inside ChatGateway class

export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
  afterInit(server: any) {
    console.log('Gateway Initialized!');
  }

  handleConnection(client: Socket, ...args: any[]) {
    console.log(`Client connected: ${client.id}`);
  }

  handleDisconnect(client: Socket) {
    console.log(`Client disconnected: ${client.id}`);
  }
}

Datan lähettäminen asiakkaille

Kun käytössänne on server-instanssi (joka injektoidaan annotaatiolla @WebSocketServer()) tai tietty client-socket, voitte lähettää viestejä:

client.emit('event', data): Lähettää dataa tietylle asiakkaalle.
this.server.emit('event', data): Lähettää datan kaikille yhdistetyille asiakkaille.
this.server.to('roomName').emit('event', data): Lähettää dataa tietyn ”huoneen” asiakkaille (hyödyllinen ryhmäkeskusteluissa).

import { WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';

// ... inside ChatGateway class

@SubscribeMessage('joinRoom')
handleJoinRoom(@MessageBody() room: string, @ConnectedSocket() client: Socket) {
  client.join(room);
  client.emit('joinedRoom', `You joined ${room}`);
  this.server.to(room).emit('roomMessage', `${client.id} joined ${room}`);
}

@SubscribeMessage('broadcastMessage')
handleBroadcast(@MessageBody() message: string) {
  this.server.emit('newMessage', `Broadcast: ${message}`);
}

Pikatarkistus: WS-ominaisuudet

Mitkä seuraavista ovat WebSocket-tiedonsiirron keskeisiä ominaisuuksia?

Vastaa interaktiivisessa oppitunnissa

Kertaus: WebSockets ja NestJS

Tässä oppitunnissa tutustuimme WebSockets-tekniikan perusteisiin ja sen tehokkaaseen integrointiin NestJS:n kanssa.

WebSockets tarjoaa reaaliaikaisille sovelluksille pysyvän kaksisuuntaisen tiedonsiirron.
NestJS yksinkertaistaa WebSocket-kehitystä Gateways-komponenttien avulla.
Gateways-komponentit käyttävät annotaatioita, kuten @WebSocketGateway(), @SubscribeMessage() ja @MessageBody(), sekä elinkaarikutsuja tapahtumien ja yhteyksien hallintaan.
Voitte lähettää viestejä yksittäisille asiakkaille tai useille asiakkaille kerralla injektoidun Server-instanssin avulla.

Seuraavaksi perehdymme tarkemmin Gateway-komponenttien määrittämiseen ja monimutkaisempien tilanteiden käsittelyyn.

Aloita maksutta

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: 22
Oppitunnit: 92

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”WebSocketit NestJS:llä” ilmainen?

Kyllä – oppitunnin ”WebSocketit NestJS:llä” 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 Node.js-taustakehityksen bootcamp-kurssin, päivitä CoddyKit PROhon. Node.js-taustakehityksen bootcamp-kurssilla on yhteensä 6 oppituntia.

Mitä opin oppitunnilla ”WebSocketit NestJS:llä”?

Ymmärtäkää WebSocketien perusteet ja se, miten NestJS tarjoaa vankan tuen reaaliaikaiseen kaksisuuntaiseen viestintään. Harjoittelet Node.js-taustakehityksen bootcamp-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Node.js-taustakehityksen bootcamp-opiskelun?

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

Kuinka kauan ”WebSocketit NestJS:llä”-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ä Node.js-taustakehityksen bootcamp-oppitunnilla?

Kyllä. Jokainen Node.js-taustakehityksen bootcamp-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

WebSocketsin perusteet
WebSocketit NestJS:llä
Socket.IO:n toteuttaminen Node.js:ssä
Gatewayn konfigurointi
Reaaliaikaisen chat-sovelluksen rakentaminen
Reaaliaikainen chat-sovellus

← Takaisin: Node.js-taustakehityksen bootcamp