{"id":101598,"date":"2025-03-15T06:03:44","date_gmt":"2025-03-15T02:33:44","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/building-a-notification-system-in-react-using-the-pub-sub-pattern-58jd\/"},"modified":"2025-03-15T06:03:44","modified_gmt":"2025-03-15T02:33:44","slug":"building-a-notification-system-in-react-using-the-pub-sub-pattern-58jd","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/building-a-notification-system-in-react-using-the-pub-sub-pattern-58jd\/","title":{"rendered":"\ud83d\ude80 \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0627\u0639\u0644\u0627\u0646 \u062f\u0631 \u0648\u0627\u06a9\u0646\u0634 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0644\u06af\u0648\u06cc \u0645\u06cc\u062e\u0627\u0646\u0647 \u0632\u06cc\u0631"},"content":{"rendered":"
\n

\u062e\u062f\u0627\u062d\u0627\u0641\u0638\u06cc \u0627\u0632 \u062d\u0641\u0627\u0631\u06cc \u0648 \u0632\u0645\u06cc\u0646\u0647! \ud83c\udf89<\/p>\n

\u0645\u0642\u062f\u0645\u0647<\/strong>
\u0647\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 React \u0628\u0647 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f – \u062e\u0648\u0627\u0647 \u06cc\u06a9 \u067e\u06cc\u0627\u0645 \u0645\u0648\u0641\u0642\u06cc\u062a \u060c \u0647\u0634\u062f\u0627\u0631 \u062e\u0637\u0627 \u0628\u0627\u0634\u062f \u06cc\u0627 \u06cc\u06a9 \u0646\u0627\u0646 \u062a\u0633\u062a \u0647\u0634\u062f\u0627\u0631 \u062f\u0647\u0646\u062f\u0647. \u0627\u0645\u0627 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627 \u0631\u0627 \u062f\u0631 \u0633\u0637\u062d \u062c\u0647\u0627\u0646 \u0628\u062f\u0648\u0646 \u0631\u062f\u0648\u06a9\u0633 \u060c \u0632\u0645\u06cc\u0646\u0647 \u06cc\u0627 \u062d\u0641\u0627\u0631\u06cc \u067e\u0631\u0648\u0627\u0646\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u0645\u061f<\/p>\n

\u062c\u0648\u0627\u0628<\/strong>: \u0627\u0644\u06af\u0648\u06cc \u0627\u0646\u062a\u0634\u0627\u0631-\u0627\u0634\u062a\u0631\u0627\u06a9 (\u0645\u06cc\u062e\u0627\u0646\u0647)!<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u060c \u0645\u0627 \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0627\u0639\u0644\u0627\u0646 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u06a9\u0647:
\u2705 \u0628\u0647 \u062c\u0627\u06cc \u0632\u0645\u06cc\u0646\u0647 \u06cc\u0627 \u0631\u062f\u0648\u06a9\u0633 \u0627\u0632 \u0645\u06cc\u062e\u0627\u0646\u0647 \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f
\u2705 \u062f\u0631 \u0633\u0637\u062d \u062c\u0647\u0627\u0646\u06cc \u0628\u062f\u0648\u0646 \u062d\u0641\u0627\u0631\u06cc \u067e\u0631\u0648\u0627\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f
\u2705 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627 \u0631\u0627 \u0631\u062f \u0645\u06cc \u06a9\u0646\u062f
\u2705 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627\u06cc \u067e\u0634\u062a\u0647 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u06cc\u06a9\u062f\u06cc\u06af\u0631<\/p>\n\n

\ud83e\udde0 \u0627\u0644\u06af\u0648\u06cc Pub-Sub \u0686\u06cc\u0633\u062a\u061f<\/strong>
\u0627\u0644\u06af\u0648\u06cc \u0627\u0646\u062a\u0634\u0627\u0631-\u0627\u0634\u062a\u0631\u0627\u06a9 (Pub-Sub) \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u067e\u06cc\u0627\u0645 \u0631\u0633\u0627\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646:<\/p>\n

\u0646\u0627\u0634\u0631\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f.
\u0645\u0634\u062a\u0631\u06a9\u06cc\u0646 \u0628\u0647 \u0622\u0646 \u0648\u0642\u0627\u06cc\u0639 \u06af\u0648\u0634 \u0645\u06cc \u062f\u0647\u0646\u062f \u0648 \u0628\u0631 \u0627\u06cc\u0646 \u0627\u0633\u0627\u0633 \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u0646\u062f.
\u0627\u06cc\u0646 \u0627\u0645\u0631 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0639\u0644\u0627\u0646 \u0647\u0627 \u0645\u0646\u0627\u0633\u0628 \u0645\u06cc \u06a9\u0646\u062f \u0632\u06cc\u0631\u0627 \u0647\u0631 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f \u060c \u0648 \u0633\u06cc\u0633\u062a\u0645 \u0627\u0639\u0644\u0627\u0646 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0622\u0646 \u0631\u0627 \u0627\u062f\u0627\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f – \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645!<\/p>\n\n

\ud83d\udee0 \u0645\u0631\u062d\u0644\u0647 1: \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u062a\u0648\u0628\u0648\u0633 \u0631\u0648\u06cc\u062f\u0627\u062f (\u0628\u0631\u0646\u0627\u0645\u0647 Pub-Sub)<\/strong>
\u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 JavaScript \u0641\u0627\u0642\u062f \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0632\u06cc\u0631 \u0645\u06cc\u062e\u0627\u0646\u0647 \u062f\u0627\u062e\u0644\u06cc \u0627\u0633\u062a \u060c \u0645\u0627 \u06cc\u06a9 \u0627\u062a\u0648\u0628\u0648\u0633 \u0631\u0648\u06cc\u062f\u0627\u062f \u0633\u0628\u06a9 \u0648\u0632\u0646 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n

\ud83d\udd39 \u06cc\u06a9 \u067e\u0631\u0648\u0646\u062f\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f: eventbus.js<\/p>\n

\n
const eventBus = {\n  events: {},\n\n  subscribe(eventName, callback) {\n    if (!this.events[eventName]) {\n      this.events[eventName] = [];\n    }\n    this.events[eventName].push(callback);\n\n    \/\/ Return unsubscribe function\n    return () => {\n      this.events[eventName] = this.events[eventName].filter(fn => fn !== callback);\n    };\n  },\n\n  publish(eventName, data) {\n    if (this.events[eventName]) {\n      this.events[eventName].forEach(callback => callback(data));\n    }\n  }\n};\n\nexport default eventBus;\n<\/code><\/pre>\n
\n
\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\ud83d\udd0d \u0686\u06af\u0648\u0646\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f<\/strong>:
\u2705 \u0645\u0634\u062a\u0631\u06a9 \u0634\u062f\u0646 (\u0646\u0627\u0645 EventName \u060c \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633): \u06cc\u06a9 \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f.
\u2705 \u0627\u0646\u062a\u0634\u0627\u0631 (EventName \u060c Data): \u0647\u0645\u0647 \u062a\u0645\u0627\u0633 \u0647\u0627\u06cc \u062a\u0645\u0627\u0633 \u062a\u0644\u0641\u0646\u06cc \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u06af\u0648\u0634 \u0645\u06cc \u062f\u0647\u062f.
\u2705 \u06cc\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u0646\u0627\u0645\u0634\u062e\u0635 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f \u062a\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a \u0644\u0632\u0648\u0645 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u062a\u0645\u06cc\u0632 \u06a9\u0646\u06cc\u0645.<\/p>\n\n
\ud83d\udccc \u0645\u0631\u062d\u0644\u0647 2: \u0645\u0624\u0644\u0641\u0647 \u0644\u06cc\u0633\u062a \u0627\u0639\u0644\u0627\u0646 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/strong>
\u0644\u06cc\u0633\u062a \u0627\u0639\u0644\u0627\u0646:
\u2705 \u0628\u0631\u0627\u06cc \u0627\u0637\u0644\u0627\u0639 \u0627\u0632 \u0648\u0642\u0627\u06cc\u0639 \u0627\u0632 EventBus \u06af\u0648\u0634 \u062f\u0647\u06cc\u062f
\u2705 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u06a9\u0634\u0648\u0631 \u0645\u062d\u0644\u06cc
\u2705 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627 \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 3 \u062b\u0627\u0646\u06cc\u0647 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f<\/p>\n
\ud83d\udd39 \u06cc\u06a9 \u067e\u0631\u0648\u0646\u062f\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f: notificationList.js<\/p>\n
\n
import React, { useState, useEffect } from \"react\";\nimport eventBus from \".\/eventBus\";\nimport \".\/Notifications.css\";\n\nconst NotificationList = () => {\n  const [notifications, setNotifications] = useState([]);\n\n  useEffect(() => {\n    \/\/ Subscribe to \"notify\" event\n    const unsubscribe = eventBus.subscribe(\"notify\", (notification) => {\n      const id = Date.now();\n      setNotifications((prev) => [...prev, { id, ...notification }]);\n\n      \/\/ Auto-remove notification after 3 seconds\n      setTimeout(() => {\n        setNotifications((prev) => prev.filter((n) => n.id !== id));\n      }, 3000);\n    });\n\n    return () => unsubscribe(); \/\/ Cleanup on unmount\n  }, []);\n\n  return (\n    
\n      {notifications.map((notif) => (\n        
\n          {notif.message}\n        <\/p>\n      ))}\n    <\/div>\n  );\n};\n\nexport default NotificationList;\n<\/code><\/pre>\n
\n
\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n
\ud83c\udfa8 \u0645\u0631\u062d\u0644\u0647 3: \u0628\u0631\u062e\u06cc \u0627\u0632 \u0633\u0628\u06a9 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0639\u0644\u0627\u0646 \u0647\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/strong>
\ud83d\udd39 \u06cc\u06a9 \u067e\u0631\u0648\u0646\u062f\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f: notifications.css<\/p>\n
\n
.notifications-container {\n  position: fixed;\n  top: 20px;\n  right: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  z-index: 1000;\n}\n\n.notification {\n  padding: 10px 15px;\n  color: white;\n  font-weight: bold;\n  border-radius: 5px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  opacity: 0.9;\n  animation: fade-in 0.3s ease-in-out;\n}\n\n.notification.success {\n  background-color: green;\n}\n\n.notification.failure {\n  background-color: red;\n}\n\n.notification.warning {\n  background-color: orange;\n}\n\n@keyframes fade-in {\n  from {\n    transform: translateY(-10px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n<\/code><\/pre>\n
\n
\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n
\u26a1 \u0645\u0631\u062d\u0644\u0647 4: \u0627\u0632 \u0622\u0646 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/strong>
\u062d\u0627\u0644 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u0646\u062a\u0634\u0627\u0631 \u0627\u0639\u0644\u0627\u0646 \u0647\u0627 \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0647\u0627 \u060c \u0647\u0645\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0647\u0645 \u0628\u0628\u0646\u062f\u06cc\u0645.<\/p>\n
app.js \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f<\/p>\n
\n
import React from \"react\";\nimport eventBus from \".\/eventBus\";\nimport NotificationList from \".\/NotificationList\";\n\nconst App = () => {\n  const notify = (type, message) => {\n    eventBus.publish(\"notify\", { type, message });\n  };\n\n  return (\n    
\n      
Notification System (Pub-Sub Pattern)<\/h2>\n