DEV Community: Sabarish M

Fun Curiosities 1 : Exploring Non-Persistent and Persistent TCP Connections using Node.js

Sabarish M — Tue, 31 Mar 2026 12:24:42 +0000

I was just exploring the evolution of HTTP and then came to know that up to HTTP/1.0 non-persistent connections were used, which means that earlier versions of web had to establish new connection for each request.

Let me take you through the steps :

1. Server Listening: First server creates a socket for listening new connections from clients. This is called Listening Socket.
2. Client initiates: Client creates a socket in the OS and initiates the connection to the server.
3. TCP handshake: Now the 3-way TCP handshake happens.
Client sends the SYN to the server, telling that I want to initiate the connection and my sequence number is x. Then server acknowledges it and sends it sequence number. Server sends SYN + ACK, seq = y, ack = x+1. Client confirms by responding with ACK, ack= y+1.

After this, server creates a new connection socket for this client and listening socket stills exists for listening other new clients.

Listening socket — accepts new client
Connection socket — communication with one client

4. Client request: Client/Browser sends request to the server.

5. Server response: Server gives response corresponding to the client’s request.

6. TCP termination: 4 step termination process takes place. Server sends FIN to client, telling I won’t send any more data. Client acknowledges it by responding with ACK. Then once client completed sending its data it sends FIN to the server. Server acknowledges with ACK, then closes the connection.

// Non Persistent Connection
// server.ts
import net from 'net';
import type {Socket} from 'net';

type MySocket = Socket & {id: number}

let socketCounter = 0;

const server = net.createServer((socket: Socket) => {
    const mySocket = socket as MySocket;

    mySocket.id = ++socketCounter;
    console.log('Client connection successful');
    console.log('Socket: ', mySocket.id);
    mySocket.on('data', (data: Buffer) => {
        console.log('Message from client: ', data.toString());
        mySocket.write(data.toString());
        mySocket.end();
    })
    mySocket.on('end', () => {
        console.log(`Socket ${mySocket.id} stops receiving data`);
    })
    mySocket.on('close', (hadError: boolean) => {
        console.log(`Socket ${mySocket.id} closed`, hadError ? 'due to error' : '');
    })
    mySocket.on('error', (err) => {
        console.log('Error: ', err.message);
    })
})

server.listen(3000, () => {
    console.log('Server listening at port 3000');
})
/*
Logs:
Server listening at port 3000
Client connection successful
Socket:  1
Client connection successful
Socket:  2
Client connection successful
Socket:  3
Client connection successful
Socket:  4
Client connection successful
Socket:  5
Message from client:  Luffy
Socket 1 stops receiving data
Socket 1 closed
Message from client:  Zoro
Message from client:  Nami
Message from client:  Sanji
Message from client:  Robin
Socket 2 stops receiving data
Socket 2 closed
Socket 3 stops receiving data
Socket 4 stops receiving data
Socket 5 stops receiving data
Socket 5 closed
Socket 4 closed
Socket 3 closed
*/

// client.ts

import net from 'net';

let socketCounter = 0;

function sendRequest(message: string){
    const client = net.createConnection({port: 3000}, () => {
        const clientId = ++socketCounter;
        console.log(`Socket ID ${clientId} successful`);
        client.write(message);
        client.end();
        client.on('data', (data: Buffer) => {
            console.log('Response from server: ', data.toString());
        })
        client.on('end', () => {
            console.log(`Socket ID ${clientId} stops receiving data`);
        })
        client.on('close', (hadError: boolean) => {
            console.log(`Connection closed ID ${clientId}`, hadError ? 'due to error' : '');
        })
        client.on('error', (err) => {
            console.log('Error: ', err.message);
        })
    })
}
sendRequest('Luffy');
sendRequest('Zoro');
sendRequest('Sanji');
sendRequest('Nami');
sendRequest('Robin');
/*
Logs:
Luffy send by Client 1
Zoro send by Client 1
Sanji send by Client 1
Socket closing initiated for Client 1
Response from server:  LuffyZoroSanji
Server stopped sending for Client 1
Socket closed for Client 1
PS F:\my-grit\fun> node .\dist\non-persistent-connection\client.js
Socket ID 1 successful
Socket ID 2 successful
Socket ID 3 successful
Socket ID 4 successful
Socket ID 5 successful
Response from server:  Luffy
Socket ID 1 stops receiving data
Connection closed ID 1
Response from server:  Zoro
Response from server:  Nami
Response from server:  Sanji
Response from server:  Robin
Socket ID 2 stops receiving data
Socket ID 3 stops receiving data
Socket ID 4 stops receiving data
Socket ID 5 stops receiving data
Connection closed ID 5 
Connection closed ID 4
Connection closed ID 3
Connection closed ID 2
*/

