Add EventSource support (#11235)

If the browser supports EventSource switch to use this instead of
polling notifications.

Signed-off-by: Andrew Thornton art27@cantab.net

1 files changed, 48 insertions, 11 deletions

diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js
index 3f2af4de91..8b843e9806 100644
--- a/web_src/js/features/notification.js
+++ b/web_src/js/features/notification.js
@@ -19,21 +19,53 @@ export function initNotificationsTable() {
 }
 
 export function initNotificationCount() {
-  if (NotificationSettings.MinTimeout <= 0) {
+  const notificationCount = $('.notification_count');
+
+  if (!notificationCount.length) {
     return;
   }
 
-  const notificationCount = $('.notification_count');
-
-  if (notificationCount.length > 0) {
-    const fn = (timeout, lastCount) => {
-      setTimeout(async () => {
-        await updateNotificationCountWithCallback(fn, timeout, lastCount);
-      }, timeout);
-    };
+  if (NotificationSettings.EventSourceUpdateTime > 0 && !!window.EventSource) {
+    // Try to connect to the event source first
+    const source = new EventSource(`${AppSubUrl}/user/events`);
+    source.addEventListener('notification-count', async (e) => {
+      try {
+        const data = JSON.parse(e.data);
+
+        const notificationCount = $('.notification_count');
+        if (data.Count === 0) {
+          notificationCount.addClass('hidden');
+        } else {
+          notificationCount.removeClass('hidden');
+        }
+
+        notificationCount.text(`${data.Count}`);
+        await updateNotificationTable();
+      } catch (error) {
+        console.error(error);
+      }
+    });
+    source.addEventListener('logout', async (e) => {
+      if (e.data !== 'here') {
+        return;
+      }
+      source.close();
+      window.location.href = AppSubUrl;
+    });
+    return;
+  }
 
-    fn(NotificationSettings.MinTimeout, notificationCount.text());
+  if (NotificationSettings.MinTimeout <= 0) {
+    return;
   }
+
+  const fn = (timeout, lastCount) => {
+    setTimeout(async () => {
+      await updateNotificationCountWithCallback(fn, timeout, lastCount);
+    }, timeout);
+  };
+
+  fn(NotificationSettings.MinTimeout, notificationCount.text());
 }
 
 async function updateNotificationCountWithCallback(callback, timeout, lastCount) {
@@ -54,9 +86,14 @@ async function updateNotificationCountWithCallback(callback, timeout, lastCount)
   }
 
   callback(timeout, newCount);
+  if (needsUpdate) {
+    await updateNotificationTable();
+  }
+}
 
+async function updateNotificationTable() {
   const notificationDiv = $('#notification_div');
-  if (notificationDiv.length > 0 && needsUpdate) {
+  if (notificationDiv.length > 0) {
     const data = await $.ajax({
       type: 'GET',
       url: `${AppSubUrl}/notifications?${notificationDiv.data('params')}`,