Build a Real-Time Notification System with Next.js, Express.js, and Socket.IO

Browser (Next.js UI)
  useNotifications ──io(auth.token)──►  Express + Socket.IO (port 4000)
        ▲                                     │
        │                          io.use(verifyToken) → user:<id> room
        │                                     │
        │  notification:new  ◄────────────────┤  emitNotification(userId, n)
        │                                     │
        │  notification:fetch (ack: list) ───►│  in-memory store (Map)
        │                                     │
Order service ──POST /api/orders/:id/status──► createNotification() → emit

socketio-notify-app/
├── package.json            # workspaces: shared, server, client
├── shared/
│   ├── package.json
│   └── src/events.ts       # shared event + data types
├── server/
│   ├── .env
│   ├── package.json
│   ├── tsconfig.json
│   └── src/
│       ├── config.ts
│       ├── auth.ts         # token verify (teaching-only)
│       ├── store.ts        # in-memory notification store
│       ├── socket.ts       # Socket.IO + auth + rooms
│       └── index.ts        # Express routes + http server
└── client/                 # create-next-app দিয়ে তৈরি
    ├── .env.local
    ├── app/
    │   └── page.tsx
    ├── components/
    │   ├── notification-bell.tsx
    │   └── order-simulator.tsx
    └── hooks/
        └── use-notifications.ts

mkdir socketio-notify-app
cd socketio-notify-app

# shared workspace
mkdir shared/src

# server workspace
mkdir server/src

# Next.js client
npx create-next-app@latest client --ts --tailwind --eslint --app --no-src-dir --import-alias "@/*" --use-npm

# root-এ সব install (workspaces)
npm install

{
  "name": "socketio-notify-app",
  "private": true,
  "workspaces": ["shared", "server", "client"]
}

# Express + Socket.IO server
npm install -w server express socket.io cors dotenv
npm install -w server -D typescript tsx @types/express @types/cors @types/node

# Next.js-এ Socket.IO client
npm install -w client socket.io-client

{
  "name": "@notify/shared",
  "version": "1.0.0",
  "private": true,
  "types": "./src/events.ts",
  "main": "./src/events.ts"
}

// shared/src/events.ts
export interface AppNotification {
  id: string;
  userId: string;
  title: string;
  body: string;
  read: boolean;
  createdAt: number;
}

export interface AckResult {
  ok: boolean;
  error?: string;
}

/** server থেকে client-এ যাওয়া event */
export interface ServerToClientEvents {
  "notification:new": (notification: AppNotification) => void;
  "notification:read": (id: string) => void;
  "notification:all-read": () => void;
}

/** client থেকে server-এ যাওয়া event */
export interface ClientToServerEvents {
  "notification:fetch": (
    since: number,
    ack: (list: AppNotification[]) => void,
  ) => void;
  "notification:mark-read": (
    id: string,
    ack: (result: AckResult) => void,
  ) => void;
  "notification:mark-all-read": (ack: (result: AckResult) => void) => void;
}

/** প্রতিটি socket-এ রাখা server-side verified data */
export interface SocketData {
  userId?: string;
  username?: string;
}

export type InterServerEvents = Record<string, never>;

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noEmit": true,
    "types": ["node"]
  },
  "include": ["src"]
}

{
  "name": "server",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "start": "tsx src/index.ts",
    "typecheck": "tsc --noEmit"
  }
}

# server/.env
PORT=4000
CLIENT_ORIGIN=http://localhost:3000

// server/src/config.ts
import "dotenv/config";

export const PORT = Number(process.env.PORT ?? 4000);
export const CLIENT_ORIGIN =
  process.env.CLIENT_ORIGIN ?? "http://localhost:3000";

// server/src/auth.ts
export interface AuthUser {
  id: string;
  username: string;
}

// ⚠️ teaching-only: token → user map (কোনো আসল secret নেই)।
// production-এ jsonwebtoken/session (httpOnly cookie) দিয়ে verify করুন।
const SESSIONS = new Map<string, AuthUser>([
  ["token-demo-1", { id: "user-1", username: "Ayesha" }],
  ["token-demo-2", { id: "user-2", username: "Rahim" }],
]);