Now imagine a page needs 10 resources like HTML, CSS, JS, images, fonts.

Become a Medium member
Then
10 TCP connections
10 socket pairs
10 handshakes (30 packets)
10 teardowns (40 packets)
Adding to it, TCP is slow start because it begins with small congestion window — large amount of data can’t be sent immediately.

These inefficiencies lead to the persistent connection model.

Persistent model was introduced in version HTTP/1.1 in which 1 TCP connection can be used for multiple request-response cycles.
So, only 1 handshake, 1 socket creation, destruction, 1 time TCP slow start, 1 teardown.

// Persistent connection
// server.ts
import net from 'net';
import type {Socket} from 'net';

type MySocket = Socket & {id: number};

let socketCounter = 0;

const server = net.createServer((socket: Socket) => {

    const mySocket = socket as MySocket;
    mySocket.id = ++socketCounter;

    console.log(`Connection successful Client - Socket ${mySocket.id}`);

    mySocket.on('data', (data: Buffer) => {
        console.log('Message from client: ', data.toString());
        mySocket.write(data);
    })
    mySocket.on('end', () => {
        console.log(`Stopped receiving from Socket ${mySocket.id}`);
        mySocket.end();
    })
    mySocket.on('close', () => {
        console.log(`Socket ${mySocket.id} closed`);
    })
    mySocket.on('error', (err) => {
        console.log(`Error in Socket ${mySocket.id}: `, err.message);
    })
})
server.listen(3000, () => {
    console.log('Server listening on PORT 3000');
})
/*
Logs: 
Server listening on PORT 3000
Connection successful Client - Socket 1
Message from client:  Luffy
Message from client:  ZoroSanji
Stopped receiving from Socket 1
Socket 1 closed
*/

// client.ts
import net from 'net';
import type {Socket} from 'net';

type MyClient = Socket & {id: number};

let clientCounter = 0;
const client = net.createConnection({port: 3000});
const myClient = client as MyClient;

myClient.id = ++clientCounter;

client.on('data', (data: Buffer) => {
    console.log(`Response from server: `, data.toString());
})
client.on('end', () => {
    console.log(`Server stopped sending for Client ${myClient.id}`);
})
client.on('close', () => {
    console.log(`Socket closed for Client ${myClient.id}`);
})
client.on('error', (err) => {
    console.log(`Error for Client ${myClient.id}: `, err.message);
})

function sendRequest(client: MyClient, message: string){
    client.write(message);
    console.log(`${message} send by Client ${myClient.id}`);
}

function closeConnection(client: MyClient){
    client.end();
    console.log(`Socket closing initiated for Client ${client.id}`);
}
sendRequest(myClient, 'Luffy');
sendRequest(myClient, 'Zoro');
sendRequest(myClient, 'Sanji');
closeConnection(myClient);
/*
Logs: 
Luffy send by Client 1
Zoro send by Client 1
Sanji send by Client 1
Socket closing initiated for Client 1
Response from server:  LuffyZoroSanji
Server stopped sending for Client 1
Socket closed for Client 1
*/

All the above code was done using sockets, I had only basic idea about it till now. Then I became curious and decided to dig deeper into it.

What are sockets?
Sockets are just data structure created by OS kernel representing 1 endpoint of a connection. It provides a way for the user programs to interact with Networking stack.

A socket typically contains

local IP
local port
remote IP
remote port
protocol (tcp/udp)
send buffer
receive buffer
etc (other tcp reliability and congestion variables.)
So while creating connections, Kernel creates and binds the socket and provide generic system calls to access it.

If there is any mistake, forgive me — it is not intentional. Kindly bring it to my notice. We discuss, share knowledge, and help each other.

From Rejection to Creation: How I Built My Own URL Shortener After Failing an Interview

Sabarish M — Sat, 19 Jul 2025 12:41:02 +0000

