Javascript Web Uygulamalarında Gerçek Zaman Bildirimleri Uygulamayı Etkiliyor

Gerçek zamanlı bildirimler modern web uygulama tasarımının temel taşı haline geldi. Kullanıcılar, WebSockets ve sunucu-Sent Events (SSE) kullanarak gerçek zamanlı bildirimleri uygulama yoluyla sizi takip ediyor ve bunları Directus gibi geri dönüşümlü sistemlerle entegre ediyor.

Neden Gerçek Zaman Bildirimleri Madde

Gerçek zamanlı bildirimler manuel sayfa yenileme veya anket için ihtiyaç ortadan kaldırır, bu gecikmeliliği saniyeler içinde milisaniyelere indirdiğinde, kullanıcı uyarıyı %20'den fazla yükseltebilir ()Nielsen Norman Group)

Kullanıcı deneyiminin ötesinde, gerçek zamanlı bildirimler de yeni etkileşim kalıpları sağlar: canlı yorum akışları, işbirlikçi düzenleme eğrileri ve sunucu-yaralama etkinliği beslemeleri. Doğru taşıma katmanı seçmek ilk teknik karardır.

WebSocket: Full-Duplex İletişim

[FONT:0]WebSockets[[Döneticiler[Döneticiler) bir müşteri ve sunucu arasındaki kalıcı, iki yönlü kanal sağlar.Bağlantıdan farklı olarak, ilk el elekten sonra bağlantı açılır, herhangi bir zamanda verileri zorlamak için bir tarafa izin verir.Bu, WebSockets'i sohbet uygulamaları, canlı finansal beslemeler ve multiplayer oyunlar için ideal kılar - düşük ücretli bir senaryoda iki yönlü mesajlaşma kritiktir.

JavaScript'te bir WebSocket Bağlantısı Oluşturun

Tarayıcının yerlisi:0) API bağlantı kurmak için bağlantı kurmak yapar.You anlıkiate a newurFLT:1), sunucunun URL'si ile nesne (örneğin güvenli bağlantı için 2 ).

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

Bağlantıyı kurduktan sonra JSON-formatted mesajları gönderebilir ve Directus'un yerleşik veya eklentili WebSocket protokolünü desteklemesi gerekir; birçok Node.js frameworks (e.g., 03.03) ve CMS'nin doğrudan teklif ettiği gibi geri dönüşleri ile tekrar tekrar gönderebilirsiniz.

Reconnection ve Heartbeats

Güçlü gerçek zamanlı bir sistem ağ kesintilerini mükemmel bir şekilde ele almalıdır. Üstel olarak geri dönen yeniden bağlantı stratejisini uygulamalıdır:

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

Ek olarak, periyodik kalp atışları (her 30-60 saniye) durarak bağlantıları tespit etmek için gönderin. Birçok WebSocket kütüphanesi bunu otomatik olarak ele alıyor, ancak ham API'yi kullanıyorsanız, bir mesaj göndermek ve aLFT:12 beklemek için bir aralığı ayarlayın.

Server-Sent Events: Simpler, One-Way Streaming

[FONT=0)Server-Sent Events (SSE)) sadece müşteri-doktora mesajları olmadan müşterilere veri göndermeye ihtiyacınız olduğunda hafif bir alternatiftir. SSE standart kullanıyor; sunucu bir üst düzeye cevap veriyor ve bağlantıya açık tutuyor.

SSE WebSockets'den daha basit, HTTP/2 üzerinde çalışır ve bağlantı düştüğünde otomatik olarak yeniden bağlantı kurar. Ancak, biyönsel iletişim desteklemez, bu yüzden haber beslemeleri, stok akışları veya sistem uyarıları için en uygun olanıdır.

Tarayıcıda EventKaynakını Kullanın

Tarayıcının REDT:16'i minimumdur:

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
}

Sunucu tarafında, her olayı metin hatları olarak biçimlendiriyorsunuz:

event: notification
data: {"message":"Your report is ready","severity":"info"}

API'nin yalnızca GET isteklerini desteklediğini ve özel başlıklar gönderemeyeceğinizi unutmayın. Kimlik doğrulama belirteçleri geçmek gerekiyorsa, sorgu parametreleri olarak uygulayın (örneğin, HTTPS'yi to avoid avoid the token).

WebSocket vs. SSE: Doğru Yaklaşımı Seç

Her iki teknoloji gerçek zamanlı bildirimleri ele geçirebiliyor, ancak farklı kullanım vakalarına hizmet ediyorlar:

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

Müşteri, sunucuya geri göndermeye veya veri göndermeye ihtiyaç duyarsa (örneğin, bir bildirime göre işaret eder), WebSocket doğal seçimdir. Basit bildirim feeds için, SSE gelişim yükünü azaltır ve standart HTTP başlıkları kullanır.

Directus ile Gerçek Zaman Bildirimleri

[FONT:0)Directus[[DÜT:1], bir REST ve GraphQL API'si ortaya koyan bir kafasız CMSdır. Gerçek zamanlı yetenekleri eklemek için, WebSocket desteğini (Socket 10.x'te başlatılabilir) veya özel bir uzatma ile bir SSE uç noktası oluşturabilirsiniz. WebSocket API, belirli koleksiyonlarda değişiklikler yapmanıza yardımcı olur, yeni bir kayıt oluşturuldığında bildirimleri zorlayabilir veya güncelleyebilirsiniz.