export function verifyToken(token: string): AuthUser | null {
  if (!token) return null;
  return SESSIONS.get(token) ?? null;
}

// server/src/store.ts
import { randomUUID } from "node:crypto";

import type { AppNotification } from "@notify/shared";

// ⚠️ in-memory only: server restart/crash-এ সব notification হারিয়ে যায়।
// production-এ এগুলো database-এ রাখতে হবে (নিচে দেখুন)।
const byUser = new Map<string, AppNotification[]>();

export function listForUser(userId: string): AppNotification[] {
  return byUser.get(userId) ?? [];
}

export function createNotification(input: {
  userId: string;
  title: string;
  body: string;
}): AppNotification {
  const notification: AppNotification = {
    id: crypto.randomUUID(),
    userId: input.userId,
    title: String(input.title).trim().slice(0, 120),
    body: String(input.body).trim().slice(0, 500),
    read: false,
    createdAt: Date.now(),
  };

  const list = byUser.get(notification.userId) ?? [];
  list.unshift(notification);
  if (list.length > 100) list.length = 100; // memory সীমিত রাখুন
  byUser.set(notification.userId, list);

  return notification;
}

/** read flag আপডেট করে; সফল হলে true ফেরায়। */
export function markRead(userId: string, id: string): boolean {
  const found = (byUser.get(userId) ?? []).find((n) => n.id === id);
  if (!found) return false;
  found.read = true;
  return true;
}

export function markAllRead(userId: string): void {
  for (const n of byUser.get(userId) ?? []) n.read = true;
}

// server/src/socket.ts
import type http from "node:http";
import { Server } from "socket.io";

import type {
  AppNotification,
  ClientToServerEvents,
  InterServerEvents,
  ServerToClientEvents,
  SocketData,
} from "@notify/shared";

import { CLIENT_ORIGIN } from "./config";
import { verifyToken } from "./auth";
import { listForUser, markAllRead, markRead } from "./store";

type NotifyServer = Server<
  ClientToServerEvents,
  ServerToClientEvents,
  InterServerEvents,
  SocketData
>;

// শুধু server-এর বানানো room নাম — client এটা দিতে পারে না
const userRoom = (userId: string) => `user:${userId}`;

let ioRef: NotifyServer | null = null;

export function createSocketServer(httpServer: http.Server): NotifyServer {
  const io: NotifyServer = new Server(httpServer, {
    cors: { origin: CLIENT_ORIGIN, methods: ["GET", "POST"] },
  });
  ioRef = io;

  // handshake auth — identity server-এ verify হয়, client-এর দাবি নয়
  io.use((socket, next) => {
    const token = socket.handshake.auth?.token;
    const user = verifyToken(String(token ?? ""));
    if (!user) return next(new Error("unauthorized"));

    socket.data.userId = user.id;
    socket.data.username = user.username;
    next();
  });

  io.on("connection", (socket) => {
    const userId = socket.data.userId;
    if (!userId) return; // auth middleware ছাড়া এখানে আসা উচিত নয়

    // verified identity থেকে room-এ join
    socket.join(userRoom(userId));

    // connect/reconnect-এ সংরক্ষিত notification আনুন
    socket.on("notification:fetch", (since, ack) => {
      const list = listForUser(userId).filter((n) => n.createdAt > since);
      ack(list);
    });

    socket.on("notification:mark-read", (id, ack) => {
      const clean = String(id ?? "").slice(0, 64);
      // ownership সর্বদা server-এর verified userId দিয়ে যাচাই
      const ok = markRead(userId, clean);
      if (ok) io.to(userRoom(userId)).emit("notification:read", clean);
      ack(ok ? { ok: true } : { ok: false, error: "not found" });
    });

    socket.on("notification:mark-all-read", (ack) => {
      markAllRead(userId);
      io.to(userRoom(userId)).emit("notification:all-read");
      ack({ ok: true });
    });
  });

  return io;
}

/** নির্দিষ্ট user-এর room-এ notification emit — কখনো io.emit (broadcast) নয়। */
export function emitNotification(
  userId: string,
  notification: AppNotification,
): void {
  ioRef?.to(userRoom(userId)).emit("notification:new", notification);
}

// server/src/index.ts
import http from "node:http";
import express from "express";
import cors from "cors";

import { CLIENT_ORIGIN, PORT } from "./config";
import { verifyToken } from "./auth";
import { createNotification, listForUser } from "./store";
import { createSocketServer, emitNotification } from "./socket";

const app = express();
app.use(cors({ origin: CLIENT_ORIGIN }));
app.use(express.json());

// Bearer token → verified user. client-এর পাঠানো userId কখনো বিশ্বাস করবেন না।
function readUser(req: express.Request) {
  const header = req.header("authorization") ?? "";
  const token = header.startsWith("Bearer ") ? header.slice(7) : "";
  return verifyToken(token);
}

app.get("/health", (_req, res) => {
  res.json({ ok: true });
});

// authorization: শুধু নিজের notification ফেরত দেয়
app.get("/api/notifications", (req, res) => {
  const user = readUser(req);
  if (!user) return res.status(401).json({ error: "unauthorized" });
  res.json(listForUser(user.id));
});

// ⚠️ সিমুলেটেড order update — বাইরের payment/order API লাগে না।
app.post("/api/orders/:orderId/status", (req, res) => {
  const user = readUser(req);
  if (!user) return res.status(401).json({ error: "unauthorized" });

  const status = String(req.body?.status ?? "").trim();
  const allowed = ["confirmed", "shipped", "delivered"];
  if (!allowed.includes(status)) {
    return res.status(400).json({ error: "invalid status" });
  }

  const orderId = String(req.params.orderId).slice(0, 40);
  const notification = createNotification({
    userId: user.id,
    title: "Order status আপডেট",
    body: `আপনার order ${orderId} এখন ${status}।`,
  });

  // প্রাপক কখনো request body থেকে নয় — verified user থেকেই
  emitNotification(user.id, notification);
  res.json({ ok: true, notification });
});

// Express app-কে একটি http.Server-এ মুড়ে দিন — Socket.IO এখানেই বসবে
const httpServer = http.createServer(app);
createSocketServer(httpServer);

httpServer.listen(PORT, () => {
  console.log(`Server চলছে: http://localhost:${PORT}`);
});

# client/.env.local
NEXT_PUBLIC_SOCKET_URL=http://localhost:4000
NEXT_PUBLIC_DEMO_TOKEN=token-demo-1

// client/hooks/use-notifications.ts
"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { io, type Socket } from "socket.io-client";

import type {
  AppNotification,
  ClientToServerEvents,
  ServerToClientEvents,
} from "@notify/shared";

type NotifySocket = Socket<ServerToClientEvents, ClientToServerEvents>;
type Status = "connecting" | "connected" | "disconnected";

const SOCKET_URL =
  process.env.NEXT_PUBLIC_SOCKET_URL ?? "http://localhost:4000";

