Bootcamp i backendutvikling med Node.js · leksjon

Implementere Socket.IO i Node.js

Integrer Socket.IO i Express-applikasjonen for å muliggjøre toveis, hendelsesbasert kommunikasjon.

Leksjon 3 av 611 trinn

Implementere Socket.IO i Node.js er en gratis leksjon i Bootcamp i backendutvikling med Node.js på CoddyKit. Dette er leksjon 3 av 6. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Bootcamp i backendutvikling med Node.js, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Bootcamp i backendutvikling med Node.js inneholder totalt 6 leksjoner.

Bli kjent med Socket.IO

I den forrige leksjonen lærte vi om WebSockets for sanntidskommunikasjon. Selv om rå WebSockets er kraftige, kan de være kompliserte å administrere, særlig når det gjelder forbindelsesstabilitet og reservealternativer.

Det er her Socket.IO kommer inn! Det er et bibliotek som muliggjør sanntidskommunikasjon i begge retninger og basert på hendelser mellom webklienter og servere. Det fungerer på alle plattformer, i alle nettlesere og på alle enheter, og sørger for pålitelige forbindelser.

Abstraksjon: Forenkler WebSocket-API-et.
Pålitelighet: Håndterer frakoblinger og nye tilkoblinger.
Reservealternativ: Bruker HTTP long-polling hvis WebSockets ikke er tilgjengelig.
Utsending: Gjør det enkelt å sende meldinger til flere klienter.

Prosjektoppsett

Først klargjør vi prosjektet. Node.js og npm må være installert. Åpne terminalen og opprett en ny prosjektmappe.

Inne i den nye mappen initialiserer De et Node.js-prosjekt og installerer deretter de nødvendige pakkene: express for webserveren og socket.io for sanntidskommunikasjon.

npm init -y
npm install express socket.io

Grunnlaget vårt: Express-serveren

Før vi integrerer Socket.IO, setter vi opp en enkel Express-server. Denne serveren håndterer HTTP-forespørslene våre og fungerer også som grunnlaget for sanntidskommunikasjonen.

Opprett en fil med navnet server.js og legg til følgende kode. Dette setter opp en Express-app som lytter på port 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}`);
});

Koble til Socket.IO

Nå kobler vi Socket.IO til den eksisterende Express HTTP-serveren. Dermed kan Socket.IO lytte etter WebSocket-forbindelser på samme port som webserveren.

Vi importerer biblioteket socket.io og sender http-serverinstansen vår til det. Dette oppretter en Socket.IO-serverinstans som vanligvis kalles 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}`);
});

Hendelser ved klienttilkobling

Den mest grunnleggende hendelsen i Socket.IO er 'connection'. Denne hendelsen utløses hver gang en ny klient kobler seg til Socket.IO-serveren.

Inne i denne hendelseslytteren får De et socket-objekt som representerer den enkelte klienten. Deretter kan De lytte etter bestemte hendelser fra klienten eller sende meldinger direkte til den.

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}`);
});

Serveren sender ut hendelser

Serveren kan sende (eller «emit») egendefinerte hendelser til klienter. For å sende en melding til en bestemt klient som nettopp koblet seg til, bruker vi socket.emit().

Denne metoden tar et hendelsesnavn (for eksempel 'welcome') og eventuelle data De vil sende med. Klienten lytter deretter etter denne bestemte hendelsen.

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}`);
});

Serveren mottar hendelser

Akkurat som serveren kan sende ut hendelser, kan den også lytte etter hendelser som sendes fra klienter. Til dette bruker vi socket.on(), på samme måte som da vi lyttet etter 'connection'.

Når en klient sender en hendelse med et bestemt navn, kjøres den tilsvarende lytteren på serversiden og mottar eventuelle data klienten sendte.

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}`);
});

Interaksjon på klientsiden

For å koble til Socket.IO-serveren trenger klienten Socket.IO-klientbiblioteket. De kan inkludere det via en CDN eller npm.

Dette HTML-utdraget viser en enkel klient som kobler til, lytter etter hendelsen 'welcome' og sender hendelsen 'clientMessage' til serveren. Lagre dette som 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>

Utsending av meldinger

Ofte trenger De å sende en melding til *alle* tilkoblede klienter, ikke bare den som utløste en hendelse. Dette kalles utsending.

I stedet for socket.emit(), som sender til en bestemt socket, bruker vi io.emit() for å sende til alle som er koblet til Socket.IO-serveren.

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}`);
});

Rask kontroll: Hendelsesomfang

De har sett hvordan meldinger sendes med både socket.emit() og io.emit(). Hvilken metode vil De bruke for å sende en melding til *alle* tilkoblede klienter?

Besvar den i den interaktive leksjonen

Oppsummering: Integrering av Socket.IO

Utmerket arbeid! I denne leksjonen har De lært å integrere Socket.IO i Node.js Express-applikasjonen Deres, slik at De kan legge til kraftige sanntidsfunksjoner.

Oppsett: Installerte express og socket.io.
Server: Koble Socket.IO til en eksisterende HTTP-server.
Forbindelser: Håndterte hendelsene 'connection' og 'disconnect' for klienter.
Kommunikasjon: Brukte socket.emit() til å sende til bestemte klienter og io.emit() til å sende til alle.
Lyttere: Satte opp socket.on() for å motta egendefinerte hendelser fra klienter.

De har nå grunnlaget for å bygge interaktive sanntidsapplikasjoner!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 22
Leksjoner: 92

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Implementere Socket.IO i Node.js» gratis?

Ja – hele teksten i «Implementere Socket.IO i Node.js» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Bootcamp i backendutvikling med Node.js-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Bootcamp i backendutvikling med Node.js inneholder totalt 6 leksjoner.

Hva lærer jeg i «Implementere Socket.IO i Node.js»?

Integrer Socket.IO i Express-applikasjonen for å muliggjøre toveis, hendelsesbasert kommunikasjon. Du øver på Bootcamp i backendutvikling med Node.js med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Bootcamp i backendutvikling med Node.js?

Ingen tidligere erfaring er nødvendig. Bootcamp i backendutvikling med Node.js på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 6.

Hvor lang tid tar leksjonen «Implementere Socket.IO i Node.js»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Bootcamp i backendutvikling med Node.js-leksjonen?

Ja. Alle Bootcamp i backendutvikling med Node.js-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Bootcamp i backendutvikling med Node.js