Skip to content

Real-Time Apps with WebSockets

Glossary

82 terms from Real-Time Apps with WebSockets, in plain words, each with the chapter that teaches it.

#

@fastify/websocket
The Fastify plugin, built on the ws library, that handles the WebSocket upgrade. It gives each connection to a route marked `{ websocket: true }` as a `socket`.

A

Acknowledgement (ack)
A reply to one Socket.IO event. The receiver calls the ack function it was given, and the sender gets the answer, as when the board learns the server accepted "Ready" for Dana's order. `emitWithAck` lets the browser `await` it.
Adapter
The part of Socket.IO that decides which sockets an emit reaches. The default adapter knows only one server's sockets, while the Redis adapter publishes emits through Redis so every server delivers them.
API key
A shared secret sent in a header, here `x-api-key`, so non-staff callers like the order-ahead page can place orders without a user token. Without it, anyone could flood the board.
At-least-once delivery
A promise that every event arrives, but possibly more than once. Replay may resend events a client already saw, so the client must cope with duplicates.
Authorization (roles)
Deciding what a signed-in person may do. In the board, the token's `role` (`barista` or `counter`) picks the room, and only baristas may send `order:update`.

B

Broadcast
Sending a message to many connected clients at once, such as every board when a status changes. In Socket.IO, `socket.broadcast.emit` reaches everyone except the sender.
buildApp()
A function that builds and returns the app (and `io`) without listening on a port. `server.ts` and each test call it, so every test gets a fresh app with its own secret and orders.

C

Cache-Control: no-cache
A response header that stops proxies and the browser from storing a response. An event stream sends it so its messages are never reused.
Channel
A named stream of messages in Redis pub/sub, such as `orders`. Subscribers to a channel receive whatever is published to it.
Claims
The data inside a JWT, here the person's name and role, plus `exp`, the expiry time in seconds since 1970. Anyone can read claims, but only the signature stops edits.
Component
In React, a function whose name starts with a capital letter and which returns JSX describing what to show, like the board's `App`.
Connection state recovery
A Socket.IO server option that keeps a briefly dropped socket's id, rooms, data and missed events (for 2 minutes by default) so a client that returns in time gets them back. It doesn't survive a server restart, so you still keep a snapshot.
Content-Type: text/event-stream
The header that tells the browser a response is a server-sent events stream. The body is `field: value` lines, with each message ended by a blank line.
CORS
The browser rule that decides which other origins may make requests to a server. Socket.IO's `cors` option lists the sites allowed, such as the React app on `http://localhost:5173`.
Cross-site WebSocket hijacking
An attack where another site's page opens a WebSocket to your server and the visitor's cookies sign it in. Sending a token in `auth` and checking the origin avoid it.
curl -N
The curl flag that turns off output buffering, so each message of an open stream prints as it arrives.
Custom hook
A function whose name starts with `use` and that calls other React hooks. It lets you move socket code out of `App` into something like `useOrders()`.

D

Dependency array
The second argument to `useEffect`. An empty array `[]` means the effect runs once, when the component first appears. Leaving it out makes the effect run after every render.
Disconnect reason
The first argument of the `"disconnect"` handler, saying why the connection closed. Socket.IO retries after `"transport close"` and `"ping timeout"`, but not after `"io client disconnect"` or `"io server disconnect"`.

E

Effect cleanup
The function an effect returns, which React runs when the component goes away. The board uses it to disconnect its socket so no extra connections are left behind.
Emit
Sending a named event. An `EventEmitter` emits to local listeners, and in Socket.IO `socket.emit` sends to one client while `io.emit` sends to all.
Environment variables (.env)
Settings such as `JWT_SECRET` that the program reads from `process.env`, loaded from a `.env` file with `node --env-file=.env`. Never commit `.env` to Git.
Event id
A number given to each event, one higher than the last. A client reports the highest one it has seen so the server can replay only newer events.
EventEmitter
Node's built-in tool for sending and listening to named events inside one program. One part of the code calls `emit` with a name and data, and every listener registered with `on` for that name receives it, which is useful for sharing one change with many open connections.
EventSource
The browser API that opens a server-sent events stream with `new EventSource(url)`. It reconnects by itself and sends `Last-Event-ID` after a drop.
Exponential backoff
Waiting longer after each failed reconnect attempt, here about 1, 2, 4, then up to 5 seconds, with some randomness. It keeps many boards from hitting a restarted server all at once.

