Membina Pusat Pemberitahuan Masa Nyata dalam React

Pemberitahuan memastikan pengguna mendapat maklumat dan terlibat. Pusat pemberitahuan React tersuai membolehkan anda mengawal dan menyesuaikan pengalaman pengguna sepenuhnya. Berikut ialah panduan ringkas untuk membinanya dari awal, meliputi kedua-dua komponen bahagian hadapan dan bahagian belakang untuk kemas kini masa nyata.

1. Keperluan untuk Pusat Pemberitahuan React

• Kemas Kini Masa Nyata: Pemberitahuan akan muncul serta-merta tanpa memuat semula.
• Pemberitahuan Latar Belakang: Gunakan pekerja perkhidmatan untuk mengendalikan pemberitahuan walaupun apabila apl tidak berada dalam fokus.
• Sokongan Berbilang Saluran: Sertakan pemberitahuan dalam apl, pemberitahuan tolak, e-mel dan SMS.
• Keutamaan Pengguna: Benarkan pengguna menyesuaikan tetapan pemberitahuan mereka.
• Skalabiliti: Pastikan sistem boleh mengendalikan jumlah pemberitahuan yang tinggi.
• Kebolehpercayaan: Pemberitahuan mesti dihantar dengan tepat dan segera.

2. Gambaran Keseluruhan Seni Bina Sistem

Hadapan

• Apl React: Memaparkan pemberitahuan dan mengendalikan kemas kini masa nyata.
• Pekerja Perkhidmatan: Mengurus pemberitahuan latar belakang melalui API Pemberitahuan.
• WebSocket/ Undian: Memastikan suapan pemberitahuan dikemas kini dalam masa nyata.

Bandar belakang

• Perkhidmatan mikro:
  • Perkhidmatan Pemberitahuan: Menjana dan menyimpan pemberitahuan.
  • Perkhidmatan Penghantaran: Menghantar pemberitahuan ke pelbagai saluran.
  • Perkhidmatan Pilihan Pengguna: Mengurus tetapan pengguna untuk pemberitahuan.
• Baris Gilir Mesej: Mengendalikan pengedaran pemberitahuan dengan cekap.
• Pangkalan Data: Menyimpan pilihan pengguna dan log pemberitahuan.
• Perkhidmatan Push: Sepadukan dengan Firebase dan APN untuk pemberitahuan tolak.

3. Seni Bina Bahagian Belakang

3.1. Reka Bentuk Perkhidmatan Mikro

Perkhidmatan mikro Kefungsian

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

Perkhidmatan Pemberitahuan Menjana dan menyimpan pemberitahuan Perkhidmatan Penghantaran Menghantar pemberitahuan ke saluran yang berbeza Perkhidmatan Pilihan Pengguna Mengurus tetapan dan pilihan pengguna

3.2. Reka Bentuk Pangkalan Data

• Jadual Pemberitahuan: Menyimpan metadata pemberitahuan.
• Jadual Keutamaan Pengguna: Menjejaki tetapan pengguna.
• Jadual Log: Menyimpan rekod semua pemberitahuan yang dihantar.

Contoh: Perkhidmatan Pemberitahuan dalam 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. Komunikasi Masa Nyata

4.1. Sambungan WebSocket

• Pelayan: Mengendalikan sambungan dan pemberitahuan siaran.
• Pelanggan: Mendengar kemas kini dan mengemas kini UI dalam masa nyata.

Contoh: Pelayan WebSocket dengan 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);
    });
});

Integrasi Sebelah Pelanggan dalam 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. Undian sebagai Fallback

• Pelanggan: Periksa pelayan secara berkala untuk mendapatkan pemberitahuan baharu.

Contoh: Pelaksanaan Undian dalam 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. Mengintegrasikan API Pemberitahuan dan Pekerja Perkhidmatan

5.1. Pekerja Perkhidmatan

• Daftar: Kendalikan pemberitahuan latar belakang.

Contoh: Mendaftarkan Pekerja Perkhidmatan

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 Pemberitahuan

• Pengendalian Kebenaran: Minta kebenaran untuk memaparkan pemberitahuan.
• Pemberitahuan Pencetus: Tunjukkan pemberitahuan walaupun semasa apl tidak aktif.

Contoh: Memaparkan Pemberitahuan

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. Pemberitahuan Tolak dengan Firebase dan APN

6.1. Pemesejan Awan Firebase (FCM)

• Persediaan: Daftar dengan Firebase dan dapatkan token.
• Hantar Pemberitahuan: Gunakan token untuk menghantar pemberitahuan.

Contoh: Menghantar Pemberitahuan Tolak dengan FCM dalam 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. Perkhidmatan Pemberitahuan Tekan Apple (APN)

• Sepadukan: Kendalikan token peranti dan gunakannya untuk menghantar pemberitahuan melalui APN.

7. Membina UI Pusat Pemberitahuan dalam React

7.1. Mereka bentuk Suapan Pemberitahuan

• Senarai Pemberitahuan: Tunjukkan semua pemberitahuan dengan pilihan untuk ditandai sebagai dibaca atau dipadamkan.
• Lencana Pemberitahuan: Paparkan kiraan pemberitahuan yang belum dibaca.
• Pemberitahuan Roti Bakar: Gunakan perpustakaan seperti react-toastify untuk pemberitahuan ringkas.

Contoh: Komponen Senarai Pemberitahuan

import React from 'react';

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

export default NotificationList;

Contoh: Pemberitahuan Roti Bakar dengan 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. Menguruskan Negeri dengan Redux atau Context API

• Kedai Global: Gunakan Redux atau Context API untuk mengurus pemberitahuan secara global.
• Kemas Kini Masa Nyata: Kemas kini kedai dengan pemberitahuan baharu melalui WebSocket atau tinjauan pendapat.

Contoh: Mengurus Negeri dengan 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;

Sebagai pembangun yang baik, anda harus terus membina sistem pemberitahuan sebagai tindak balas dari awal, tetapi, jika bos anda memerlukannya SEGERA dan anda telah merancang percutian (atau hanya benar-benar memerlukan rehat), lihat saya alat. Ia memudahkan segala-galanya dan memberi anda komponen sedia untuk digunakan sebagai API pemberitahuan baharu anda, tersedia dalam semua SDK yang popular. Jadi anda boleh berehat sementara kami mengendalikan infra! ??

Atas ialah kandungan terperinci Membina Pusat Pemberitahuan Masa Nyata dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!