WebSocket Tester

Internal Mechanics (Deep Dive)

The WebSocket protocol involves two major phases: the Handshake and the Data Transfer.

1. The Handshake

Every WebSocket connection starts with an HTTP request. The client sends a GET request to the server with special headers:

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

If the server accepts the connection, it computes a response key using the `Sec-WebSocket-Key` + a magic string GUID, and replies with 101 Switching Protocols.

2. Data Framing

Once upgraded, communication switches to binary frames. Each frame has a specific structure:

Implementing WebSockets

WebSockets are supported in almost all modern languages. Here are examples for the most common stacks.

const ws = new WebSocket('wss://echo.websocket.org');

ws.onopen = () => {
  console.log('Connected!');
  ws.send('Hello Server');
};

ws.onmessage = (event) => {
  console.log('Received:', event.data);
};

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('something');
});

var upgrader = websocket.Upgrader{} 

func handler(w http.ResponseWriter, r *http.Request) {
    conn, _ := upgrader.Upgrade(w, r, nil)
    defer conn.Close()
    
    for {
        _, msg, _ := conn.ReadMessage()
        conn.WriteMessage(websocket.TextMessage, msg)
    }
}

import asyncio
import websockets

async def hello():
    async with websockets.connect("wss://echo.websocket.org") as websocket:
        await websocket.send("Hello world!")
        await websocket.recv()

asyncio.run(hello())

Troubleshooting & Status Codes

When a connection closes, it always provides a code explaining why. Understanding these codes is key to debugging.