DEV Community: Pranav Yamjal

Websocket architecture implementation in Captain App Backend

Pranav Yamjal — Sat, 08 Nov 2025 16:47:22 +0000

HTTP Architecture of Captain App Backend (Before WebSocket Implementation)

Before integrating WebSocket, the Captain App backend relied solely on HTTP for communication between clients and the server. However, since HTTP is a stateless protocol, it introduced delays in requests and responses.

Challenges with HTTP-Based Communication:

Lack of Real-Time Updates – Orders were sometimes not reflected instantly in the Kitchen Display System (KDS) and POS (Point of Sale).
Inconsistent Data Across Devices – Due to HTTP’s stateless nature, maintaining consistency across all connected devices (Waiters' Go Serve App, KDS, and POS) was difficult.
Inefficient Polling System – To fetch updates, KDS and POS used polling, which called the /get_all_shop_tables (GET) API every 5 seconds. This method was inefficient and often caused delays and inconsistent order data.

How Captain App Backend Worked with HTTP

Waiters Taking Orders:
- Waiters using the Go Serve App would take customer orders and send them to the server using the /update (POST) method.
- Any privileged operations like sending orders or checking out tables also used the same /update (POST) endpoint.
Polling System for Updates:
- Since HTTP lacks real-time capabilities, KDS and POS couldn’t receive orders instantly.
- To fetch updates, they relied on a polling system, calling the /get_all_shop_tables (GET) API every 5 seconds.
- This method caused delays, extra server load, and inconsistent order synchronization across devices.

WebSocket Integration with Captain App Backend

To solve these issues, WebSocket was integrated alongside HTTP, creating an HTTP + WebSocket server.

Why WebSocket?

✅ Real-Time Communication – Unlike HTTP, WebSocket is a stateful protocol that maintains an active connection, enabling instant updates.

✅ Efficient Event-Driven System – Instead of polling, WebSockets trigger real-time events only when needed, reducing server load.

✅ Consistent Data Across Clients – All connected clients (Go Serve App, KDS, POS) receive updates instantly, ensuring data accuracy.

WebSocket Implementation Strategy

Instead of replacing HTTP, WebSockets were integrated while keeping existing HTTP operations intact.
A WebSocket event handler was introduced to replace polling:
- The /update (POST) method now acts as the trigger/event.
- When a waiter places an order or checks out a table, the server broadcasts updates to all connected clients via WebSocket.
- This eliminates the need for polling and ensures real-time order synchronization across devices.

Example Workflow

Connected Clients:

✅ Go Serve App (Waiter 1, 2, 3)

✅ Kitchen Display System (KDS)

✅ Web/Android POS

Total WebSocket Connections: 5 Clients

Scenario: A waiter (Go Serve App) takes an order

Waiter 1 takes an order and sends it to the server via /update (POST).
The WebSocket event handler in the server detects the update.
The server broadcasts the update to all connected clients (other waiters, KDS, and POS) using WebSocket.
Within seconds, all clients receive the real-time order update, ensuring instant synchronization.

Benefits of WebSocket Integration

🚀 Instant Order Updates – Orders reflect immediately across KDS, POS, and all waiters’ devices.

⚡ No More Polling – Eliminates inefficient GET requests every 5 seconds, reducing server load.

📡 Real-Time Communication – Ensures accurate and synchronized order management across all connected devices.

💡 Better Performance – Less network congestion and faster data transmission.

Make Your Own Server Using Express.js and Node.js

Pranav Yamjal — Thu, 07 Nov 2024 22:29:29 +0000

What Will You Learn?

In this blog, you’ll learn how to create a basic server using Node.js and Express.js. We’ll cover the fundamentals of servers and clients, set up a Node.js environment, install dependencies, and guide you through the code to build a simple server. By the end, you’ll have a functional server that can handle requests and respond to clients.

Here’s what we’ll go over:

Understanding what a server is
Setting up Node.js and Express.js
Managing sensitive information with dotenv and gitignore
Writing the code for a functional server
Breaking down each part of the server code

1. Prerequisites

A basic understanding of programming; if you're familiar with JavaScript, that's a plus.
Basic understanding of client-server architecture.
That’s all!

2. What is a Server?

A server is software that listens for and responds to requests. In other words, a server is ready to fulfill requests from clients.
The client is the requester, and the server is the responder.
Think of it as a classic cook and waiter analogy, where the cook represents the server and the waiter represents the client. The exchange of orders (requests) and food (responses) symbolizes the communication protocols, such as HTTP and TCP/IP, though we won’t dive deep into these here.

3. How Do Node.js and Express.js Help Us Set Up Our Own Server?

i) Node.js

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. According to the official Node.js site, it provides a way to execute JavaScript outside of a browser, making it perfect for building back-end applications.
JavaScript is platform-independent, meaning code written in JavaScript can run on various environments that support it. For instance, JavaScript code typically runs in browsers (like Chrome’s V8 engine). However, if you want to execute JavaScript outside of the browser, such as in VS Code, you’ll need a runtime environment—and that’s where Node.js comes in. Node.js provides all the necessary execution capabilities to run and debug JavaScript code directly on your machine or within an IDE like VS Code.

ii) Express.js

Express is a fast, unopinionated, minimalist web framework for Node.js. It offers a rich set of features for building web and mobile applications.
In simpler terms, Express.js acts as a communication bridge between the client and server. You could think of Express.js as the "road" that allows requests and responses to travel between the client and server.
With Express, we can easily handle requests from clients and send responses from the server, making it a powerful and efficient tool for building a web server.

