Node.js-taustakehityksen bootcamp · Oppitunti

Socket.IO:n toteuttaminen Node.js:ssä

Integroitte Socket.IO:n Express-sovellukseenne kaksisuuntaisen, tapahtumapohjaisen viestinnän mahdollistamiseksi.

Oppitunti 3/611 vaihetta

Socket.IO:n toteuttaminen Node.js:ssä on ilmainen Node.js-taustakehityksen bootcamp-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.

Tutustu Socket.IO:hon

Edellisessä oppitunnissa opimme WebSocketsista reaaliaikaisessa viestinnässä. Vaikka suorat WebSocket-yhteydet ovat tehokkaita, niitä voi olla monimutkaista hallita etenkin yhteyden vakauden ja varavaihtoehtojen osalta.

Tässä Socket.IO astuu kuvaan! Se on kirjasto, joka mahdollistaa reaaliaikaisen, kaksisuuntaisen ja tapahtumapohjaisen viestinnän verkkoselainten ja palvelinten välillä. Se toimii kaikilla alustoilla, selaimilla ja laitteilla ja varmistaa luotettavat yhteydet.

Abstraktio: Yksinkertaistaa WebSocket-rajapintaa.
Luotettavuus: Käsittelee yhteyden katkeamiset ja uudelleenyhdistämiset.
Varamenetelmä: Käyttää HTTP:n long-polling-menetelmää, jos WebSockets ei ole käytettävissä.
Broadcasting: Viestien lähettäminen helposti useille asiakkaille.

Projektin valmistelu

Valmistellaan ensin projekti. Tarvitsemme asennetut Node.js:n ja npm:n. Avaa pääte ja luo uusi projektikansio.

Alusta uudessa kansiossa Node.js-projekti ja asenna sitten tarvittavat paketit: express verkkopalvelinta varten ja socket.io reaaliaikaista viestintää varten.

npm init -y
npm install express socket.io

Perustamme: Express-palvelin

Määritetään ennen Socket.IO:n integrointia yksinkertainen Express-palvelin. Tämä palvelin käsittelee HTTP-pyyntömme ja toimii myös reaaliaikaisen viestinnän perustana.

Luo tiedosto nimeltä server.js ja lisää siihen seuraava koodi. Se määrittää Express-sovelluksen kuuntelemaan porttia 3000.

const express = require('express');
const http = require('http'); // Needed for Socket.IO

const app = express();
const server = http.createServer(app); // Create HTTP server
const PORT = 3000;

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Socket.IO:n liittäminen

Liitetään nyt Socket.IO olemassa olevaan Expressin HTTP-palvelimeen. Näin Socket.IO voi kuunnella WebSocket-yhteyksiä samassa portissa kuin verkkopalvelimemme.

Tuomme socket.io-kirjaston ja välitämme sille http-palvelininstanssimme. Tämä luo Socket.IO-palvelininstanssin, jonka nimi on yleensä io.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io'); // Import Server class

const app = express();
const server = http.createServer(app);
const io = new Server(server); // Attach Socket.IO to HTTP server

const PORT = 3000;

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Asiakkaan yhteystapahtumat

Socket.IO:n perustavanlaatuisin tapahtuma on 'connection'. Tämä tapahtuma käynnistyy aina, kun uusi asiakas muodostaa onnistuneesti yhteyden Socket.IO-palvelimeen.

Tämän tapahtumankuuntelijan sisällä käytettävissäsi on socket-objekti, joka edustaa yksittäistä asiakasta. Voit sitten kuunnella kyseisen asiakkaan tiettyjä tapahtumia tai lähettää sille viestejä suoraan.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

// Listen for incoming connections
io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);

  // Listen for disconnection
  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Palvelin lähettää tapahtumia

Palvelin voi lähettää eli emit-toiminnolla välittää asiakkaille mukautettuja tapahtumia. Jos haluamme lähettää viestin juuri yhdistetylle asiakkaalle, käytämme socket.emit()-metodia.

Metodi saa parametrikseen tapahtuman nimen (esimerkiksi 'welcome') ja mahdolliset lähetettävät tiedot. Asiakas kuuntelee sitten tätä tiettyä tapahtumaa.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  
  // Send a 'welcome' event to the newly connected client
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Palvelin vastaanottaa tapahtumia

Aivan kuten palvelin voi lähettää tapahtumia, se voi myös kuunnella asiakkailta lähetettyjä tapahtumia. Käytämme tähän socket.on()-metodia samalla tavalla kuin kuunnellessamme tapahtumaa 'connection'.