WebSocket Directus

Directus'un WebSocket endpoint ([[Dönemli) JSON mesajlarını abone, Vazgeçme veya gerçekleştirmeyi kabul eder. Örneğin, yeni mesajları bir araya getirmek için:

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

Bu yaklaşım, gerçek zamanlı senkronizasyonun karmaşıklığını CMS'ye taşırken, JavaScript uygulamanız yalnızca gelen verileri işlemek için ihtiyaç duyar.For authentication, send a token in the first WebSocket message (daha önce gösterilen gibi).

UI'de Bildirimleri Gösterin

Verilere sahip olduğunuz zaman, kullanıcı deneyimi, onu nasıl sunacağınıza bağlıdır. Styled tost bildirimleri en yaygın modeldir: Ekranın köşesinde görünen küçük, non-intrusive popup:Toastr)Notyf, veya , veya [[Dönetici[FLT: 5)

Alternatif olarak, özel bir bildirim bileşeni inşa edin. İşte vanilya JavaScript ve CSS kullanarak en az örnek:

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

Konteyner üst sağ köşeye sabit olduğundan ve bu tostlar yığını dikey olarak kullanın. Ekran okuyucularının yeni bildirimleri duyurmasını sağlamak için konteyner üzerinde kullanın.

Kullanıcı Tercihleri ve Bildirim Yönetimi

Tüm bildirimleri eşit derecede önemlidir. Kullanıcılara hangi olayları almak istediklerini ve hangi kanalları (örneğin, e-posta, it) sunucudaki arka uç ve filtre olayları istemciye gitmeden önce sunucuda tercihler yapabilir. Örneğin, bir kullanıcı “yeni yorum” uyarıları devre dışı bırakabilir, ancak “task” uyarıları tutabilir.

JavaScript uygulamasında, kullanıcının tercih profilini periyodik olarak getirin ve abonelik filtreleri uygun şekilde ayarlarsınız. Directus WebSockets kullanıyorsanız, tercihler değiştiğinde güncellenmiş bir abonelik sorgusu gönderebilirsiniz.

Desteksiz Tarayıcılar için geri dönüş

Modern tarayıcılar WebSockets ve SSE'yi geniş ölçüde destekliyor olsa da, eski ortamlar (örneğin, Internet Explorer 11 WebSockets, IE/Edge Legacy for SSE) polifills veya düşüş stratejileri gerektirebilir.

Ankete göre, makul bir aralığı (örneğin, 510 saniye) ayarlayın ve hiçbir olay beklemezse boş bir yanıt geri dönün. Yüklemeyi azaltmak için, [[ŞUygun sorgular veya zamanlayıcı sorgular.

Güvenlik Önergeleri

Gerçek zamanlı bağlantılar, ele alınması gereken birkaç güvenlik vektörünü tanıtmaktadır:

Performans ve Scalability

Eş zamanlı bağlantıların sayısı büyüdükçe, sunucunuz bunları verimli bir şekilde yönetmelidir.Bu optimizasyonları göz önünde bulundurun:

Bütün Birlikte Oluşturun: Tamamlanmış Bir İş Akışı

Gerçek bir dünya örneği göstermek için, bildirim için SSE kullanan bir JavaScript ön uçuyla bir araya getirelim.

  1. [FONT=0)Backend (Directus Extension):[Dönetici:[Dönetici:0) Kullanıcının JWT token'i kontrol eden, o zaman bir kuyruktan yeni bildirimleri (örneğin, Redis pub/sub veya Directus kancası) koleksiyona yazar.
  2. [FONT:0]Frontend:[Dönetici: [Dönderlik: 0,0]|Düzd:[FONTD:0)[FONTD:0))|Dönetici:[FONTD|D|D|D|Dönetici:))))))))))))))))))))))))))))))))))))))))))))))))))))))))
  3. [FONT:0)Display:[Dönetici:[Dönetici:0)[[Dönetici:0)[[Dönemli:[Dönem:[Dönemli)[[Dönemli))) Her bir bildirim, ilgili kaynağı reddetme veya açma seçenekleriyle bir özel bileşen kullanarak bir tost olarak verilir.
  4. [[Kategori:0) Kullanıcı Tercihleri:[Döneticileri değiştirdiğinde, kullanıcı bildirim ayarlarını bir form aracılığıyla günceller, Directus'sTELT:37'ye POST to Directus'un 03.50 $ 'a gönder.

Bu mimari müşteriyi yalın tutar ve Directus ve kanca sistemine ağır kaldırmayı zorlar.

Gerçek Zaman Bildirimlerini Test Etmek

dağıtmadan önce, uygulamanızı tamamen test edin:

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

Gerçek zamanlı bildirimler artık lüks değildir; modern web uygulamaları için temel bir beklentidir. WebSockets veya SSE'yi kullanarak, gerçek zamanlı kancalar sağlayan Directus gibi bir arka uç ile bir araya gelerek, altyapınıza odaklanmadan anında güncelleştirmeler yapabilirsiniz.

Küçük başlayın: Bir olay türü için basit bir tost uygulayın, sonra yavaş yavaş birden fazla kanal ve kullanıcı tercihlerine genişletin. Anahtar, altta yatan taşıma verimli ve kullanılabilir tutmaktayken kullanıcı deneyimine bağlıdır. Burada belirtilen yaklaşımlarla, üretim hazır gerçek zamanlı bir özellik için iyi olacaksınız.