F

Fallback
Socket.IO's backup path: if WebSockets are blocked, the same events travel over HTTP long polling.
Fan-out
Sending one event on to every listener, as the `EventEmitter` does when one status change reaches every open tracker stream.
Fastify
A Node web framework for building HTTP routes and APIs. Real-time libraries such as Socket.IO and WebSocket servers can attach to its underlying HTTP server.
Frame
The small packet a WebSocket sends. Each holds a message or part of one and says whether it's text or binary.
Full duplex
Both sides can send at any moment, even at the same time. This is how a WebSocket works.

H

Handshake
The first exchange when a client connects. In Socket.IO the client can send data such as a name or token in the handshake's `auth` object, and the server reads it as `socket.handshake.auth`.
Heartbeat
Regular small ping messages from the server that a live client answers with a pong. A socket that misses its pong is treated as dead and closed, and the pings also keep proxies from closing idle connections.
HTTP status codes
Numbers that say how an HTTP request went: 101 Switching Protocols (server accepts a WebSocket upgrade, after which the connection carries frames), 201 Created (new order made), 400 (bad request body) and 401 Unauthorized (wrong or missing credentials).
HTTP/2
Newer HTTP versions. Over HTTP/1.1 a browser opens at most 6 connections per site, so a seventh open EventSource tab hangs. HTTP/2 carries many streams over one connection and removes that limit.

I

Idempotent
Safe to apply twice, because the second time changes nothing. The board's handlers must be idempotent since replay may deliver an event again.

J

JSON Schema
A description of what a JSON body must look like, such as required string fields. Fastify uses it to reject bad requests with a 400 before the handler runs.
JSX
HTML-like tags written inside JavaScript in React. Curly braces hold any JavaScript value, such as `{order.name}`.
JWT (JSON Web Token)
A signed token holding claims like a name and role. Mia gets one from `POST /login`, and the server checks it when her socket connects.

K

key (React)
A prop that never changes, such as the order id, given to each item of a list so React can tell items apart when the list changes.

L

Last-Event-ID
The header a reconnecting `EventSource` sends with the last `id:` it saw. The server can then resend anything newer.
Latency
The delay between something happening, like Lena's order arriving, and the user seeing it.
Load balancer
A server in front of several app servers that passes each new connection to one of them, so the shop shows one address.
Long polling
A polling variant where the server holds each request open until it has news (or about 30 seconds pass), then the client asks again at once. Socket.IO uses it as a fallback.

M

Memory leak
Memory a program keeps but never uses again, so it keeps growing. Forgetting to call `off` for closed streams leaves listeners behind and causes one.
Middleware
A function that runs before a connection or request is handled and can refuse it. Socket.IO middleware checks the token once, before `"connection"` fires.

N

Named events
Socket.IO messages identified by a name, like `order:status`. You `emit` with the name and listen with `on`, and JSON-compatible data passes without `JSON.stringify`.

O

Origin
The scheme, host and port a page came from, such as `http://localhost:5173`. Browsers send it with WebSocket connections, so the server can refuse pages from other sites.

P

Port 0
Asking the system to pick any free port. Tests listen on port 0 so they never clash with a server already running on 3000.
Presence
Knowing who is connected right now, like a green dot in a chat app. Because one person can have several connections open, such as two tabs, it is usually tracked by counting connections per name so the person stays online until their last connection closes.
Proxy
A server between client and app that forwards traffic. Proxies may close silent connections, which is why heartbeats and comment lines help.
Pub/sub
A pattern where senders publish to a named channel and every current subscriber gets a copy. Redis pub/sub doesn't store messages, so an absent subscriber misses them.

