Esercizi WebSocket JavaScript

Ecco degli esercizi con soluzione per praticare l’uso dei WebSocket in JavaScript.

Esercizio 1: Connessione WebSocket

Stabilire una connessione WebSocket con un server e loggare lo stato della connessione.

const socket = new WebSocket("ws://echo.websocket.org");

socket.addEventListener("open", function (event) {
  console.log("Connessione aperta:", event);
});

socket.addEventListener("close", function (event) {
  console.log("Connessione chiusa:", event);
});

socket.addEventListener("error", function (event) {
  console.error("Errore:", event);
});

Esercizio 2: Inviare e Ricevere Messaggi

Inviare un messaggio al server WebSocket e ricevere una risposta.

const socket = new WebSocket("ws://echo.websocket.org");

socket.addEventListener("open", function () {
  socket.send("Ciao, server!");
});

socket.addEventListener("message", function (event) {
  console.log("Messaggio ricevuto:", event.data);
});

Esercizio 3: Gestione degli Errori

Gestire gli errori di connessione WebSocket e loggare il messaggio di errore.

const socket = new WebSocket("ws://invalid.websocket.org");

socket.addEventListener("error", function (event) {
  console.error("Errore di connessione:", event);
});

Esercizio 4: Riconnessione Automatica

Implementare una logica di riconnessione automatica per un WebSocket quando la connessione viene chiusa.

let socket;

function connect() {
  socket = new WebSocket("ws://echo.websocket.org");

  socket.addEventListener("open", function () {
    console.log("Connessione aperta");
  });

  socket.addEventListener("close", function () {
    console.log("Connessione chiusa, riconnessione in corso...");
    setTimeout(connect, 1000);
  });

  socket.addEventListener("error", function (event) {
    console.error("Errore:", event);
  });

  socket.addEventListener("message", function (event) {
    console.log("Messaggio ricevuto:", event.data);
  });
}

connect();

Esercizio 5: WebSocket con JSON

Inviare e ricevere messaggi JSON tramite un WebSocket.

const socket = new WebSocket("ws://echo.websocket.org");

socket.addEventListener("open", function () {
  const message = { tipo: "saluto", contenuto: "Ciao, server!" };
  socket.send(JSON.stringify(message));
});

socket.addEventListener("message", function (event) {
  const data = JSON.parse(event.data);
  console.log("Messaggio JSON ricevuto:", data);
});

Esercizio 6: WebSocket con Ping/Pong

Implementare un ping/pong per verificare la connessione WebSocket.

const socket = new WebSocket("ws://echo.websocket.org");

socket.addEventListener("open", function () {
  console.log("Connessione aperta");
  setInterval(function () {
    socket.send("ping");
  }, 5000);
});

socket.addEventListener("message", function (event) {
  if (event.data === "ping") {
    console.log("Ping ricevuto, rispondo con pong");
    socket.send("pong");
  } else {
    console.log("Messaggio ricevuto:", event.data);
  }
});

socket.addEventListener("close", function () {
  console.log("Connessione chiusa");
});

Esercizio 7: Chiusura di un WebSocket

Chiudere una connessione WebSocket in modo pulito.

const socket = new WebSocket("ws://echo.websocket.org");

socket.addEventListener("open", function () {
  console.log("Connessione aperta");
  socket.send("Ciao, server!");

  // Chiudere la connessione dopo aver inviato il messaggio
  socket.close(1000, "Chiusura normale");
});

socket.addEventListener("close", function (event) {
  console.log("Connessione chiusa:", event);
});