WebSockets: The Complete Guide to Real-Time Bidirectional Communication

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
Origin: https://example.com

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

const socket = new WebSocket('wss://api.example.com/ws');

// Connection opened
socket.addEventListener('open', () => {
  console.log('Connected');
  socket.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
});

// Receive messages
socket.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
});

// Handle errors
socket.addEventListener('error', (event) => {
  console.error('WebSocket error:', event);
});

// Connection closed
socket.addEventListener('close', (event) => {
  console.log(`Closed: code=${event.code} reason=${event.reason}`);
});

// Send data (text or binary)
socket.send('Hello server');
socket.send(new Uint8Array([1, 2, 3]));

import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (ws, req) => {
  console.log('Client connected from', req.socket.remoteAddress);

  ws.on('message', (data) => {
    const message = JSON.parse(data.toString());
    // Broadcast to all connected clients
    for (const client of wss.clients) {
      if (client.readyState === 1) {
        client.send(JSON.stringify(message));
      }
    }
  });

  ws.on('close', () => console.log('Client disconnected'));
});

import asyncio
import websockets

async def handler(websocket):
    async for message in websocket:
        # Echo back to sender
        await websocket.send(f"Echo: {message}")

async def main():
    async with websockets.serve(handler, "localhost", 8080):
        await asyncio.Future()  # Run forever

asyncio.run(main())

package main

import (
    "log"
    "net/http"
    "github.com/gorilla/websocket"
)

var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool { return true },
}

func handler(w http.ResponseWriter, r *http.Request) {
    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Println("Upgrade error:", err)
        return
    }
    defer conn.Close()

    for {
        msgType, msg, err := conn.ReadMessage()
        if err != nil {
            break
        }
        conn.WriteMessage(msgType, msg)
    }
}

func main() {
    http.HandleFunc("/ws", handler)
    log.Fatal(http.ListenAndServe(":8080", nil))
}

function createWebSocket(url) {
  let ws;
  let retries = 0;
  const maxRetries = 10;
  const baseDelay = 1000; // 1 second

  function connect() {
    ws = new WebSocket(url);

    ws.addEventListener('open', () => {
      retries = 0; // Reset on successful connection
    });

    ws.addEventListener('close', (event) => {
      if (event.code !== 1000 && retries < maxRetries) {
        const delay = Math.min(baseDelay * 2 ** retries, 30000);
        retries++;
        setTimeout(connect, delay);
      }
    });

    return ws;
  }

  return connect();
}

// Ping every 30 seconds, terminate if no pong within 10 seconds
const interval = setInterval(() => {
  for (const ws of wss.clients) {
    if (!ws.isAlive) {
      ws.terminate();
      continue;
    }
    ws.isAlive = false;
    ws.ping();
  }
}, 30000);

wss.on('connection', (ws) => {
  ws.isAlive = true;
  ws.on('pong', () => { ws.isAlive = true; });
});

wss.on('close', () => clearInterval(interval));

const channels = new Map(); // channel -> Set<WebSocket>

wss.on('connection', (ws) => {
  ws.on('message', (raw) => {
    const msg = JSON.parse(raw.toString());

    if (msg.type === 'subscribe') {
      if (!channels.has(msg.channel)) channels.set(msg.channel, new Set());
      channels.get(msg.channel).add(ws);
    }

    if (msg.type === 'publish') {
      const subscribers = channels.get(msg.channel);
      if (!subscribers) return;
      const payload = JSON.stringify({ channel: msg.channel, data: msg.data });
      for (const client of subscribers) {
        if (client.readyState === 1) client.send(payload);
      }
    }
  });

  ws.on('close', () => {
    for (const subs of channels.values()) subs.delete(ws);
  });
});

// Client: send binary
const buffer = new Float32Array([1.5, 2.7, 3.14]);
socket.binaryType = 'arraybuffer';
socket.send(buffer.buffer);

// Client: receive binary
socket.addEventListener('message', (event) => {
  if (event.data instanceof ArrayBuffer) {
    const floats = new Float32Array(event.data);
    console.log('Received floats:', floats);
  }
});