كيفية تنبيه المستخدم بواسطة الإشعارات في node js

محمود سعداوي2 · 11 سبتمبر 2023

السلام عليكم.

في الكثير من المواقع يعمد الآدمين إلى إضافة إشعارات بغرض تنبيه المستخدم بإضافة الجديد للموقع.

كأمثلة

capture.jpg.5a00cf7527dd9dea6f96708f9c0b2d8b.jpg

c2.jpg.2fadadce43966c083589acc2dd05b41b.jpg

هل يعتمد إضافة مثل هذه الإشعارات على websocket دون سواها أم يوجد طرق أخرى .

ملاحظة: أنا أستخدم لغة node js و قواعد البيانات mongo db.

شكرا.

Adnane Kadri · 11 سبتمبر 2023

بالضبط نعم،

غالبا ما يتم الإعتماد على ويب سوكيت لتوفير تجربة حية لعرض البيانات من الخادم في الوقت الفعلي دون الحاجة لإعادة طلب الموارد من الخادم. وفكرتها ببساطة هي:

يقوم الخادم ببث قناة معينة، ويقوم بإستهداف حدث معين في حالة تحديث البيانات (مثال: لما نسقتبل اشعارا جديدا).
يقوم تطبيق العميل بالإشتراك في قناة معينة، ويقوم بالإستماع لأحداث معينة (مثال: يشترك في قناة المستخدم أحمد ويستمع للحدث "إشعار جديد").
لما يتم استهداف حدث جديد من قبل الخادم يلتقط العميل ذلك، ويتم استلام البيانات التي ارسلها الخادم في حدث معين عبر قناة معينة.
يتصرف العميل بناءا على ذلك، مثال: يعطي تنبيها في شكل رسالة نصية.

في تجميعة مثل MERN غالبا ما نقوم بالإعتماد على مكتبات مثل socketio للتعامل مع هاته الجزئية. فيما يلي بعض الخطوات العامة للقيام بذلك:

تأكد من تثبيت Node.js على جهاز الخادم الخاص بك.
قم بإنشاء مجلد جديد لمشروعك وقم بتثبيت مكتبة Socket.io باستخدام npm:
```
npm install socket.io
```
.

أنشئ خادما باستخدام Node.js وSocket.io:

const http = require('http');
const express = require('express');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

// قم بإعداد مجلد الويب العام (public) لاحتياجات العميل (الملفات الثابتة مثل CSS و JavaScript).
app.use(express.static(__dirname + '/public'));

// رسالة ترحيبية عند الاتصال بالخادم.
io.on('connection', (socket) => {
  console.log('عميل متصل');

  // إرسال إشعار إلى العميل الجديد عند الاتصال بنجاح.
  socket.emit('notification', 'مرحبًا بك! أنت متصل الآن.');

  // قم بالاستماع إلى أحداث العميل والتفاعل معها.
  socket.on('disconnect', () => {
    console.log('عميل غير متصل');
  });
});

// تشغيل الخادم على المنفذ 3000.
server.listen(3000, () => {
  console.log('الخادم يعمل على المنفذ 3000');
});

.

الآن سنقوم بإنشاء العميل (واجهة المستخدم) باستخدام HTML وJavaScript:

<!-- public/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Socket.io Notifications</title>
</head>
<body>
  <h1>Socket.io Notifications</h1>
  <div id="notification"></div>

  <!-- تضمين مكتبة Socket.io -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // الاتصال بالخادم باستخدام Socket.io
    const socket = io();

    // استماع لإشعارات الخادم
    socket.on('notification', (message) => {
      const notificationElement = document.getElementById('notification');
      notificationElement.innerHTML = message;
    });
  </script>
</body>
</html>

عبدالباسط ابراهيم · 11 سبتمبر 2023

بتاريخ 36 دقائق مضت قال محمود سعداوي2:

هل يعتمد إضافة مثل هذه الإشعارات على websocket دون سواها أم يوجد طرق أخرى .

يوجد عدة طرق لإضافة الإشعارات التي تنبه المستخدمين بالمحتوى الجديد في الموقع باستخدام Node.js وMongoDB:

WebSockets - تسمح بالاتصال المستمر بين الخادم والمتصفح لإرسال البيانات في الوقت الفعلي. تحتاج إلى مكتبة مثل Socket.IO.
Server-Sent Events (SSE) - تسمح بالاتصال أحادي الاتجاه من الخادم إلى المتصفح لإرسال التحديثات. سهلة الاستخدام في Node.js.
Polling - يقوم المتصفح بطلب بيانات جديدة من الخادم بشكل منتظم. سهل التنفيذ مع AJAX ولكن أقل كفاءة.
Push Notifications - إرسال إشعارات من خلال بروتوكولات مثل FCM من Firebase أو PWA. لكن تحتاج مزيد من الإعداد.
WebHooks - تسمح للخادم بإشعار نقطة نهاية محددة عند حدوث تغييرات. مفيدة للتكامل مع خدمات أخرى.

أوصى بـ WebSockets أو Server-Sent Events كأسهل الخيارات مع Node.js وMongoDB. ولكن تختلف التفضيلات بناءً على المتطلبات المحددة.لذلك يفضل الإطلاع على التقنيات السابقة والقراءة عنها

Mustafa Suleiman · 11 سبتمبر 2023

يمكن تنبيه المستخدم بواسطة الإشعارات في Node.js باستخدام طرق مختلفة، منها:

Websockets: هي الطريقة الأكثر شيوعًا، حيث تقوم بإنشاء اتصال دائم بين الخادم والمستخدم، مما يتيح لك إرسال الإشعارات إلى المستخدم حتى عندما لا يكون نشطًا في التطبيق.
Push notifications: هي طريقة أخرى شائعة، حيث تقوم بإرسال إشعارات إلى جهاز المستخدم حتى عندما لا يكون التطبيق مفتوحًا.
Server-sent events: هي طريقة أقل شيوعًا، حيث تقوم بنشر أحداث من الخادم إلى المستخدم.

في حالة استخدامك لـ Node.js و MongoDB، فبإمكانك اعتماد أي من تلك الطرق الثلاث لإنشاء إشعارات للمستخدمين.

وإليك مثال لاستخدام WebSockets:

// Create a WebSocket server.
const server = new WebSocketServer({ port: 8080 });

// Handle new connections.
server.on('connection', (connection) => {
  // Subscribe the user to notifications.
  connection.send(JSON.stringify({
    type: 'subscribe',
  }));

  // Listen for notifications from the server.
  connection.on('message', (message) => {
    // Display the notification to the user.
    console.log(message);
  });
});

// Start the server.
server.listen();

قمت بإنشاء WebSocket server يستمع على المنفذ 8080، وعند اتصال المستخدم، نقوم بتسجيله في الإشعارات. ثم، بتلقي الإشعارات من الخادم وعرضها على المستخدم.

وإليك مثال لاستخدام Push notifications:

// Import the WebPush library.
const WebPush = require('web-push');

// Generate VAPID keys.
const vapidKeys = generateVAPIDKeys();

// Register the user for push notifications.
const subscribeURL = new URL('/subscribe', window.location);
subscribeURL.searchParams.set('vapidKey', vapidKeys.publicKey);
subscribeURL.searchParams.set('vapidSecret', vapidKeys.privateKey);

// Subscribe the user.
window.fetch(subscribeURL).then((response) => {
  if (response.ok) {
    // The user has subscribed successfully.
  } else {
    // The user has not subscribed successfully.
  }
});

// Send a push notification to the user.
const notification = {
  title: 'New notification',
  body: 'This is a new notification.',
};

// Send the notification.
WebPush.sendNotification(vapidKeys.publicKey, notification);

نقوم أولاً باستيراد مكتبة WebPush، والتي توفر وظائف لإنشاء وإرسال إشعارات الدفع، ثم إنشاء مفاتيح VAPID، والتي ستستخدمها لإرسال الإشعارات، ثم تسجيل المستخدم للإشعارات باستخدام URL خاص. أخيرًا، نقوم بإرسال إشعار إلى المستخدم.

وهنا مثال آخر لاستخدام Server-sent events:

// Create a server-sent event stream.
const stream = new EventSource('/events');

// Handle new events.
stream.on('message', (event) => {
  // Display the event to the user.
  console.log(event);
});

// Start the stream.
stream.start();

يتم إنشاء server-sent event stream من URL، ثم تلقي أحداث من الخادم وعرضها على المستخدم.

كيفية تنبيه المستخدم بواسطة الإشعارات في node js

السؤال

محمود سعداوي2

3 أجوبة على هذا السؤال

Recommended Posts

Adnane Kadri

عبدالباسط ابراهيم

Mustafa Suleiman

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية