Table of Contents
وقد أصبحت الإخطارات في الوقت الحقيقي حجر الزاوية في تصميم التطبيقات الحديثة على الشبكة، ويتوقع المستعملون الحصول على تعليقات فورية عند وقوع الأحداث: إذ تصل رسالة حديث جديدة، ويوافق زميل على وثيقة، أو محفزات تنبيه لخادم الحاسوب، ويستلزم بناء هذه الوظيفة في جهاز شبكي يفرسكيبت تخطيطا دقيقا، وبروتوكولات الاتصال المناسبة، وتصميما مدروسا، ويسيركم هذا الدليل من خلال تنفيذ الإخطارات في الوقت الحقيقي باستخدام نظم البرمجيات الإلكترونية وأجهزة العرض.
لماذا الإشعارات بالتاريخ الحقيقي
وتقضي الإخطارات في الوقت الحقيقي على الحاجة إلى إعادة فتح صفحة يدوية أو اقتراع، تستنفد عرض النطاق الترددي وتحلل خبرة المستعملين، وعندما يتلقى المستخدم إنذارا فوريا، يظلون منخرطين ويمكن أن يردوا بسرعة.() وبالنسبة لمنابر " سايس " أو أدوات التعاون أو لوحات إدارة التجارة الإلكترونية، فإن هذه الوسائط تؤثر مباشرة على الإنتاجية والترضية.() وتظهر الدراسات أن تقليل الإخطارات من ثوان إلى أكثر من 20 في المائة().
وبالإضافة إلى خبرة المستعملين، تتيح الإخطارات في الوقت الحقيقي أيضا أنماط تفاعل جديدة: مسارات التعليق الحي، وأجهزة التحرير التعاونية، وتغذية الأحداث الجانبية للخواديم.
شبكة الإنترنت: الاتصال الكامل
WebSockets] provide a persistent, bidirectional channel between a client and server. contrast HTTP, the connection stays open after the initial handshake, allowing either side to push data at any time. This makes webSockets ideal for conversation applications, live financial feeds, and multiplayplayplayaging — any scenario where low-linktency, two — criticalway Messway.
إنشاء وصلة شبكية في جافاسكريبت
(أ) إذا أقامت شركة بروزر الأصلية AI إقامة وصل مباشرة، صرحت على أن تُعارض الجديدة [FLT:] خطة الخادم (] لإقامة صلات آمنة، ثم ترفق مستمعين لحدث ، ، [FL:]:
const socket = new WebSocket('wss://api.directus.app/websocket');
socket.onopen = () => {
console.log('WebSocket connection established.');
// Optionally send an authentication token
socket.send(JSON.stringify({ type: 'auth', token: 'your-jwt' }));
};
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.type === 'notification') {
showToast(data.payload.message);
}
};
socket.onerror = (err) => {
console.error('WebSocket error:', err);
};
socket.onclose = (event) => {
console.warn('WebSocket closed:', event.code, event.reason);
// optional reconnect logic
};
وبعد إنشاء هذه الصلة، يمكن أن ترسل رسائل محررة من شركة " جون " وأن تعالج الردود في جهاز الاتصال ، ويجب على الخادم دعم بروتوكول الشبكة العالمية؛ والعديد من أطر نودي.ي (مثلاً، ، ) ودائرة إدارة المباني تدعم مثل العرض المقدم من شركة Directus والذي تم بناؤه في شكل دعم مباشر أو مبني على شبكة الإنترنت.
معالجة مسألة الربط والنبضات القلبية
ويجب أن يتعامل نظام قوي في الوقت الحقيقي مع انقطاع الشبكات بشكل جيد، وتنفيذ استراتيجية لإعادة الربط تتراجع بشكل مكثف:
function connectWebSocket() {
const socket = new WebSocket('wss://api.directus.app/websocket');
let retryDelay = 1000;
socket.onclose = () => {
setTimeout(() => {
console.log('Reconnecting...');
connectWebSocket();
}, retryDelay);
retryDelay = Math.min(retryDelay * 2, 30000);
};
// ...other handlers
}
connectWebSocket();
وبالإضافة إلى ذلك، أرسلوا قروش قلب دورية (كل 30 إلى 60 ثانية) لكشف الاتصالات الثابتة، وهناك العديد من مكتبات الشبكة العالمية تتعامل مع هذا الأمر تلقائيا، ولكن إذا استخدمتم نظام المعلومات المسبقة عن علم الخام، فقد حددتم فترة إرسال رسالة ، وتتوقعون ردا .
الأحداث المتزامنة: سمبلر، واحد - واي سترايمنغ
Server-Sent Events (SSE)] هي بديل للوزن الخفيف عندما تحتاج فقط إلى الخادم لدفع البيانات إلى العملاء دون الحاجة إلى رسائل من العملاء إلى المحاسبين.
والأمر الأكثر بساطة هو تنفيذ نظام " ويب سوكتس " ، وهو يعمل على شبكة HTTP/2، ويعاد ربطه تلقائيا عندما تنخفض الاتصالات، غير أنه لا يدعم الاتصالات ذات الاتجاهين، وبالتالي فهو أفضل وسيلة لبث الأخبار، أو تنبيهات المخزون، أو تنبيهات النظام.
استخدام المشهد في (بروزر)
The browser’s interface is minimal:
const eventSource = new EventSource('/api/events?user_id=42');
eventSource.onopen = () => {
console.log('SSE connection opened.');
};
eventSource.addEventListener('notification', (event) => {
const data = JSON.parse(event.data);
displayNotification(data);
});
eventSource.onerror = (err) => {
console.error('EventSource error:', err);
// The browser will automatically attempt to reconnect
};
function displayNotification(data) {
// Update UI
}
على جانب الخادم، تُشكل كل حدث كخطوط نصية:
event: notification
data: {"message":"Your report is ready","severity":"info"}
ملاحظة أن " الطلب المقدم من وكالة منع التعذيب " لا يدعم سوى طلبات الحصول على معلومات عن الهوية الجنسانية ولا يمكن أن يرسل رؤساء مختصين، إذا ما أردتم أن تعبروا عن هوية المكسورين، يرفقوهم كبارامترات للاستفسار (استخدام جهاز منع الحمل لمنع تعرض المزمار).
WebSocket vs. SSE: Choosing the Right Approach
وكلاهما قادر على التعامل مع الإخطارات في الوقت الحقيقي، ولكنهما يخدمان حالات استخدام مختلفة:
| Feature | WebSocket | SSE |
|---|---|---|
| Direction | Bidirectional | Server → Client only |
| Auto‑reconnect | Must implement manually | Built‑in |
| Binary data | Yes (ArrayBuffer, Blob) | Text only (UTF‑8) |
| Browser support | Excellent (IE10+) | Good (no IE/Edge Legacy) |
| Complexity | Higher | Lower |
وإذا كان على العميل أن يرسل أوامر أو بيانات إلى الخادم (مثلاً، يُعد الإخطار كما هو مُقرّر)، فإن الشبكة الإلكترونية هي الخيار الطبيعي، ولإخطار بسيط، تخفض دائرة خدمات الدعم الخاصة النفقات العامة للتنمية ويسهل التخلص منها لأنها تستخدم رؤساء الأجهزة المعيارية في برنامج نقل الأسلحة البشرية.
إدماج الإخطارات المتعلقة بالتوقيت الحقيقي مع نظام التوجيه
Directus] is a headless CMS that exposes a REST and GraphQL API. To add real-time capabilities, you can leverage its webSocket support (introduced in Directus 10.x) or set up an SSE endpoint via a custom extension. The WebSocket API allows you to subscribe to changes on specific collections, making straight
للاشتراك في برنامج " ويب سوك "
(]) يقبل رسائل شركة JSON إلى المشتركين أو غير الكاتبين أو المصادقة، على سبيل المثال، للاستماع إلى رسائل جديدة في مجموعة :
const ws = new WebSocket('wss://cms.example.com/websocket');
ws.onopen = () => {
// Subscribe to changes on the notifications collection
ws.send(JSON.stringify({
type: 'subscribe',
collection: 'notifications',
query: { filter: { user_id: { _eq: currentUserId } } }
}));
};
ws.onmessage = (event) => {
const msg = JSON.parse(event.data);
if (msg.type === 'subscription' && msg.event === 'create') {
showNotification(msg.data);
}
};
ويزيل هذا النهج تعقيد التزامن الفعلي إلى نظام إدارة السجلات والمحفوظات، في حين أن تطبيق نظام جافاسكريبت الخاص بك لا يحتاج إلا إلى معالجة البيانات الواردة، وللتوثيق، يرسل رمزا في الرسالة الأولى على شبكة ويب سوكيت (كما هو مبين سابقا).
الإخطارات المرسلة في وحدة التفتيش المشتركة
ومتى حصلت على البيانات، تتوقف تجربة المستخدم على كيفية تقديمها، والإخطارات المحمصة المطبعية هي أكثر الأنماط شيوعا: جمهور صغير غير مقصود يظهر في زاوية الشاشة وأجهزة التفكيك بعد بضع ثوان.
وكبديل لذلك، بناء عنصر الإخطارات الجمركية، وهنا مثال ضئيل يستخدم الفانيليا جافاسكيبت ووكالة الفضاء الكندية:
function showToast(message, type = 'info') {
const toast = document.createElement('div');
toast.className = `toast toast-${type}`;
toast.textContent = message;
toast.setAttribute('role', 'alert');
document.getElementById('toast-container').appendChild(toast);
setTimeout(() => toast.remove(), 3000);
}
// CSS (simplified):
.toast {
padding: 12px 20px;
margin-bottom: 8px;
border-radius: 4px;
color: #fff;
opacity: 0.9;
transition: opacity 0.3s;
}
.toast-info { background: #007bff; }
.toast-error { background: #dc3545; }
.toast-success { background: #28a745; }
تأكد من أن الحاوية ثابتة في الزاوية العلوية وأن الخبز المحمص يتراكم عمودياً.
إدارة الأفضليات والإخطارات
ولا تتسم جميع الإخطارات بنفس القدر من الأهمية، إذ تسمح للمستعملين بتكييف الأحداث التي يريدون تلقيها ومن خلالها القنوات (في حالة التأشيرات البريدية والضغط) وتفضيلات تخزينية في الأحداث الخلفية والمرشحة على الخادم قبل دفعها إلى العميل، فعلى سبيل المثال، قد يعطل المستعمل إنذارات المتعلقة ب " التعليق الجديد " ، ولكنه يحافظ على تنبيهات " التنبيهات " .
وفي تطبيقك الخاص بـ جافاسكريبت، تقوم بصفة دورية بإحضار صورة أفضلية المستخدم وتعديل مرشحات الاشتراك وفقا لذلك، وإذا استخدمت شركة Directus WebSockets، فيمكنكم إرسال استفسار مستكمل عن الاشتراكات عند تغيير الأفضليات.
العوده الى الحشد الغير مدعوم
وفي حين أن المصفوفين الحديثين يدعمون على نطاق واسع نظام " ويب " ونظام SSE، فإن البيئات القديمة (مثلا، مستكشف الإنترنت 11 لشبكة ويب سوكيت، وشركة IE/Edge Legacy for SSE) قد تتطلب تعدد المدافن أو استراتيجيات للتراجع.
- Detect support] with or .
- Polling fallback]: Use a long-polling endpoint that returns new events as JSON. The client requests the endpoint every few seconds and processes any pending events.
- Library abstraction: Use a library like that transparently falls back from webSocket to HTTP long —polling.
وعند الاقتراع، حدد فترة زمنية معقولة (مثلاً 5 - 10 ثوان) وأعاد رداً فارغاً إذا لم تكن هناك أحداث معلقة، ولتقليل الحمولة، واستخدام رؤساء أو استفسارات قائمة على فترات زمنية.
الاعتبارات الأمنية
وتُدخل الاتصالات في الوقت الحقيقي عدة ناقلات أمنية يجب معالجتها:
- Authenticate every connection]. For webSockets, send a JWT or session token in the first message. For SSE, append a token as a query parameter ( but never in the URL if you log it).
- Validate and sanitize all data] before pushing it to the client. Even if your backend is trust, never output raw user-generated content into a notification without escaping.
- Use secure protocols] (, ) to prevent manin -inthe —middle attacks.
- Rate —limit connections per user to prevent abuse. Directus exposes rate —limiting settings that you can configure.
- لا تعرض ولاية الخادم الداخلي ] من خلال ويب سوكيت أو رسائل SSE، ولا ترد دائما سوى البيانات التي يؤذن للمستعمل برؤيةها.
الأداء والقابلية للتكرار
ومع تزايد عدد الاتصالات المتزامنة، يجب على خادمك أن يديرها بكفاءة، والنظر في هذه التحسينات على النحو الأمثل:
- ] Usese a dedicated webSocket server (e.g., separate Node.js process) and scale horizontally with a load balancer that supports webSocket sticky sessions.
- Broadcast only to relevant users]. Use rooms or channels based on user ID, group, or subscription filter to avoid sending every event to every client.
- Comppress messages]. For text‐based protocols, enable permessage deflate (WebSocket) or gzip (SSE over HTTP/2).
- (الوحدة) تتصل بالصحة مع مقاييس مثل الاتصالات المفتوحة، ووصلات الرسائل، ومعدلات الخطأ، يمكن لأدوات مثل (بروميثيوس) أن تخرّب هذه من خادمك
- Consider server —Consider events caching ]. With SSE, you can leverage HTTP caching headers if the stream is static for a period (though notifications are usually dynamic).
تركيبه معا: تدفق كامل للعمل
ولتوضيح مثال حقيقي على العالم، فلنجمع بين المساندة المباشرة وبين جبهة جافاسكريبت التي تستخدم نظام الضمان الاجتماعي للإخطارات.
- Backend (Directus extension): ] Create a custom endpoint at that checks the user’s JWT token, then streams new notifications from a queue (e.g., Redis pub/sub or a Directus hook that writes to a collection.]
- Frontend:] Upon page load, authenticate with Directus and open an ] pointing to ]. listen for events.
- Display: ] Each received notification is rendered as a fer using a custom component, with options to dismiss or open the related resource.
- User Preferences:] When the user updates their notification settings via a form, send a POST to Directus’s ]] endpoint. The backend refreshes the event stream filter for that session.
هذا الهيكل يبقي العميل يميل ويدفع بالرفع الثقيل إلى (جيروس) ونظام الخطاف
اختبار الإخطارات المتعلقة بالتاريخ الحقيقي
قبل نشرها، اختبار تنفيذكم بدقة:
- Load testing:] Use tools like Artillery] to simulate hundreds of concurrent webSocket or SSE connections. Measure latency and connection stability.
- Network throtling:] Use Chrome DevTools to simulate slow 3G or offline conditions.
- اختبارات الحشد: ] الاختبار في فايفوكس، وسافاري، وكروم، وإدج، وبالنسبة لSSE، اختبار في سافاري (الذي يفتقر إلى دعم كامل للحدث الطارئ للأحداث المعتادة - قد تحتاج إلى استخدام بوليفيل).
- Security edge cases:] Attempt to connect with expired tokens, or inject malformed JSON to ensure your mistake handlers don’t breaking the client.
خاتمة
والإخطارات في الوقت الحقيقي لم تعد ترفية؛ فهي توقع أساسي في التطبيقات الحديثة على الشبكة العالمية، عن طريق استخدام أجهزة الشبكة أو نظام SSE، إلى جانب دعم مثل شركة Directus التي تقدم خطوطاً في الوقت الحقيقي، يمكن أن تقدم تحديثات فورية دون أن تتغلب على هياكلها الأساسية، والتركيز على تكييف المستعملين، والتداعيات الحسنة، والأمن القوي لإنشاء نظام إخطار يشعر باللاسل والثقة.
البدء على نحو صغير: تنفيذ نخب بسيط لنوع واحد من أنواع المناسبات، ثم التوسع تدريجيا إلى قنوات متعددة وأفضليات المستعملين، والمفتاح هو التكرار في تجربة المستعملين مع الحفاظ على كفاءة النقل الأساسية وقابليتها للاستمرار، ومع النُهج المبينة هنا، ستكونون على ما يرام في طريقكم إلى سمة حقيقية في مجال الإنتاج.