4. Understanding dotenv and gitignore

i) dotenv

Install dotenv using:

npm install dotenv

This command installs dotenv into your project and generates a package-lock.json file.

Create a file named .env
- .env is a file for storing environmental variables that are sensitive and could pose security risks if exposed
- Examples include database passwords, project URLs, API keys, etc.
- For this project, we'll use PORT=3000 as an example
- When app.listen() is called, it fetches data from the .env file using process.env.PORT, ensuring data integrity and security

ii) .gitignore

Create a .gitignore file using:

code .gitignore

Files listed in .gitignore won't be staged or committed to Git
Add these to your .gitignore:
- node_modules: Prevents repository redundancy and keeps it lightweight. Contributors can install dependencies locally using npm install
- .env: Protects sensitive information

5. Setting Up the Server

i) npm initialization

npm init

Running this command in VS Code's terminal prompts for project information:
- Project name
- Author
- Version
- Other details
npm (Node Package Manager) is used to set up Node.js projects
Creates a package.json file containing:
- Project dependencies
- Versions
- Entry point
- Basic project information

ii) Setting up scripts

Add this to your package.json:

{
  "scripts": {
    "start": "node index.js"
  }
}

Scripts are functions that execute when called
Example: Running npm run start will execute node index.js
This improves coding efficiency by providing shortcuts for common commands

iii) Setup active server

index.js

require('dotenv').config()

const express = require('express')

const app = express()

const githubData = 
    {
        "login": "pranavyamjal",
        "id": 69851016,
        "node_id": "MDQ6VXNlcjY5ODUxMDE2",
        "type": "User",
        "user_view_type": "public",
        "site_admin": false,
        "name": "Pranav Yamjal",
        "company": null,
        "blog": "",
        "location": "Pune,Maharashtra,India",
        "email": null,
        "hireable": true,
        "bio": "Exlploring the coding universe",
        "twitter_username": "pranavyamjal",
        "public_repos": 8,
        "public_gists": 0,
        "followers": 2,
        "following": 4,
        "created_at": "2020-08-18T11:45:25Z",
        "updated_at": "2024-11-01T03:28:37Z"
      }


app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.get('/twitter', (req, res) => {
    res.send('pranavyamjal')
})

app.get('/login',(req,res) => {
    res.send('<h1>Please Login!!!!!!!!</h1>')
})

app.get('/github', (req, res) => {
    res.send(githubData)
})

app.listen(process.env.PORT, () => {
  console.log(`Example app listening on port ${process.env.PORT}`)
})

6. let's understand code

require('dotenv').config()

This line loads environment variables from a .env file into process.env. This allows you to store sensitive information, such as your app's PORT or API keys, in a separate file instead of hardcoding them into your code.

const express = require('express')

Here, you import the Express library, which provides a web framework for handling HTTP requests and creating APIs.

const app = express()

This creates an instance of an Express application, which allows you to define routes and middleware for handling HTTP requests.

const githubData = { /* JSON object data */ }

This defines an object named githubData with some information about a GitHub user. The data includes details such as login name, ID, location, bio, and other GitHub profile information, which can be used for serving responses.

app.get('/', (req, res) => {
  res.send('Hello World!')
})

This defines a route for the root path (/). When a GET request is made to this path, the server responds with the text "Hello World!".

app.get('/twitter', (req, res) => {
    res.send('pranavyamjal')
})

This defines a route at /twitter. When a GET request is made to this endpoint, it responds with the Twitter username, "pranavyamjal".

app.get('/login',(req,res) => {
    res.send('<h1>Please Login!!!!!!!!</h1>')
})

This route, located at /login, responds to a GET request with an HTML message (<h1>Please Login!!!!!!!!</h1>), displaying a "Please Login" message on the page.

app.get('/github', (req, res) => {
    res.send(githubData)
})

This defines a route at /github. When a GET request is made to this endpoint, it responds with the githubData JSON object defined earlier, which provides GitHub profile information.

app.listen(process.env.PORT, () => {
  console.log(`Example app listening on port ${process.env.PORT}`)
})

This starts the server, making it listen for requests on the port specified by process.env.PORT. When the server starts, it logs a message indicating the port it's running on, such as "Example app listening on port 3000".

7. Conclusion

Congratulations! You've just created your first Node.js server using Express. Let's recap what we've learned:

Understanding the basics of client-server architecture
Setting up a Node.js development environment
Managing sensitive information with dotenv
Creating basic server routes with Express.js
Handling different types of HTTP requests

This is just the beginning of your journey into backend development. With these fundamentals, you can now explore more advanced concepts like:

Database integration
Authentication and authorization
RESTful API design
Middleware implementation
Error handling

8. Suggestions for Practice

Try creating new routes with different HTTP methods (POST, PUT, DELETE)
Experiment with sending different types of responses (JSON, HTML, files)
Add error handling to your routes
Create a simple API that interacts with a mock database
Implement basic middleware for logging requests

Thank You!

Thank you for reading my first blog! If you found this helpful, please feel free to:

Share this with others who are learning Node.js
Follow me on Twitter @pranavyamjal
Check out my other projects on GitHub
Leave comments or suggestions for improvement

Your feedback helps me create better content and helps our community grow stronger. Happy coding! 🚀