export function useNotifications(token: string) {
  const socketRef = useRef<NotifySocket | null>(null);
  const [status, setStatus] = useState<Status>("connecting");
  const [items, setItems] = useState<AppNotification[]>([]);

  useEffect(() => {
    if (!token) return;

    // socket কেবল effect-এ — render-এ নয় (duplicate connection এড়াতে)
    const socket: NotifySocket = io(SOCKET_URL, { auth: { token } });
    socketRef.current = socket;

    // id দিয়ে merge — duplicate আসলেও একবারই থাকবে
    const merge = (list: AppNotification[]) => {
      setItems((prev) => {
        const map = new Map(list.map((n) => [n.id, n]));
        for (const n of prev) if (!map.has(n.id)) map.set(n.id, n);
        return [...map.values()].sort((a, b) => b.createdAt - a.createdAt);
      });
    };

    const onConnect = () => {
      setStatus("connected");
      // connect বা reconnect — সংরক্ষিত notification নিয়ে আসুন
      socket.emit("notification:fetch", 0, merge);
    };
    const onDisconnect = () => setStatus("disconnected");
    const onError = () => setStatus("disconnected");
    const onNew = (n: AppNotification) => merge([n]);
    const onRead = (id: string) =>
      setItems((prev) =>
        prev.map((n) => (n.id === id ? { ...n, read: true } : n)),
      );
    const onAllRead = () =>
      setItems((prev) => prev.map((n) => ({ ...n, read: true })));

    socket.on("connect", onConnect);
    socket.on("disconnect", onDisconnect);
    socket.on("connect_error", onError);
    socket.on("notification:new", onNew);
    socket.on("notification:read", onRead);
    socket.on("notification:all-read", onAllRead);

    // cleanup — listener সরান ও connection বন্ধ করুন (StrictMode/routing)
    return () => {
      socket.off("connect", onConnect);
      socket.off("disconnect", onDisconnect);
      socket.off("connect_error", onError);
      socket.off("notification:new", onNew);
      socket.off("notification:read", onRead);
      socket.off("notification:all-read", onAllRead);
      socket.disconnect();
    };
  }, [token]);

  const unread = items.filter((n) => !n.read).length;

  const markRead = useCallback((id: string) => {
    socketRef.current?.emit("notification:mark-read", id, () => {});
  }, []);

  const markAllRead = useCallback(() => {
    socketRef.current?.emit("notification:mark-all-read", () => {});
  }, []);

  return { status, items, unread, markRead, markAllRead };
}

// client/components/notification-bell.tsx
"use client";

import { useEffect, useRef, useState } from "react";

import { useNotifications } from "@/hooks/use-notifications";

export function NotificationBell({ token }: { token: string }) {
  const { status, items, unread, markRead, markAllRead } =
    useNotifications(token);
  const [open, setOpen] = useState(false);
  const panelRef = useRef<HTMLDivElement | null>(null);

  // Escape চাপলে বন্ধ — cleanup সহ
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <div className="relative">
      <button
        type="button"
        aria-label={"Notifications"}
        aria-expanded={open}
        aria-haspopup="dialog"
        onClick={() => setOpen((v) => !v)}
        className="relative rounded-full border p-2"
      >
        <span aria-hidden>bell</span>
        {unread > 0 ? (
          <span
            aria-label={`${unread} unread`}
            className="absolute -right-1 -top-1 rounded-full bg-red-600 px-1.5 text-xs text-white"
          >
            {unread > 99 ? "99+" : unread}
          </span>
        ) : null}
      </button>

      {open ? (
        <div
          ref={panelRef}
          role="dialog"
          aria-label="Notifications"
          className="absolute right-0 mt-2 w-80 max-w-[90vw] rounded-xl border bg-white p-0 shadow-lg"
        >
          <header className="flex items-center justify-between border-b p-3">
            <span className="font-medium">Notifications</span>
            <button
              type="button"
              onClick={markAllRead}
              disabled={items.every((n) => n.read)}
              className="text-sm text-blue-600 disabled:opacity-40"
            >
              Mark all read
            </button>
          </header>

          <ul className="max-h-96 overflow-y-auto">
            {items.length === 0 ? (
              <li className="p-4 text-sm text-gray-500">
                কোনো notification নেই
              </li>
            ) : (
              items.map((n) => (
                <li
                  key={n.id}
                  className={n.read ? "opacity-60" : "bg-blue-50"}
                >
                  <button
                    type="button"
                    onClick={() => markRead(n.id)}
                    disabled={n.read}
                    className="block w-full p-3 text-left"
                  >
                    <span className="block font-medium">{n.title}</span>
                    <span className="block text-sm text-gray-600">
                      {n.body}
                    </span>
                    <time className="block text-xs text-gray-400">
                      {new Date(n.createdAt).toLocaleString()}
                    </time>
                  </button>
                </li>
              ))
            )}
          </ul>

          <footer className="border-t p-2 text-xs text-gray-500">
            {status === "connected" ? "Live" : "Offline"}
          </footer>
        </div>
      ) : null}
    </div>
  );
}

// client/components/order-simulator.tsx
"use client";

import { useState } from "react";

