React+Node+PostgreSQL实现数据库变更实时通知方案咨询

云原生阿岚

2026-5-8

Real-Time Notifications in React + Node.js + PostgreSQL: A Step-by-Step Guide

Hey there! Let's walk through how you can build real-time notifications for your React + Node.js + PostgreSQL app—just like Facebook's live updates. Since you’ve used Firebase Streams before, I’ll draw parallels to make this feel familiar.

The core idea here is to set up a way for your backend to push updates to the frontend instantly when the PostgreSQL database changes, instead of making the frontend constantly check (poll) for new data. Here are the most practical approaches:

1. WebSocket + PostgreSQL LISTEN/NOTIFY (Most Flexible, Like Firebase Streams)

This is the closest equivalent to Firebase Streams. WebSocket keeps a persistent bidirectional connection between frontend and backend, and PostgreSQL’s built-in LISTEN/NOTIFY lets the backend detect database changes instantly.

How it works:

PostgreSQL triggers: When a new notification is added to your database (e.g., a comment or like), a database trigger sends a notification to a "channel".
Node.js backend: Subscribes to that PostgreSQL channel, and when it gets a notification, it forwards it to connected frontend clients via WebSocket.
React frontend: Connects to the WebSocket server, listens for incoming notifications, and updates the UI in real-time.

Code Examples:

Step 1: Set up PostgreSQL Trigger

First, create a function and trigger to send notifications when a new record is added to your notifications table:

-- Create a function that sends a notification to a channel
CREATE OR REPLACE FUNCTION send_db_notification()
RETURNS TRIGGER AS $$
BEGIN
  -- Send the new notification data as JSON to the "app_notifications" channel
  PERFORM pg_notify(
    'app_notifications',
    json_build_object(
      'id', NEW.id,
      'message', NEW.message,
      'recipient_id', NEW.recipient_id,
      'created_at', NEW.created_at
    )::text
  );
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Attach the function to an AFTER INSERT trigger on your notifications table
CREATE TRIGGER after_notification_insert
AFTER INSERT ON notifications
FOR EACH ROW EXECUTE FUNCTION send_db_notification();

Step 2: Node.js Backend with Socket.io

Socket.io simplifies WebSocket handling and includes fallback mechanisms for older browsers. Install dependencies first:

npm install socket.io pg

Then set up the server:

const { Client } = require('pg');
const { Server } = require('socket.io');

// Connect to PostgreSQL
const pgClient = new Client({
  host: 'localhost',
  port: 5432,
  user: 'your_db_user',
  password: 'your_db_password',
  database: 'your_db_name'
});
pgClient.connect();

// Subscribe to the PostgreSQL notification channel
pgClient.query('LISTEN app_notifications');

// Initialize Socket.io server
const io = new Server(3001, {
  cors: { origin: 'http://localhost:3000' } // Your React app URL
});

// Handle client connections
io.on('connection', (socket) => {
  console.log(`User connected: ${socket.id}`);

  // Listen for PostgreSQL notifications and forward to the client
  pgClient.on('notification', (msg) => {
    const notificationData = JSON.parse(msg.payload);
    // You can filter here to send only to the intended user (using recipient_id)
    socket.emit('new_notification', notificationData);
  });

  // Clean up on disconnect
  socket.on('disconnect', () => {
    console.log(`User disconnected: ${socket.id}`);
  });
});

console.log('Socket.io server running on port 3001');

Step 3: React Frontend

Install the Socket.io client:

npm install socket.io-client

Create a notification component:

import { useEffect, useState } from 'react';
import io from 'socket.io-client';

// Connect to the Socket.io server
const socket = io('http://localhost:3001');

function NotificationFeed() {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    // Listen for incoming notifications from the backend
    socket.on('new_notification', (newNotify) => {
      // Add the new notification to the top of the list
      setNotifications(prev => [newNotify, ...prev]);
    });

    // Clean up the listener when the component unmounts
    return () => {
      socket.off('new_notification');
    };
  }, []);

  return (
    <div className="notification-feed">
      <h3>Your Notifications</h3>
      {notifications.length === 0 ? (
        <p>No new notifications</p>
      ) : (
        notifications.map(notify => (
          <div key={notify.id} className="notification-item">
            <p>{notify.message}</p>
            <small>{new Date(notify.created_at).toLocaleString()}</small>
          </div>
        ))
      )}
    </div>
  );
}