A few weeks ago, I failed an interview. The task was simple: build a URL shortener. I had the knowledge and design of how to build it, but I couldn't. I was stuck, and my mind was frozen - literally, at that time, I couldn't think rationally. After this rejection, I realized that I was learning wrongly, or in other words, I didn't know how to connect the dots/concepts together into a whole piece. Then I was determined to do a project from scratch - not only coding but also finding answers to the questions: why this product is necessary, what problem it solves, and how much revenue it generates.

What It Is

First of all, let me start with what a URL shortener is, for the beginner guys. It is a tool that takes a long, messy web address (URL) and turns it into a short, clean link usually made up of a domain and a unique code. For example:
Original URL
https://www.example.com/blog/article?id=12345&utm_source=twitter&utm_campaign=summer_sale
Shortened URL
https://www.dwindle.com/abc123

Who Founded It and When

A web developer named Kevin Gilbertson was the first to create the popular URL shortener service called "TinyURL" in 2002. It helped people share long links in newspapers and emails without looking messy. Then came Bitly (2008), offering click tracking, analytics, and custom domains - converting URL shortening into a full business tool. Google also started their own called goo.gl (2009), but they shut it down completely in 2019.

Why We Need It

Just simple - wherever we want to use small, clean links and wherever there is a limitation to the number of characters used.

Where It Is Used

1. Advertising - Clean and small links are easy to grab attention.
2. Social Media - Platforms like X (formerly known as Twitter) have character limits. So in X, Instagram bios are a perfect use case.
3. Marketing - It is also used to track clicks, user devices, and location details so that campaigning and marketing can be done effectively.
4. Custom Domains - Instead of random letters, you can have your own domain for your brand. Increases trust and user experience.

How It Works

A URL shortener maps the original long URL to a short link and saves that in a database. Whenever a user clicks it, it uses redirection logic to redirect the user to the original URL.
Now if you are a techie/web programmer, something should strike you now!
I hope you got that - HTTP status codes - 3xx

Basic Flow:

User submits a long URL on the frontend.
Backend generates a unique short ID (like abc123).
Mapping is saved in the database:
{ short: "abc123", original: "https://longsite.com/page?id=12345" }
When someone visits dwin.gl/abc123, the backend:
Looks up abc123 in the DB
Redirects to the original URL

Basically there are two types of redirect - Permanent & Temporary:
301 Moved Permanently
For the first time alone, when the user clicks the shortened link, the URL shortening service looks for the mapped long URL and redirects the user and tells the browser that this is moved permanently.
Then the browser stores this mapping in its cache. From the next time onwards, the browser itself directly redirects to the original link.

302 Found or 307 Temporary Redirect
Same as above, but the browser doesn't store it in cache. Each time the user clicks the short URL, the URL shortener finds the original URL in the database and then redirects the user.

"Actually, what fascinates me is how on earth someone pre-calculated this redirection feature, designed and built the browser with so much precision. It made me very curious. Then I started exploring how browsers work and what browser engines are."

About Mine

Dwindle - the name of my URL shortener. If it sounds unfamiliar, you are not alone. I just googled other words for "tiny", "short" - then this word caught my eye.
✂️ Clean, short link generator
📊 Real-time click tracking via Supabase
🌎 Location + device analytics
🌈 Beautiful UI with ShadCN + Tailwind
⚡ Fast performance - client fetch, no page reload
Stack Used:

React js
Supabase (DB + Auth + Realtime)
TailwindCSS
ShadCN UI
Netlify (Deployment)

Business and Stats

If you are someone who thought there is nothing big in URL shorteners, let numbers speak, my friend.
Bitly, founded in 2008, earns $50–70 million annually just using a freemium model. They have shortened 5 billion+ links and see 800 million+ clicks monthly.
Rebrandly, a company founded in 2015, earns $5–15 million per year. Their focus is mainly on marketing brands.

My Learnings

Routing and dynamic link handling
Handling QR-code generation and storage
Supabase's Row-Level Security and queries
Tailwind layout systems + responsiveness
Tracking user behavior in DB
Using charts for real-time analytics
Handling async logic + loading states
Sharpening debugging and console workflow

Also the business of how a simple tool can earn millions of dollars annually.

"Short links, Long reach"

Links
Live link
GitHub
Twitter
If there is any mistake, forgive me - it is not intentional. Kindly bring it to my notice. We discuss, share knowledge, and help each other.