Créer un centre de notifications en temps réel dans React

Les notifications maintiennent les utilisateurs informés et engagés. Un centre de notification React personnalisé vous permet de contrôler et d'adapter entièrement l'expérience utilisateur. Voici un guide concis pour en créer un à partir de zéro, couvrant à la fois les composants frontend et backend pour des mises à jour en temps réel.

1. Exigences pour un centre de notification React

• Mises à jour en temps réel : les notifications doivent apparaître instantanément sans actualisation.
• Notifications en arrière-plan : utilisez des techniciens de service pour gérer les notifications même lorsque l'application n'est pas active.
• Support multicanal : incluez les notifications dans l'application, les notifications push, les e-mails et les SMS.
• Préférences utilisateur : permet aux utilisateurs de personnaliser leurs paramètres de notification.
• Évolutivité : assurez-vous que le système peut gérer un volume élevé de notifications.
• Fiabilité : les notifications doivent être envoyées avec précision et rapidité.

2. Présentation de l'architecture du système

Frontend

• React App : affiche les notifications et gère les mises à jour en temps réel.
• Service Worker : gère les notifications en arrière-plan via l'API Notifications.
• WebSocket/Polling : maintient le flux de notification à jour en temps réel.

Backend

• Microservices :
  • Service de notification : génère et stocke des notifications.
  • Service de répartition : envoie des notifications à différents canaux.
  • Service de préférences utilisateur : gère les paramètres utilisateur pour les notifications.
• Message Queue : gère efficacement la distribution des notifications.
• Base de données : stocke les préférences utilisateur et les journaux de notification.
• Services Push : intégrez Firebase et les APN pour les notifications push.

3. Architecture back-end

3.1. Conception de microservices

Microservice Fonctionnalité ête>

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

Service de notifications Génère et stocke les notifications Service d'expédition Envoie des notifications à différents canaux Service de préférences utilisateur Gère les paramètres et préférences utilisateur

3.2. Conception de base de données

• Tableau des notifications : stocke les métadonnées des notifications.
• Tableau des préférences utilisateur : suit les paramètres utilisateur.
• Tableau des journaux : conserve un enregistrement de toutes les notifications envoyées.

Exemple : Service de notification dans 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. Communication en temps réel

4.1. Connexion WebSocket

• Serveur : gère les connexions et diffuse les notifications.
• Client : écoute les mises à jour et met à jour l'interface utilisateur en temps réel.

Exemple : Serveur WebSocket avec 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);
    });
});

Intégration côté client dans 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. Le sondage comme solution de repli

• Client : vérifie périodiquement le serveur pour de nouvelles notifications.

Exemple : implémentation d'un sondage dans 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. Intégration de l'API de notifications et des Service Workers

5.1. Travailleurs des services

• S'inscrire : gérer les notifications en arrière-plan.

Exemple : Inscription d'un travailleur de service

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. API de notifications

• Gestion des autorisations : demandez l'autorisation d'afficher les notifications.
• Déclencher des notifications : affichez les notifications même lorsque l'application n'est pas active.

Exemple : Afficher une 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. Notifications push avec Firebase et APN

6.1. Messagerie cloud Firebase (FCM)

• Configuration : inscrivez-vous sur Firebase et obtenez des jetons.
• Envoyer des notifications : utilisez des jetons pour envoyer des notifications.

Exemple : Envoi de notifications push avec FCM dans 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. Service de notification push Apple (APN)

• Intégrer : gérez les jetons d'appareil et utilisez-les pour envoyer des notifications via des APN.

7. Création de l'interface utilisateur du centre de notifications dans React

7.1. Conception du flux de notification

• Liste des notifications : affichez toutes les notifications avec des options pour marquer comme lues ou supprimées.
• Badge de notification : affiche le nombre de notifications non lues.
• Notifications Toast : utilisez des bibliothèques telles que React-toastify pour de brèves notifications.

Exemple : Composant de liste de notifications

import React from 'react';

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

export default NotificationList;

Exemple : Toast Notifications avec 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. Gestion de l'état avec Redux ou API Context

• Global Store : utilisez Redux ou l'API Context pour gérer les notifications à l'échelle mondiale.
• Mises à jour en temps réel : mettez à jour la boutique avec de nouvelles notifications via WebSocket ou un sondage.

Exemple : Gestion de l'état avec 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;

En tant que bon développeur, vous devriez continuer à créer le système de notification en réaction à partir de zéro, mais, si votre patron en a besoin dès que possible et que vous avez prévu des vacances (ou avez simplement vraiment besoin d'une pause), consultez mon outil. Il simplifie tout et vous propose des composants prêts à l'emploi comme nouvelle API de notifications, disponible dans tous les SDK populaires. Pour que vous puissiez vous détendre pendant que nous nous occupons des infra ! ??

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!