WebSocket în JavaScript

Cereri HTTP și comunicare Toate browserele moderne, Node.js 22+

O conexiune permanentă, în ambele sensuri, cu un server: chat, notificări, prețuri în timp real.

Sintaxă
const socket = new WebSocket("wss://server");
socket.send(mesaj)
socket.close()

Ce face WebSocket

Spre deosebire de fetch, unde fiecare cerere primește un singur răspuns, un WebSocket rămâne deschis: atât clientul, cât și serverul pot trimite mesaje oricând. Adresa începe cu wss:// (criptat) sau ws://.

Asculți evenimentele open, message (datele sunt în e.data), error și close. send(date) trimite text sau date binare (doar după open), iar close(cod, motiv) închide conexiunea.

Parametri

Parametru Descriere
url Adresa serverului WebSocket.
protocoale Opțional. Un subprotocol sau o listă de subprotocoale.

Ce returnează

Un obiect WebSocket.

Exemple

Exemplul 1: Un mini-chat

const socket = new WebSocket("wss://chat.exemplu.ro");

socket.addEventListener("open", () => {
  console.log("conectat");
  socket.send(JSON.stringify({ tip: "mesaj", text: "Salut!" }));
});

socket.addEventListener("message", (e) => {
  const mesaj = JSON.parse(e.data);
  console.log(`${mesaj.autor}: ${mesaj.text}`);
});

socket.addEventListener("close", (e) => console.log("închis", e.code));

setTimeout(() => socket.close(1000, "gata"), 10000);

Rezultat posibil (depinde de răspunsul serverului)

conectat
Ana: Salut!
Dan: Bună, Ana!
închis 1000

Greșeli frecvente

  • Apelezi send imediat după new WebSocket(...). Conexiunea nu este încă deschisă și primești InvalidStateError; trimite în evenimentul open.
  • Nu tratezi închiderea conexiunii. Rețelele mobile o întrerup des; reconectează-te cu o pauză care crește treptat.

Comenzi înrudite

  • EventSource (Server-Sent Events): Primește un flux de mesaje de la server printr-o conexiune HTTP deschisă, cu reconectare automată.
  • JSON.parse: Transformă un text JSON într-un obiect sau tablou JavaScript.
  • addEventListener: Rulează o funcție când se întâmplă ceva pe pagină: un clic, o tastă, trimiterea unui formular.