Feature: Real-Time Stock Updates using WebSockets

[Aamod-Dev]

Description
Right now, if two users are looking at the same product and one buys the last item, the other user's screen will still show "In Stock" until they manually refresh the page.

Your task is to implement WebSockets (Socket.io) to push real-time stock updates to all connected clients.

Requirements

1. Backend: Set up Socket.io alongside our Express server.
2. Backend: Whenever a product's stock is updated (e.g., through a purchase or admin edit), emit a stockUpdate event containing the productId and newStock.
3. Frontend: Connect to the WebSocket on the ProductPage and ProductCard components.
4. Frontend: Listen for stockUpdate events and dynamically update the UI (e.g., changing from "In Stock" to "Out of Stock" instantly without a refresh).

[devprashant19]

hi @Aamod007 I would like to work on the issue. Please assign it to me.

Proposed Solution

To resolve this issue, we will implement Socket.io alongside our existing Express server and React frontend.

1. Backend Implementation

Step 1: Install Socket.io

cd BACKEND
npm install socket.io

Step 2: Setup Socket.io in server.js
We will wrap our Express app with a Node HTTP server and initialize Socket.io. We must export the io instance so it can be used across controllers.

import http from "http";
import app from "./app.js";
import { Server } from "socket.io";

const PORT = process.env.PORT || 5000;
const server = http.createServer(app);

export const io = new Server(server, {
  cors: {
    origin: "http://localhost:5173", // React dev server URL
    methods: ["GET", "POST", "PUT", "DELETE"],
  },
});

io.on("connection", (socket) => {
  console.log("A user connected:", socket.id);
  socket.on("disconnect", () => {
    console.log("User disconnected:", socket.id);
  });
});

// Use server.listen instead of app.listen
server.listen(PORT, () => {
   console.log("Server started at http://localhost:" + PORT);
});

Step 3: Emit stockUpdate Event
Modify the controllers where stock changes happen (like processCheckout in checkout.controller.js).

import { io } from "../server.js";
import Product from "../models/product.model.js";

export const processCheckout = async (req, res) => {
    // ... existing logic ...
    
    for (const item of items) {
        const product = await Product.findById(item._id);
        product.stock -= item.quantity;
        await product.save();
        
        // Broadcast the stock update
        io.emit("stockUpdate", {
            productId: product._id,
            newStock: product.stock
        });
    }

    // ... send response ...
};

---

2. Frontend Implementation

Step 1: Install Socket.io Client

cd FRONTEND
npm install socket.io-client

Step 2: Connect and Listen in React Components
In components that display the stock (like ProductPage.jsx or ProductCard.jsx), connect to the Socket.io server and listen for the stockUpdate event.

import React, { useState, useEffect } from 'react';
import { io } from 'socket.io-client';
import { Badge } from '@chakra-ui/react';

// Connect to the backend
const socket = io("http://localhost:5000"); 

const ProductPage = ({ initialProduct }) => {
  const [product, setProduct] = useState(initialProduct);

  useEffect(() => {
    // Listen for the stockUpdate event
    const handleStockUpdate = (data) => {
      if (data.productId === product._id) {
        setProduct((prev) => ({ ...prev, stock: data.newStock }));
      }
    };

    socket.on("stockUpdate", handleStockUpdate);

    return () => {
      socket.off("stockUpdate", handleStockUpdate);
    };
  }, [product._id]);

  return (
    <div>
      <h2>{product.name}</h2>
      {product.stock > 0 ? (
        <Badge colorScheme="green">In Stock ({product.stock} left)</Badge>
      ) : (
        <Badge colorScheme="red">Out of Stock</Badge>
      )}
    </div>
  );
};

export default ProductPage;

[Aamod-Dev]

Implemented in PR #278