socket setup

app/assets/javascripts/socketio.js

@@ -1,15 +1,74 @@
-const socket = io('http://localhost:6011');
-const jobId = document.querySelector("[data-job-id]").dataset.jobId;
+function debounce(func, wait) {
+  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', () => {
-    console.log('✅ Connected to server');
+  const jobId = document.querySelector("[data-job-id]")?.dataset?.jobId;
+  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) => {
-    console.log('📡 Received job update:', data);
+  window.addEventListener("beforeunload", () => {
+    socket.emit("leave", { room: `job-${jobId}` });
+  });
 
-    if (data.job_id === jobId) {
-      document.getElementById('status').innerText = `Job ${data.job_id}: ${data.status}`;
+  const debouncedUpdate = debounce((data) => {
+    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-resource="{{ updates_url }}"
-        data-key="status"
-        data-form=""
-      >
-    {% endif %}
+    <div
+      data-socket-update="status"
+      data-resource="{{ updates_url }}"
+      data-key="status"
+      data-job-id="{{ job.id }}"
+    >
       {{ 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=""