Kun asiakas lähettää tietynnimisen tapahtuman, vastaava palvelimen kuuntelija suoritetaan ja saa vastaanottaa asiakkaan lähettämät tiedot.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);

  // Listen for a 'clientMessage' event from this specific client
  socket.on('clientMessage', (message) => {
    console.log(`Message from ${socket.id}: ${message}`);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Asiakaspuolen vuorovaikutus

Yhdistääkseen Socket.IO-palvelimeemme asiakas tarvitsee Socket.IO-asiakaskirjaston. Voit sisällyttää sen CDN:n tai npm:n kautta.

Tämä HTML-katkelma näyttää perusasiakkaan, joka muodostaa yhteyden, kuuntelee 'welcome'-tapahtumaa ja lähettää palvelimelle 'clientMessage'-tapahtuman. Tallenna tämä nimellä index.html.

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO Client</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <h1>Socket.IO Client</h1>
  <p id="status">Connecting...</p>
  <button onclick="sendMessage()">Send Hello</button>
  <ul id="messages"></ul>

  <script>
    const socket = io('http://localhost:3000'); // Connect to your server

    socket.on('connect', () => {
      document.getElementById('status').innerText = 'Connected to server!';
      console.log('Connected to server!');
    });

    socket.on('welcome', (msg) => {
      const item = document.createElement('li');
      item.innerText = `Server: ${msg}`;
      document.getElementById('messages').appendChild(item);
      console.log('Received from server:', msg);
    });

    socket.on('disconnect', () => {
      document.getElementById('status').innerText = 'Disconnected.';
      console.log('Disconnected from server.');
    });

    function sendMessage() {
      const msg = 'Hello from client!';
      socket.emit('clientMessage', msg);
      const item = document.createElement('li');
      item.innerText = `Client: ${msg}`;
      document.getElementById('messages').appendChild(item);
    }
  </script>
</body>
</html>

Viestien broadcast-lähetys

Usein viesti on lähetettävä *kaikille* yhdistetyille asiakkaille, ei vain tapahtuman käynnistäneelle asiakkaalle. Tätä kutsutaan broadcastingiksi.

Käytämme kaikille Socket.IO-palvelimeen yhdistetyille lähettämiseen io.emit()-metodia socket.emit()-metodin sijaan, sillä jälkimmäinen lähettää viestin tietylle socketille.

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

const PORT = 3000;

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);
  socket.emit('welcome', `Welcome, your ID is ${socket.id}!`);
  
  // Broadcast to all clients (except the sender) when a new user connects
  socket.broadcast.emit('user joined', `User ${socket.id} joined.`);

  socket.on('clientMessage', (message) => {
    console.log(`Message from ${socket.id}: ${message}`);
    // Broadcast the message to ALL connected clients
    io.emit('serverMessage', `[${socket.id}] ${message}`); 
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
    // Broadcast to all clients when a user disconnects
    io.emit('user left', `User ${socket.id} left.`);
  });
});

app.get('/', (req, res) => {
  res.send('<h1>Hello from Express!</h1>');
});

server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Pikatarkistus: tapahtuman laajuus

Olet nähnyt, miten viestejä lähetetään sekä socket.emit()- että io.emit()-metodilla. Kumpaa metodia käyttäisit lähettääksesi viestin *kaikille* yhdistetyille asiakkaille?

Vastaa interaktiivisessa oppitunnissa

Kertaus: Socket.IO:n integrointi

Erinomaista työtä! Tässä oppitunnissa opit integroimaan Socket.IO:n Node.js Express -sovellukseesi ja ottamaan käyttöön tehokkaita reaaliaikaisia ominaisuuksia.

Asennus: Asensit paketit express ja socket.io.
Palvelin: Liitit Socket.IO:n olemassa olevaan HTTP-palvelimeen.
Yhteydet: Käsittelit asiakkaan 'connection'- ja 'disconnect'-tapahtumia.
Viestintä: Käytit socket.emit()-metodia viestien lähettämiseen tietyille asiakkaille ja io.emit()-metodia niiden lähettämiseen kaikille asiakkaille.
Kuuntelijat: Määritit socket.on()-kuuntelijan vastaanottamaan mukautettuja tapahtumia asiakkailta.

Sinulla on nyt perusta vuorovaikutteisten ja reaaliaikaisten sovellusten rakentamiseen!

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 ”Socket.IO:n toteuttaminen Node.js:ssä” ilmainen?

Kyllä – oppitunnin ”Socket.IO:n toteuttaminen Node.js:ssä” 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 ”Socket.IO:n toteuttaminen Node.js:ssä”?

Integroitte Socket.IO:n Express-sovellukseenne kaksisuuntaisen, tapahtumapohjaisen viestinnän mahdollistamiseksi. 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 3/6.

Kuinka kauan ”Socket.IO:n toteuttaminen Node.js:ssä”-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