export default NotificationFeed;

2. Server-Sent Events (SSE) - Lightweight Alternative

If you don’t need two-way communication (e.g., you don’t need to send data from frontend to backend in real-time), SSE is a simpler, HTTP-based option. It’s one-way (backend pushes to frontend) and doesn’t require extra libraries on the frontend.

Code Examples:

Node.js Backend (Express)

const express = require('express');
const { Client } = require('pg');
const app = express();

const pgClient = new Client({ /* Your DB config */ });
pgClient.connect();
pgClient.query('LISTEN app_notifications');

// SSE endpoint
app.get('/sse-notifications', (req, res) => {
  // Set SSE headers
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // Send initial message to confirm connection
  res.write('data: {"type": "connection_success", "message": "Connected to SSE server"}\n\n');

  // Forward PostgreSQL notifications to the client
  pgClient.on('notification', (msg) => {
    const payload = JSON.parse(msg.payload);
    res.write(`data: ${JSON.stringify(payload)}\n\n`);
  });

  // Close connection when client disconnects
  req.on('close', () => {
    console.log('SSE connection closed');
    res.end();
  });
});

app.listen(3000, () => console.log('Express server running on port 3000'));

React Frontend

import { useEffect, useState } from 'react';

function NotificationFeed() {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    const eventSource = new EventSource('http://localhost:3000/sse-notifications');

    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type !== 'connection_success') {
        setNotifications(prev => [data, ...prev]);
      }
    };

    // Clean up on unmount
    return () => {
      eventSource.close();
    };
  }, []);

  // Render logic same as WebSocket example
  return (
    <div className="notification-feed">
      <h3>Your Notifications</h3>
      {notifications.length === 0 ? (
        <p>No new notifications</p>
      ) : (
        notifications.map(notify => (
          <div key={notify.id} className="notification-item">
            <p>{notify.message}</p>
            <small>{new Date(notify.created_at).toLocaleString()}</small>
          </div>
        ))
      )}
    </div>
  );
}

export default NotificationFeed;

3. Polling (Simplest, But Least Efficient)

If you want a quick-and-dirty solution without persistent connections, you can use polling: the frontend periodically sends an API request to check for new notifications. However, this is less efficient and has delay, so it’s not ideal for Facebook-like real-time updates.

Quick Example (React):

import { useEffect, useState } from 'react';

function NotificationFeed() {
  const [notifications, setNotifications] = useState([]);

  const fetchNotifications = async () => {
    const res = await fetch('http://localhost:3000/api/notifications');
    const data = await res.json();
    setNotifications(data);
  };

  // Fetch every 5 seconds
  useEffect(() => {
    fetchNotifications();
    const interval = setInterval(fetchNotifications, 5000);
    return () => clearInterval(interval);
  }, []);

  // Render logic same as above
}

Which Should You Choose?

WebSocket: Go with this if you need two-way communication (e.g., marking notifications as read in real-time) or want the most reliable real-time experience. It’s the closest to Firebase Streams.
SSE: Use this if you only need backend-to-frontend updates and want a lightweight, HTTP-based solution.
Polling: Only use this for simple, low-frequency updates where real-time isn’t critical.

All these approaches work seamlessly with your React + Node.js + PostgreSQL stack—pick the one that fits your app’s needs!

内容的提问来源于stack exchange，提问作者CHANDUKA SAMARASINGHE.

React+Node+PostgreSQL实现数据库变更实时通知方案咨询

1. WebSocket + PostgreSQL LISTEN/NOTIFY (Most Flexible, Like Firebase Streams) #

How it works: #

Code Examples: #

Step 1: Set up PostgreSQL Trigger

Step 2: Node.js Backend with Socket.io

Step 3: React Frontend

2. Server-Sent Events (SSE) - Lightweight Alternative #

Code Examples: #

Node.js Backend (Express)

React Frontend

3. Polling (Simplest, But Least Efficient) #

Quick Example (React): #

Which Should You Choose? #

1. WebSocket + PostgreSQL LISTEN/NOTIFY (Most Flexible, Like Firebase Streams)

How it works:

Code Examples:

2. Server-Sent Events (SSE) - Lightweight Alternative

Code Examples:

3. Polling (Simplest, But Least Efficient)

Quick Example (React):

Which Should You Choose?