const API_URL = process.env.NEXT_PUBLIC_SOCKET_URL ?? "http://localhost:4000";

export function OrderSimulator({ token }: { token: string }) {
  const [busy, setBusy] = useState(false);
  const [message, setMessage] = useState<string | null>(null);

  async function simulate(status: string) {
    setBusy(true);
    setMessage(null);
    try {
      const res = await fetch(`${API_URL}/api/orders/demo-order/status`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({ status }),
      });
      setMessage(res.ok ? "Order update পাঠানো হয়েছে" : "অনুরোধ ব্যর্থ");
    } catch {
      setMessage("Server-এ পৌঁছানো যায়নি");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="mt-6 flex items-center gap-3">
      <button
        type="button"
        onClick={() => simulate("shipped")}
        disabled={busy}
        className="rounded-lg bg-blue-600 px-3 py-2 text-sm text-white disabled:opacity-50"
      >
        Simulate order shipped
      </button>
      {message ? <span className="text-sm">{message}</span> : null}
    </div>
  );
}

// client/app/page.tsx
import { NotificationBell } from "@/components/notification-bell";
import { OrderSimulator } from "@/components/order-simulator";

const DEMO_TOKEN = process.env.NEXT_PUBLIC_DEMO_TOKEN ?? "token-demo-1";

export default function Home() {
  return (
    <main className="min-h-screen bg-slate-950 p-8 text-slate-100">
      <div className="mx-auto flex max-w-2xl items-center justify-between">
        <h1 className="text-xl font-semibold">Notification Demo</h1>
        <NotificationBell token={DEMO_TOKEN} />
      </div>
      <div className="mx-auto max-w-2xl">
        <OrderSimulator token={DEMO_TOKEN} />
      </div>
    </main>
  );
}

// connect বা reconnect দুইবারই চলে
const onConnect = () => {
  setStatus("connected");
  socket.emit("notification:fetch", 0, merge); // missed সহ আনুন
};

// server — connection state recovery (optional)
const io = new Server(httpServer, {
  cors: { origin: CLIENT_ORIGIN },
  connectionStateRecovery: {
    maxDisconnectionDuration: 2 * 60 * 1000,
  },
});

# terminal 1 — backend (port 4000)
npm run dev -w server

# output: Server চলছে: http://localhost:4000

# terminal 2 — frontend (port 3000)
npm run dev -w client

-- notifications টেবিল: notification ও read status দুটোই
CREATE TABLE notifications (
  id          TEXT PRIMARY KEY,
  user_id     TEXT NOT NULL,
  title       TEXT NOT NULL,
  body        TEXT NOT NULL,
  read        BOOLEAN NOT NULL DEFAULT FALSE,
  created_at  TIMESTAMPTZ NOT NULL DEFAULT now()
);

CREATE INDEX idx_notifications_user_created
  ON notifications (user_id, created_at DESC);

// production-এ in-memory Map বাদ দিয়ে এই ধরনের query ব্যবহার করুন
export async function listForUser(userId: string) {
  const rows = await db.query(
    "SELECT * FROM notifications WHERE user_id = $1 " +
      "ORDER BY created_at DESC LIMIT 100",
    [userId],
  );
  return rows;
}

// reconnect-এর পর missed notification আনতে
// WHERE user_id = $1 AND created_at > $2
// authorization: প্রতিটি query-তে দর্শকের userId server-এর verified identity থেকে

// একাধিক instance-এ room/emit ভাগ করতে shared adapter
import { createAdapter } from "@socket.io/redis-adapter";
import { createClient } from "redis";

const pub = createClient({ url: process.env.REDIS_URL });
const sub = pub.duplicate();
await Promise.all([pub.connect(), sub.connect()]);

io.adapter(createAdapter(pub, sub));

in-memory state:
- notification Map, read flag server process-এর memory-তে
- server restart / crash → সব হারায় (durable নয়)
- একাধিক node → room ও state প্রতিটিতে আলাদা
- Socket.IO delivery live-ই নিশ্চিত করে, history নয়
- production-এ DB + Redis adapter + auth verify লাগবে