Inside Real-Time Systems

WebSockets, Events, and Collaborative Applications

DY Patil College of Engineering, Akurdi, Pune·27 October 2026

or press

Viewer AViewer B

124/3124/3

About me

Career, from college to Postman

2022GraduatedDY Patil College of Engineering

2022–24UpraisedSoftware Engineer

2024–25ZomatoSenior Software Engineer

PresentPostmanSoftware Engineer

How data travels today

The client asks. The server answers.

The client is the browser or app. The server is the backend. The client makes an API call, and the server sends back the data.

The server only speaks when the client asks.

Client

Server

1 · RequestGET /score

2 · Response{ "score": "120/3" }

Play again

A live cricket score

The score changes on your screen. You did nothing. How?

Four people edit at the same time. Everyone sees every change.

A normal API call asks once and gets one answer. Here, four people send changes at the same moment.

Day 1: flights land at 11, then the villa.Dhruv

Day 2: beach morning, Fort Aguada at sunset.

Stay: a villa in Anjuna, four rooms.Nishant

Budget: ₹15,000 each, flights included.Harshit

01How data travels.TCP and UDP

02How a browser receives updates.Polling, Server-Sent Events and WebSockets

03Building a real-time chat.One-to-one, groups, and rooms

04Building a collaborative editor.Shared edits and conflicts

Real-time means updates arrive soon enough for the activity.

TCP (Transmission Control Protocol) is a fundamental network communication protocol that establishes a reliable, connection-oriented link between two devices to ensure data is delivered accurately and in the correct order.

Sender

Receiver

Packet 1

ACK 1

Packet 2Lost on the way

No ACK. Timer runs out

Packet 2, sent again

ACK 2

Play again

UDP

UDP (User Datagram Protocol) is a lightweight network communication protocol that sends data directly to a destination without establishing a connection, offering maximum speed by not tracking, reordering, or resending lost packets.

Sender

Receiver

Datagram 1Received

Datagram 2Received

Datagram 3Lost on the wayNever knows

Datagram 4Received, 3 is missing

Time

Play again

How a browser gets updates

Part 02·Polling, Server-Sent Events, and WebSockets.

The browser asks for an update at a fixed interval. The server sends the current data, even if nothing changed.

1,000 viewers × 1 req/s= 1,000 requests per second

Use it when updates are rare and a small delay is OK.

Browser

Server

Any new score?

120/3 · no change

Wait 5 s

Any new score?

120/3 · no change

Wait 5 s

Any new score?

124/3 · new score

Play again

Long polling

The browser asks for an update. The server waits until the data changes or a time limit ends. Then the browser asks again.

Many requests can use the same HTTP connection.

Browser

Server

Any new score?

Server waits until the score changesRequest stays open

124/3 · new score

Any new score?

Waits again

Play again

Server-Sent Events

Server-Sent Events (SSE) send text updates from the server to the browser over HTTP.

The browser opens the stream. The server sends many updates in one open response.

The browser’s EventSource API connects again by itself. To get missed events, the server must also help.

Browser

Server

GET /score/stream

120/3

124/3

125/3

Stream stays open

Close the stream

Play again

Example: AI chat streaming

You use this every day. AI chat apps like Claude and ChatGPT stream their answers.

The browser sends your question once. The server sends the answer back in small pieces, as soon as each piece is ready.

The browser does not ask again. It adds each piece to the screen.

That is why the answer appears word by word.

The server keeps one response open and sends each piece as soon as it is ready.

data: "The server" data: " keeps one" data: " response open" data: " and sends" data: " each piece" data: " as soon as" data: " it is ready."

WebSockets

WebSockets is a network communication protocol that provides a full-duplex, bidirectional, long-lived connection between a client and a server over a single TCP socket.

Browser

Server

1 · Handshake requestUpgrade: websocket

2 · Handshake response101 Switching Protocols

The TCP connection stays openData frames both ways, no HTTP headers

3 · Browser sends a message

4 · Server pushes an update

5 · Server pushes another

6 · Browser sends text

Time

Play again

Key characteristics of WebSockets

Bi-directional communication

Either side can send data at any time. It does not wait for a request from the other side.

Persistent connection

The connection stays open until the client or the server closes it.

Ultra-low overhead

After the handshake, there are no bulky HTTP headers, which can be several kilobytes. Data goes in small text or binary frames with only 2 to 10 bytes of overhead. This cuts delay and network traffic.

Its own URL scheme

Uses ws:// (not encrypted) or wss:// (encrypted) on the standard ports 80 and 443. This helps it pass through many firewalls.

Building a real-time chat

Part 03·One-to-one chat, group chat, and rooms.

Each one keeps a WebSocket open to the server. A message goes to the server first. The server relays it to the other person.

Server

SSakshi

Hi

Hi

Hello, how are you?

Hello, how are you?

I am good!

I am good!

Free this weekend?

Free this weekend?

Yes, let us plan.

Yes, let us plan.

Play again

A group chat: the Goa trip

Four friends plan a trip. Each message goes to the server. The server sends it to everyone else in the chat.

Server

HHarshit

KKunal

Play again

Rooms: many groups, one server

A room is a group of connections. The server keeps the list.

Each message carries a room ID. The server sends it only to the people in that room.

{ "roomId": "goa-trip", "from": "Dhruv", "text": "Flights booked!" }

WebSocket has no rooms built in. Our app, or a library like Socket.IO, adds them.

Server

roomId: goa-trip

goa-tripDNHKGets the message

officeARMNot sent

familyPSVNot sent

Play again

Building a real-time collaborative editor

Part 04·Many people edit the same document, at the same time.

Four people type in the same document at the same time.

Every key press changes the document. Every screen must show the same text, and quickly.

What should happen when Dhruv presses a key?

Day 1: flights land at 11, then the villa.Dhruv

Day 2: beach morning, Fort Aguada at sunset.

Stay: a villa in Anjuna, four rooms.Nishant

Budget: ₹15,000 each, flights included.Harshit

Server

KKunal

insert "North "

Applies and saves

insert "North "

insert " in May"

Applies and saves

insert " in May"

Both screens: “Trip to North Goa in May”

Play again

Many people, many edits

Everyone sends edits. The server sends every edit to everyone else.

The server puts the edits in one order. Then every screen applies them in that same order.

Each person gets the edits they did not make.

Server

NNishantbold "Anjuna"

HHarshitinsert "Budget"

Play again

Two edits, one word

Dhruv and Kunal change the same word at the same moment. Both edits reach the server.

Final title?unknown

Play again

Thank you!

Any questions?

Stuck on a part of it, or curious about how something here works? Ask me anything about it.

Book a one-on-one session for mentorship and guidance on where to go next.