Building a Real-Time Notification Center in React

Notifications keep users informed and engaged. A custom React notification center lets you control and tailor the user experience fully. Here’s a concise guide to building one from scratch, covering both frontend and backend components for real-time updates.

1. Requirements for a React Notification Center

• Real-Time Updates: Notifications should appear instantly without refreshing.
• Background Notifications: Use service workers to handle notifications even when the app is not in focus.
• Multi-Channel Support: Include in-app notifications, push notifications, emails, and SMS.
• User Preferences: Allow users to customize their notification settings.
• Scalability: Ensure the system can handle a high volume of notifications.
• Reliability: Notifications must be delivered accurately and promptly.

2. System Architecture Overview

Frontend

• React App: Displays notifications and handles real-time updates.
• Service Worker: Manages background notifications via the Notifications API.
• WebSocket/ Polling: Keeps the notification feed updated in real-time.

Backend

• Microservices:
  • Notification Service: Generates and stores notifications.
  • Dispatch Service: Sends notifications to various channels.
  • User Preferences Service: Manages user settings for notifications.
• Message Queue: Efficiently handles notification distribution.
• Database: Stores user preferences and notification logs.
• Push Services: Integrate with Firebase and APNs for push notifications.

3. Backend Architecture

3.1. Microservices Design

Microservice

Functionality

Microservice	Functionality
Notification Service	Generates and stores notifications
Dispatch Service	Sends notifications to different channels
User Preferences Service	Manages user settings and preferences

Notification Service

Generates and stores notifications

Dispatch Service

Sends notifications to different channels

User Preferences Service

Manages user settings and preferences

3.2. Database Design

• Notifications Table: Stores notification metadata.
• User Preferences Table: Tracks user settings.
• Logs Table: Keeps a record of all notifications sent.

Example: Notification Service in Node.js/Express

const express = require('express');
const app = express();

let notifications = [];

app.post('/notify', (req, res) => {
    const notification = {
        id: notifications.length + 1,
        type: req.body.type,
        message: req.body.message,
        userId: req.body.userId,
        status: 'unread',
        timestamp: new Date()
    };

    notifications.push(notification);
    res.status(200).send(notification);
});

app.listen(3000, () => {
    console.log('Notification Service running on port 3000');
});

4. Real-Time Communication

4.1. WebSocket Connection

• Server: Handles connections and broadcasts notifications.
• Client: Listens for updates and updates the UI in real-time.

Example: WebSocket Server with Socket.IO

const io = require('socket.io')(3001);

io.on('connection', (socket) => {
    console.log('User connected:', socket.id);

    socket.emit('notification', {
        message: 'New notification!',
        timestamp: new Date()
    });

    socket.on('disconnect', () => {
        console.log('User disconnected:', socket.id);
    });
});

Client-Side Integration in React

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

const socket = io('http://localhost:3001');

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

    useEffect(() => {
        socket.on('notification', (notification) => {
            setNotifications(prev => [...prev, notification]);
        });
    }, []);

    return (
        <div>
            <h2>Notification Center</h2>
            {notifications.map((notif, index) => (
                <div key={index}>{notif.message} - {notif.timestamp}</div>
            ))}
        </div>
    );
}

export default NotificationCenter;

4.2. Polling as a Fallback

• Client: Periodically checks the server for new notifications.

Example: Polling Implementation in React

import React, { useEffect, useState } from 'react';

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

    useEffect(() => {
        const interval = setInterval(() => {
            fetch('/api/notifications')
                .then(response => response.json())
                .then(data => setNotifications(data));
        }, 5000); // Poll every 5 seconds

        return () => clearInterval(interval);
    }, []);

    return (
        <div>
            <h2>Notification Center</h2>
            {notifications.map((notif, index) => (
                <div key={index}>{notif.message}</div>
            ))}
        </div>
    );
}

export default NotificationCenter;

5. Integrating Notifications API and Service Workers

5.1. Service Workers

• Register: Handle background notifications.

Example: Registering a Service Worker

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js').then(registration => {
        console.log('Service Worker registered:', registration.scope);
    }).catch(error => {
        console.error('Service Worker registration failed:', error);
    });
}

5.2. Notifications API

• Permission Handling: Request permission to display notifications.
• Trigger Notifications: Show notifications even when the app isn’t active.

Example: Displaying a Notification

if (Notification.permission === 'granted') {
    new Notification('New message!', {
        body: 'Click to view the message.',
        icon: '/path/to/icon.png'
    });
} else if (Notification.permission !== 'denied') {
    Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
            new Notification('New message!', {
                body: 'Click to view the message.',
                icon: '/path/to/icon.png'
            });
        }
    });
}

6. Push Notifications with Firebase and APNs

6.1. Firebase Cloud Messaging (FCM)

• Setup: Register with Firebase and get tokens.
• Send Notifications: Use tokens to dispatch notifications.

Example: Sending Push Notifications with FCM in Node.js

const admin = require('firebase-admin');
const serviceAccount = require('./path/to/serviceAccountKey.json');

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount)
});

const message = {
    notification: {
        title: 'New Notification',
        body: 'You have a new notification!'
    },
    token: 'device-token'
};

admin.messaging().send(message)
    .then(response => console.log('Message sent:', response))
    .catch(error => console.error('Error sending message:', error));

6.2. Apple Push Notification service (APNs)

• Integrate: Handle device tokens and use them to send notifications via APNs.

7. Building the Notification Center UI in React

7.1. Designing the Notification Feed

• Notification List: Show all notifications with options to mark as read or delete.
• Notification Badge: Display unread notification count.
• Toast Notifications: Use libraries like react-toastify for brief notifications.

Example: Notification List Component

import React from 'react';

function NotificationList({ notifications }) {
    return (
        <div>
            {notifications.map(notification => (
                <div key={notification.id}>{notification.message}</div>
            ))}
        </div>
    );
}

export default NotificationList;

Example: Toast Notifications with react-toastify

import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

toast.configure();

function notify() {
    toast('New notification!', { position: toast.POSITION.BOTTOM_RIGHT });
}

notify();

7.2. Managing State with Redux or Context API

• Global Store: Use Redux or Context API to manage notifications globally.
• Real-Time Updates: Update the store with new notifications via WebSocket or polling.

Example: Managing State with Redux

import { createSlice } from '@reduxjs/toolkit';

const notificationSlice = createSlice({
    name: 'notifications',
    initialState: [],
    reducers: {
        addNotification: (state, action) => {
            state.push(action.payload);
        },
        markAsRead: (state, action) => {
            const notification = state.find(n => n.id === action.payload);
            if (notification) {
                notification.read = true;
            }
        }
    }
});

export const { addNotification, markAsRead } = notificationSlice.actions;
export default notificationSlice.reducer;

As a good dev, you should go on to build the notification system in react from scratch, but, if your boss needs it ASAP and you’ve got a vacation planned (or just really need a break), check out my tool. It simplifies everything and gives you ready-to-use components as your new notifications API, available in all popular SDK. So you can chill while we handle the infra! ??

The above is the detailed content of Building a Real-Time Notification Center in React. For more information, please follow other related articles on the PHP Chinese website!