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.
Frontend
Backend
| Microservice | Functionality | ||||||||
|---|---|---|---|---|---|---|---|---|---|
|
Generates and stores notifications | ||||||||
| Dispatch Service | Sends notifications to different channels | ||||||||
| User Preferences Service | Manages user settings and preferences |
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');
});
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;
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;
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);
});
}
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'
});
}
});
}
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));
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();
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
