WebSockets Basics

WebSocket connection and real-time communication.

Client Side (JavaScript)

Create connection
const ws = new WebSocket("ws://localhost:8080");

Connection opened
ws.addEventListener("open", (event) => {
  console.log("Connected");
  ws.send("Hello Server!");
});

Receive messages
ws.addEventListener("message", (event) => {
  console.log("Received:", event.data);
});

Handle errors
ws.addEventListener("error", (error) => {
  console.error("WebSocket error:", error);
});

Connection closed
ws.addEventListener("close", (event) => {
  console.log("Disconnected");
});

Send Data

Send string
ws.send("Hello");

Send JSON
ws.send(JSON.stringify({ type: "message", text: "Hello" }));

Send binary data
const buffer = new ArrayBuffer(8);
ws.send(buffer);

Close connection
ws.close();

Connection States

Check ready state
ws.readyState

0 CONNECTING - connecting
1 OPEN - connection open
2 CLOSING - connection closing
3 CLOSED - connection closed

Wait for connection
if (ws.readyState === WebSocket.OPEN) {
  ws.send("message");
}

Node.js Server (ws)

const WebSocket = require("ws");

Create server
const wss = new WebSocket.Server({ port: 8080 });

Handle connections
wss.on("connection", (ws) => {
  console.log("Client connected");

  // Receive messages
  ws.on("message", (data) => {
    console.log("Received:", data);
    ws.send("Echo: " + data);
  });

  // Handle disconnect
  ws.on("close", () => {
    console.log("Client disconnected");
  });
});