socket setup

app/assets/javascripts/socketio.js

@@ -1,15 +1,74 @@
-const socket = io('http://localhost:6011');
+function debounce(func, wait) {
-const jobId = document.querySelector("[data-job-id]").dataset.jobId;
+  let timeout;
+  return function (...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
 
+document.addEventListener("DOMContentLoaded", function () {
+  const isJobPage = window.location.pathname.includes("/jobs/");
+  if (!isJobPage) return;
 
-  socket.on('connect', () => {
+  const jobId = document.querySelector("[data-job-id]")?.dataset?.jobId;
-    console.log('✅ Connected to server');
+  if (!jobId) return;
+
+  const socket = io("http://localhost:6011");
+
+  socket.on("connect", () => {
+    console.log("Connected to Socket.IO server");
+    socket.emit("join", { room: `job-${jobId}` });
+    console.log("join", { room: `job-${jobId}` });
   });
 
-  socket.on('job_update', (data) => {
+  window.addEventListener("beforeunload", () => {
-    console.log('📡 Received job update:', data);
+    socket.emit("leave", { room: `job-${jobId}` });
+  });
 
-    if (data.job_id === jobId) {
+  const debouncedUpdate = debounce((data) => {
-      document.getElementById('status').innerText = `Job ${data.job_id}: ${data.status}`;
+    updateAllJobSections();
+  }, 1000);
+
+  socket.on("job_updated", (data) => {
+    if (data.job_id !== jobId) return;
+    debouncedUpdate(data);
+  });
+
+  function updateAllJobSections() {
+    const resourceEl = document.querySelector('[data-socket-update="status"]');
+    const url = resourceEl?.dataset?.resource;
+
+    if (!url) {
+      console.warn("No resource URL found for job updates");
+      return;
     }
+
+    fetch(url)
+      .then((res) => res.json())
+      .then(({ status, counts, notifications }) => {
+        const sections = {
+          status: document.querySelector('[data-socket-update="status"]'),
+          counts: document.querySelector('[data-socket-update="counts"]'),
+          notifications: document.querySelector('[data-socket-update="notifications"]'),
+        };
+
+        if (status && sections.status) {
+          sections.status.innerHTML = status;
+          console.log("status partial updated");
+        }
+        if (counts && sections.counts) {
+          sections.counts.innerHTML = counts;
+          console.log("counts partial updated");
+        }
+        if (notifications && sections.notifications) {
+          sections.notifications.innerHTML = notifications;
+          console.log("notifications partial updated");
+        }
+      })
+      .catch((err) => {
+        console.error("Error fetching job update partials:", err);
       });
+  }
+
+
+});

app/templates/views/jobs/job.html

@@ -9,35 +9,22 @@
 {% endblock %}
 
 {% block maincolumn_content %}
-{{ socket_block(partials, job_id, "status") }}
-<div id="status" data-key="status" data-job-id="{{ job.id }}">
-  ⏳ Waiting for updates...
-</div>
-<!-- <div data-key="status">
-  {{ partials["status"]|safe }}
-</div> -->
-<!-- {{emit_job_update}}
-{{job.id}} -->
 
     {{ page_header("Message status") }}
-    {% if not job.finished_processing %}
     <div
-        data-module="update-content"
+      data-socket-update="status"
       data-resource="{{ updates_url }}"
       data-key="status"
-        data-form=""
+      data-job-id="{{ job.id }}"
     >
-    {% endif %}
       {{ partials['status']|safe }}
-    {% if not job.finished_processing  %}
       </div>
-    {% endif %}
     {% if not finished %}
       <div
-        data-module="update-content"
+        data-socket-update="counts"
+        data-job-id="{{ job.id }}"
         data-resource="{{ updates_url }}"
         data-key="counts"
-        data-form=""
       >
     {% endif %}
       {{ partials['counts']|safe }}
@@ -50,7 +37,8 @@
     </p>
     {% if not job.processing_finished %}
       <div
-        data-module="update-content"
+        data-socket-update="notifications"
+        data-job-id="{{ job.id }}"
         data-resource="{{ updates_url }}"
         data-key="notifications"
         data-form=""

notifications_utils/markdown.py

@@ -1,8 +1,10 @@
-from flask import current_app
-import mistune
-from notifications_utils.formatters import create_sanitised_html_for_url
-import re
 import html
+import re
+
+import mistune
+from flask import current_app
+
+from notifications_utils.formatters import create_sanitised_html_for_url
 
 LINK_STYLE = "word-wrap: break-word; color: #1D70B8;"
 

package-lock.json

@@ -25,6 +25,7 @@
         "python": "^0.0.4",
         "query-command-supported": "1.0.0",
         "sass-embedded": "^1.86.1",
+        "socket.io-client": "^3.1.3",
         "textarea-caret": "3.1.0",
         "timeago": "1.6.7",
         "vinyl-buffer": "^1.0.1",
@@ -2637,12 +2638,6 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
-    "node_modules/@socket.io/component-emitter": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
-      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
-      "license": "MIT"
-    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -2703,6 +2698,12 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/component-emitter": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.14.tgz",
+      "integrity": "sha512-lmPil1g82wwWg/qHSxMWkSKyJGQOK+ejXeMAAWyxNtVUD0/Ycj2maL63RAqpxVfdtvTfZkRnqzB0A9ft59y69g==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
@@ -3833,6 +3834,12 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA==",
+      "license": "MIT"
+    },
     "node_modules/backstopjs": {
       "version": "6.3.25",
       "resolved": "https://registry.npmjs.org/backstopjs/-/backstopjs-6.3.25.tgz",
@@ -3949,6 +3956,14 @@
         }
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz",
+      "integrity": "sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -4629,6 +4644,15 @@
       "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
       "license": "MIT"
     },
+    "node_modules/component-emitter": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.1.tgz",
+      "integrity": "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -5728,29 +5752,34 @@
       }
     },
     "node_modules/engine.io-client": {
-      "version": "6.6.3",
+      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-4.1.4.tgz",
-      "integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==",
+      "integrity": "sha512-843fqAdKeUMFqKi1sSjnR11tJ4wi8sIefu6+JC1OzkkJBmjtc/gM/rZ53tJfu5Iae/3gApm5veoS+v+gtT0+Fg==",
       "license": "MIT",
       "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
+        "base64-arraybuffer": "0.1.4",
+        "component-emitter": "~1.3.0",
         "debug": "~4.3.1",
-        "engine.io-parser": "~5.2.1",
+        "engine.io-parser": "~4.0.1",
-        "ws": "~8.17.1",
+        "has-cors": "1.1.0",
-        "xmlhttprequest-ssl": "~2.1.1"
+        "parseqs": "0.0.6",
+        "parseuri": "0.0.6",
+        "ws": "~7.4.2",
+        "xmlhttprequest-ssl": "~1.6.2",
+        "yeast": "0.1.2"
       }
     },
     "node_modules/engine.io-client/node_modules/ws": {
-      "version": "8.17.1",
+      "version": "7.4.6",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
-      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
       "license": "MIT",
       "engines": {
-        "node": ">=10.0.0"
+        "node": ">=8.3.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
+        "utf-8-validate": "^5.0.2"
       },
       "peerDependenciesMeta": {
         "bufferutil": {
@@ -5762,12 +5791,15 @@
       }
     },
     "node_modules/engine.io-parser": {
-      "version": "5.2.3",
+      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.3.tgz",
-      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "integrity": "sha512-xEAAY0msNnESNPc00e19y5heTPX4y/TJ36gr8t1voOaNmTojP9b3oK3BbJLFufW2XFPQaaijpFewm2g2Um3uqA==",
       "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "0.1.4"
+      },
       "engines": {
-        "node": ">=10.0.0"
+        "node": ">=8.0.0"
       }
     },
     "node_modules/entities": {
@@ -7734,6 +7766,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+      "integrity": "sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==",
+      "license": "MIT"
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -10540,6 +10578,18 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/parseqs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
+      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==",
+      "license": "MIT"
+    },
+    "node_modules/parseuri": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
+      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==",
+      "license": "MIT"
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -12365,27 +12415,31 @@
       }
     },
     "node_modules/socket.io-client": {
-      "version": "4.8.1",
+      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-3.1.3.tgz",
-      "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "integrity": "sha512-4sIGOGOmCg3AOgGi7EEr6ZkTZRkrXwub70bBB/F0JSkMOUFpA77WsL87o34DffQQ31PkbMUIadGOk+3tx1KGbw==",
       "license": "MIT",
       "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
+        "@types/component-emitter": "^1.2.10",
-        "debug": "~4.3.2",
+        "backo2": "~1.0.2",
-        "engine.io-client": "~6.6.1",
+        "component-emitter": "~1.3.0",
-        "socket.io-parser": "~4.2.4"
+        "debug": "~4.3.1",
+        "engine.io-client": "~4.1.0",
+        "parseuri": "0.0.6",
+        "socket.io-parser": "~4.0.4"
       },
       "engines": {
         "node": ">=10.0.0"
       }
     },
     "node_modules/socket.io-parser": {
-      "version": "4.2.4",
+      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.5.tgz",
-      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "integrity": "sha512-sNjbT9dX63nqUFIOv95tTVm6elyIU4RvB1m8dOeZt+IgWwcWklFDOdmGcfo3zSiRsnR/3pJkjY5lfoGqEe4Eig==",
       "license": "MIT",
       "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
+        "@types/component-emitter": "^1.2.10",
+        "component-emitter": "~1.3.0",
         "debug": "~4.3.1"
       },
       "engines": {
@@ -13769,9 +13823,9 @@
       "dev": true
     },
     "node_modules/xmlhttprequest-ssl": {
-      "version": "2.1.2",
+      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.6.3.tgz",
-      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "integrity": "sha512-3XfeQE/wNkvrIktn2Kf0869fC0BN6UpydVasGIeSm2B1Llihf7/0UfZM+eCkOw3P7bP4+qPgqhm7ZoxuJtFU0Q==",
       "engines": {
         "node": ">=0.4.0"
       }
@@ -13864,6 +13918,12 @@
         "fd-slicer": "~1.1.0"
       }
     },
+    "node_modules/yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+      "integrity": "sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==",
+      "license": "MIT"
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

package.json

@@ -41,6 +41,7 @@
     "python": "^0.0.4",
     "query-command-supported": "1.0.0",
     "sass-embedded": "^1.86.1",
+    "socket.io-client": "^3.1.3",
     "textarea-caret": "3.1.0",
     "timeago": "1.6.7",
     "vinyl-buffer": "^1.0.1",