R

Rate limiting
Capping what a client may send. The board lowers `maxHttpBufferSize` and disconnects a socket that sends more than 20 events in a second.
readyState
A WebSocket client property saying whether the connection is CONNECTING, OPEN, CLOSING or CLOSED. Check it is OPEN before sending.
Real time
Updates that reach the screen within about a second, without the user asking for them.
Redis
An in-memory data server that programs reach over the network to store and read data quickly, often for caching. Its pub/sub feature lets servers publish messages to named channels and pass them to every current subscriber, so several servers can share events.
redis-cli
The command-line client that comes with Redis. `redis-cli ping` checks the server answers `PONG`, and `SUBSCRIBE` and `PUBLISH` try pub/sub by hand.
Replay
Sending a reconnecting client the events it missed, using the last event id it saw. The server falls back to a snapshot if its log is too short.
reply.hijack()
A Fastify call that stops Fastify managing a reply so you can write it yourself. `reply.raw` is Node's own response, and `write` sends pieces of the body while leaving the response open.
Room
A named group of sockets on the server, such as `bar` or `counter`. You send an event to a room with `io.to(room).emit`, and a room exists only while it has a socket in it.

S

Server-sent events (SSE)
One long HTTP response that the server keeps open and writes messages into. Messages flow server to client only, and the browser reconnects on its own.
Short polling
The client asks the server for news again and again on a timer. It is simple, but most requests return nothing new and updates arrive late by up to the interval.
Snapshot
The full current state, sent when a client connects, such as the whole `orders` list. The client replaces what it had, so it is always correct.
socket.data
An object Socket.IO gives every socket for your own use. Whatever you store there, such as the verified user, stays until it disconnects.
socket.id
A random, unique id each Socket.IO connection gets. Every socket is also in a private room named after it, so `io.to(socket.id).emit(...)` messages that one client.
Socket.IO
A library on top of WebSockets that adds named events, acks, rooms, automatic reconnecting and a long-polling fallback. Both client and server must use it.
SSE comment line
A line starting with a colon in an event stream, which the client ignores. Servers write one such as `: ping` about every 15 seconds so proxies don't close a silent connection.
State (React)
Data a component keeps. `useState` gives the value and a setter, and calling the setter stores a new value and redraws the page.
Sticky sessions
A load balancer setting that sends each client to the same server every time. Socket.IO's long-polling start needs it, because the polling requests must reach the server that holds the connection's state.
StrictMode
React's development mode that runs every effect, its cleanup and the effect again, to expose effects that don't clean up. A production build runs each effect once.

T

TLS
The encryption used by `https://` and `wss://`, so messages and tokens can't be read on the way.
transports
A Socket.IO client option listing how to connect. `["websocket"]` skips the long-polling start, so there is one connection to one server, at the cost of the fallback.

U

Upgrade
The first HTTP GET of a WebSocket, which asks to switch protocols. The server answers 101, and the connection then carries frames.
useEffect
A React hook that runs a function after the component appears, where you start things outside React such as a socket. Its returned function is the cleanup.

V

Valkey
An open-source fork of Redis, created in 2024 after Redis changed its license. It uses the same protocol, so Redis client code and tools work with it unchanged.
Vite
A development server and build tool for front-end apps. It serves the React board at port 5173, turns JSX into plain JavaScript and exposes `VITE_` settings.

W

waitFor()
A small test helper that turns "the next time this event arrives" into a Promise you can `await`. Start waiting before the action that causes the event.
WebSocket
One long-lived connection on which both client and server can send messages at any time. It starts as an HTTP upgrade request and then uses its own protocol.
WebTransport
A newer browser API built on HTTP/3 for real-time, low-latency communication between a browser and a server. Browser and server support is still uneven, so it is wise to check support before relying on it.
ws
The most used Node.js WebSocket server library, which `@fastify/websocket` is built on.
wss://
The URL scheme for WebSocket over TLS, as `https://` is HTTP over TLS. Use it in production so messages and tokens are encrypted; `ws://` is the unencrypted form.