Bootcamp i backendudvikling med Node.js · Lektion

Implementering af Socket.IO i Node.js

Integrér Socket.IO i Deres Express-applikation for at aktivere tovejskommunikation baseret på events.

Lektion 3 af 611 trin

Implementering af Socket.IO i Node.js er en gratis Bootcamp i backendudvikling med Node.js-lektion på CoddyKit. Dette er lektion 3 af 6. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Bootcamp i backendudvikling med Node.js, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Bootcamp i backendudvikling med Node.js-kurset indeholder 6 lektioner i alt.

Mød Socket.IO

I den forrige lektion lærte vi om WebSockets til kommunikation i realtid. Selvom rå WebSockets er effektive, kan de være komplekse at administrere, især når det gælder forbindelsesstabilitet og reservefunktioner.

Det er her, Socket.IO kommer ind i billedet! Det er et bibliotek, der muliggør kommunikation mellem webklienter og servere i realtid, i begge retninger og baseret på hændelser. Det fungerer på alle platforme, i alle browsere og på alle enheder, så forbindelserne bliver pålidelige.

Abstraktion: Forenkler WebSocket-API'et.
Pålidelighed: Håndterer afbrudte forbindelser og genforbindelser.
Reservefunktion: Bruger lang polling over HTTP, hvis WebSockets ikke er tilgængelige.
Udsendelse: Sender nemt beskeder til flere klienter.

Projektopsætning

Først forbereder vi vores projekt. Node.js og npm skal være installeret. Åbn din terminal, og opret en ny projektmappe.

Initialiser et Node.js-projekt i den nye mappe, og installer derefter de nødvendige pakker: express til vores webserver og socket.io til kommunikation i realtid.

npm init -y
npm install express socket.io

Vores grundlag: Express-server

Før vi integrerer Socket.IO, opsætter vi en grundlæggende Express-server. Denne server håndterer vores HTTP-anmodninger og fungerer også som grundlag for vores kommunikation i realtid.

Opret en fil med navnet server.js, og tilføj følgende kode. Den opsætter en Express-app, der 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}`);
});

Tilknyt Socket.IO

Lad os nu tilknytte Socket.IO til vores eksisterende Express-HTTP-server. Det gør det muligt for Socket.IO at lytte efter WebSocket-forbindelser på samme port som vores webserver.

Vi importerer biblioteket socket.io og giver vores http-serverinstans til det. Det opretter en Socket.IO-serverinstans, som normalt kaldes 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}`);
});

Klientforbindelseshændelser

Den mest grundlæggende hændelse i Socket.IO er 'connection'. Denne hændelse udløses, hver gang en ny klient opretter forbindelse til Socket.IO-serveren.

Inde i denne hændelseslytter får du et socket-objekt, som repræsenterer den enkelte klient. Du kan derefter lytte efter bestemte hændelser fra klienten eller sende beskeder 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 udsender hændelser

Serveren kan sende (eller »emit«) brugerdefinerede hændelser til klienter. Hvis du vil sende en besked til en bestemt klient, der netop har oprettet forbindelse, bruger du socket.emit().

Denne metode tager et hændelsesnavn (f.eks. 'welcome') og de data, du vil sende med. Klienten lytter derefter efter denne bestemte hændelse.

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 modtager hændelser

Ligesom serveren kan udsende hændelser, kan den også lytte efter hændelser, der sendes fra klienter. Det bruger vi socket.on() til, på samme måde som vi lyttede efter 'connection'.

Når en klient sender en hændelse med et bestemt navn, udføres den tilsvarende lytter på serversiden, som modtager de 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}`);
});

Interaktion på klientsiden

Klienten skal bruge Socket.IO-klientbiblioteket for at oprette forbindelse til vores Socket.IO-server. Du kan inkludere det via et CDN eller npm.

Dette HTML-udsnit viser en grundlæggende klient, der opretter forbindelse, lytter efter hændelsen 'welcome' og sender hændelsen 'clientMessage' til serveren. Gem det 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>

Udsendelse af beskeder

Ofte har du brug for at sende en besked til *alle* tilsluttede klienter, ikke kun den klient, der udløste en hændelse. Det kaldes udsendelse.

I stedet for socket.emit(), som sender til en bestemt socket, bruger vi io.emit() til at sende til alle, der er tilsluttet 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}`);
});

Hurtig kontrol: Hændelsens område

Du har set, hvordan man sender beskeder ved hjælp af både socket.emit() og io.emit(). Hvilken metode vil du bruge til at sende en besked til *alle* tilsluttede klienter?

Besvar den i den interaktive lektion

Opsummering: Socket.IO-integration

Fremragende arbejde! I denne lektion har du lært at integrere Socket.IO i din Node.js Express-applikation, så den får effektive funktioner i realtid.

Opsætning: Installerede express og socket.io.
Server: T ilknyttede Socket.IO til en eksisterende HTTP-server.
Forbindelser: Håndterede klienternes 'connection'- og 'disconnect'-hændelser.
Kommunikation: Brugte socket.emit() til at sende til bestemte klienter og io.emit() til at sende til alle klienter.
Lyttere: Opsatte socket.on() til at modtage brugerdefinerede hændelser fra klienter.

Du har nu grundlaget for at bygge interaktive applikationer i realtid!

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 22
Lektioner: 92

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Implementering af Socket.IO i Node.js” gratis?

Ja — hele teksten til “Implementering af Socket.IO i Node.js” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Bootcamp i backendudvikling med Node.js-kurset, skal du opgradere til CoddyKit PRO. Bootcamp i backendudvikling med Node.js-kurset indeholder 6 lektioner i alt.

Hvad lærer jeg i “Implementering af Socket.IO i Node.js”?

Integrér Socket.IO i Deres Express-applikation for at aktivere tovejskommunikation baseret på events. Du øver dig i Bootcamp i backendudvikling med Node.js med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Bootcamp i backendudvikling med Node.js?

Der kræves ingen tidligere erfaring. Bootcamp i backendudvikling med Node.js på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 6.

Hvor lang tid tager lektionen “Implementering af Socket.IO i Node.js”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Bootcamp i backendudvikling med Node.js-lektion?

Ja. Alle Bootcamp i backendudvikling med Node.js-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Introduktion til WebSockets
WebSockets med NestJS
Implementering af Socket.IO i Node.js
Konfiguration af gateways
Opbygning af en chatapplikation i realtid
Realtidschatapplikation

← Tilbage til Bootcamp i backendudvikling med Node.js