React에서 실시간 알림 센터 구축-JS 튜토리얼-php.cn

Building a Real-Time Notification Center in React

알림은 사용자에게 계속 정보를 제공하고 참여를 유도합니다. 사용자 정의 React 알림 센터를 사용하면 사용자 경험을 완벽하게 제어하고 맞춤화할 수 있습니다. 실시간 업데이트를 위한 프런트엔드 및 백엔드 구성 요소를 모두 다루며 처음부터 하나를 구축하는 방법에 대한 간결한 가이드는 다음과 같습니다.

1. React 알림 센터 요구 사항

실시간 업데이트: 알림은 새로 고침 없이 즉시 표시되어야 합니다.
백그라운드 알림: 서비스 워커를 사용하면 앱에 초점이 맞지 않을 때에도 알림을 처리할 수 있습니다.
다중 채널 지원: 인앱 알림, 푸시 알림, 이메일, SMS를 포함합니다.
사용자 기본 설정: 사용자가 알림 설정을 맞춤 설정할 수 있습니다.
확장성: 시스템이 대량의 알림을 처리할 수 있는지 확인하세요.
신뢰성: 알림은 정확하고 신속하게 전달되어야 합니다.

2. 시스템 아키텍처 개요

프런트엔드

React 앱: 알림을 표시하고 실시간 업데이트를 처리합니다.
서비스 워커: 알림 API를 통해 백그라운드 알림을 관리합니다.
WebSocket/폴링: 알림 피드를 실시간으로 업데이트합니다.

백엔드

마이크로서비스:
- 알림 서비스: 알림을 생성하고 저장합니다.
- 배달서비스: 다양한 채널로 알림을 전송합니다.
- 사용자 기본 설정 서비스: 알림에 대한 사용자 설정을 관리합니다.
Message Queue: 알림 배포를 효율적으로 처리합니다.
데이터베이스: 사용자 기본 설정 및 알림 로그를 저장합니다.
푸시 서비스: 푸시 알림을 위해 Firebase 및 APN과 통합됩니다.

3. 백엔드 아키텍처

3.1. 마이크로서비스 설계

마이크로서비스 기능

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

알림 서비스 알림 생성 및 저장 배달서비스 다른 채널에 알림을 보냅니다 사용자 기본 설정 서비스 사용자 설정 및 기본 설정을 관리합니다

3.2. 데이터베이스 디자인

알림 테이블: 알림 메타데이터를 저장합니다.
사용자 기본 설정 테이블: 사용자 설정을 추적합니다.
로그 테이블: 전송된 모든 알림을 기록합니다.

예: 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. 실시간 커뮤니케이션

4.1. 웹소켓 연결

서버: 연결을 처리하고 알림을 방송합니다.
클라이언트: 업데이트를 수신하여 실시간으로 UI를 업데이트합니다.

예: Socket.IO가 포함된 WebSocket 서버

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);
    });
});

로그인 후 복사

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. 폴백으로 폴링

클라이언트: 주기적으로 서버에 새로운 알림이 있는지 확인합니다.

예: 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. 알림 API와 서비스 워커 통합

5.1. 서비스 워커

등록: 백그라운드 알림을 처리합니다.

예시: 서비스 워커 등록

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

권한 처리: 알림 표시 권한을 요청합니다.
알림 트리거: 앱이 활성화되지 않은 경우에도 알림을 표시합니다.

예: 알림 표시

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. Firebase 및 APN을 통한 푸시 알림

6.1. FCM(Firebase 클라우드 메시징)

설정: Firebase에 등록하고 토큰을 받으세요.
알림 보내기: 토큰을 사용하여 알림을 발송합니다.

예: Node.js에서 FCM을 사용하여 푸시 알림 보내기

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 푸시 알림 서비스(APN)

통합: 기기 토큰을 처리하고 이를 사용하여 APN을 통해 알림을 보냅니다.

7. React에서 알림 센터 UI 구축

7.1. 알림 피드 디자인

알림 목록: 읽음 또는 삭제 옵션과 함께 모든 알림을 표시합니다.
알림 뱃지: 읽지 않은 알림 개수를 표시합니다.
토스트 알림: 간단한 알림을 위해 React-toastify와 같은 라이브러리를 사용하세요.

예: 알림 목록 구성 요소

import React from 'react';

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

export default NotificationList;

로그인 후 복사

예: 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. Redux 또는 Context API를 사용하여 상태 관리

글로벌 스토어: Redux 또는 Context API를 사용하여 전 세계적으로 알림을 관리하세요.
실시간 업데이트: WebSocket 또는 폴링을 통해 새로운 알림으로 스토어를 업데이트하세요.

예: 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;

로그인 후 복사

훌륭한 개발자라면 계속해서 처음부터 반응하는 알림 시스템을 구축해야 합니다. 하지만 상사가 최대한 빨리 필요로 하고 휴가 계획이 있거나 정말로 휴식이 필요한 경우에는 제 블로그를 확인해 보세요. 도구. 모든 것을 단순화하고 모든 인기 SDK에서 사용할 수 있는 새로운 알림 API로 바로 사용할 수 있는 구성 요소를 제공합니다. 그러니 우리가 인프라를 처리하는 동안 편안하게 쉬세요! ??

위 내용은 React에서 실시간 알림 센터 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!