Web - WebSocket

WebSockets provide a full-duplex communication channel through a single TCP/IP socket connection.

• Introduction
• Handshake
• websocat
• WebSocket.org
• WebSocket Protocol

Introduction

WebSockets revolutionized the web, turning clunky, slow real-time interactions into sleek, low-latency experiences.

WebSocket is a persistent connection between client and server. WebSockets provide a full-duplex communication channel (allows communication in both directions simultaneously) through a single TCP/IP socket connection.

Thanks to WebSocket connection, client-server communication can happen in real-time (unlike HTTP with timings on each request/response), similar to UDP, but with the reliability of TCP. So it is broadly used in chat, gaming, and stock market browser-based applications.

WebSocket starts from a handshake, followed by basic message framing:

Handshake

A WebSocket connection is established by upgrading an HTTP request.

A client (in most cases, the client means a web browser) that supports WebSocket API and wants to establish a connection should send an HTTP request with WebSocket-specific headers:

The minimum required request looks like this:

GET /socket HTTP/1.1
Host: polkadot.webapi.subscan.io
Connection: keep-alive, upgrade
Upgrade: websocket
Sec-WebSocket-Key: N509hQQwSFGfanhbxP3F6g==
Sec-WebSocket-Version: 13

If everything goes well, the server will answer with «HTTP 101 Switching Protocols» response code with the additional headers:

You can explore WebSocket resources in DevTools and even interact with them in the Console tab through WebSocket API.

Open the WebSocket connection:

const ws = new WebSocket('wss://polkadot.webapi.subscan.io/socket');

On the Network tab, you can watch the WebSocket connection in action:

After the client gets the server response, the WebSocket connection is open to start transmitting message-based data according to WebSocket Protocol. Without going into details, the «message-based data» means a payload/body (in most cases, it is a text) inside messages between client and server.

ws.onmessage = function (e) { console.log(e.data) };

Here, the server constantly sends messages to the client. In this case, text messages are parsed in JSON format, but it does not involve transmission in any particular format

As soon as both sides acknowledge that the WebSocket connection should be closed, the TCP connection is terminated.

ws.close();

websocat

websocat is a versatile command-line tool for testing WebSocket servers.

You can download it from the GitHub releases page.

Download (Windows):

curl -O websocat.exe https://github.com/vi/websocat/releases/download/v4.0.0-alpha2/websocat.x86_64-pc-windows-gnu.exe

Connect to public echo server (Ctrl+d to quit):

 .\websocat.exe ws://ws.vi-server.org/mirror

123
123
ABC
ABC

WebSocket.org

WebSocket.org

WebSocket Echo Server. The WebSocket Echo Server at echo.websocket.org is a free, publicly available testing endpoint that has become an essential tool for developers working with real-time web technologies. This server provides instant echo responses for WebSocket connections, Server-Sent Events (SSE), and standard HTTP requests, making it invaluable for testing, debugging, and validating real-time implementations.

.\websocat.exe wss://echo.websocket.org

WebSocket Protocol

The Websocket Protocol …