Le risposte recenti richiedono 2 secondi per essere visualizzate

Sviluppatore
1

Esiste un modo per visualizzare le ultime risposte istantaneamente? Attualmente, utilizzo questo script:

  api.onPageChange(() => {
    if (window.location.pathname === "/") {
      const container = document.querySelector(".latest-topic-list");
      if (!container || container.dataset.modified === "true") return;

      fetch("/posts.json?order=created")
        .then(res => res.json())
        .then(data => {
          const replies = data.latest_posts
            .filter(p => p.post_number > 1 && !p.topic_slug.includes("private-message"))
            .slice(0, 15);

          const topicFetches = replies.map(post =>
            fetch(`/t/${post.topic_id}.json`)
              .then(res => res.json())
              .then(topic => {
                return {
                  post,
                  category: topic.category_id ? topic.category_name : null,
                  tags: topic.tags || []
                };
              })
          );

          Promise.all(topicFetches).then(results => {
            const rows = results.map(({ post, category, tags }) => {
              const url = `/t/${post.topic_slug}/${post.topic_id}/${post.post_number}`;
              const avatarUrl = post.avatar_template.replace("{size}", "45");
              const excerpt = post.excerpt?.replace(/<\/?[^\/>]+(\/?>|$)/g, "").slice(0, 120) + (post.excerpt?.length > 120 ? '...' : '') || '';

              const categoryHtml = category
                ? `<span style="font-size: 0.85em; color: #666;">Categoria: <strong>${category}</strong></span><br>`
                : '';

              const tagsHtml = tags.length
                ? `<span style="font-size: 0.85em; color: #666;">Tags: ${tags.map(tag => `<span style="background:#eee; padding:2px 6px; border-radius:3px; margin-right:4px;">${tag}</span>`).join("")}</span>`
                : '';

              return `
                <tr class="topic-list-item">
                  <td class="main-link clearfix">
                    <div style="display: flex; align-items: center; gap: 16px; padding: 8px 0;">
                      <div style="flex-shrink: 0;">
                        <a class="avatar-link" href="/u/${post.username}">
                          <img loading="lazy" width="45" height="45" src="${avatarUrl}" class="avatar" alt="${post.username}">
                        </a>
                      </div>
                      <div style="display: flex; flex-direction: column; justify-content: center; padding-top: 8px; padding-bottom: 8px;">
                        <span class="link-top-line" style="margin-bottom: 6px;">
                          <a href="${url}" class="title raw-link">${excerpt}</a>
                        </span>
                        <div class="link-bottom-line">
                          ${categoryHtml}
                          ${tagsHtml}
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
              `;
            }).join("");

            const latestRepliesContainer = document.createElement("div");
            latestRepliesContainer.className = "latest-replies-container";
            latestRepliesContainer.style.marginTop = "2em";

            latestRepliesContainer.innerHTML = `
              <table class="topic-list latest-topic-list">
                <thead>
                  <tr>
                    <th class="default">Últimos Comentarios</th>
                  </tr>
                </thead>
                <tbody>
                  ${rows}
                </tbody>
              </table>
            `;

            container.parentNode.insertBefore(latestRepliesContainer, container.nextSibling);
            container.dataset.modified = "true";
          });
        })
        .catch(error => {
          console.error("Erro ao buscar últimos comentários:", error);
        });
    }
  });
``````

ma ci vogliono in media 2 secondi perché il contenuto appaia. La stessa cosa succede con i blocchi della barra laterale destra con "risposte recenti". È normale?
1 Mi Piace
2

Perché stai aggiungendo del codice?

Questo funziona senza bisogno di nulla di speciale; ti dà problemi?

2 Mi Piace
3

Questo è il suo problema.

Direi che è previsto perché il codice effettua diverse richieste API.
Recupera gli ultimi post e poi effettua una richiesta per ID argomento (15 qui) per recuperare il nome della categoria.

Al momento, non so se ci sia un altro modo oltre all’uso di un plugin e all’esecuzione di una query SQL personalizzata, ad esempio.

3 Mi Piace
4

Esatto.
Ma i Blocchi della barra laterale destra fanno anche richieste? Mi dà gli stessi risultati per le risposte recenti. Ci vogliono 2 secondi per apparire.

Vedrò come creare un plugin. Grazie.

5

Sì, fa lo stesso nel recuperare gli ultimi post, ma basta qui. Non cerca di ottenere il nome della categoria, questa è la differenza.

1 Mi Piace
6

Capisco. Grazie per l’aiuto.

Cercherò di trovare un’altra soluzione

1 Mi Piace
7

Finally, I am using this for now:

cscript type="text/discourse-plugin" version="0.11.3"
  api.onPageChange(() => {
    if (window.location.pathname === "/") {
      const container = document.querySelector(".latest-topic-list");
      if (!container) return;
      
      // Prevent multiple initializations
      if (window.latestRepliesInitialized) return;
      window.latestRepliesInitialized = true;
      
      // Settings
      const POLLING_INTERVAL = 2000; // 2 seconds
      const COMMENTS_TO_SHOW = 15;
      const CACHE_DURATION = 30 * 60 * 1000; // 30 minutes
      
      // Cache keys
      const CACHE_KEY = "discourse_latest_replies_data";
      const CACHE_TIMESTAMP_KEY = "discourse_latest_replies_timestamp";
      const CACHE_LAST_ID_KEY = "discourse_latest_replies_last_id";
      
      // Store the last seen post ID for comparison
      let lastSeenPostId = parseInt(localStorage.getItem(CACHE_LAST_ID_KEY) || "0");
      let pollingIntervalId = null;
      
      console.log(`Initializing latest comments plugin (last ID in cache: ${lastSeenPostId})`);
      
      // Function to load the latest replies
      function loadLatestReplies(silent = false, forceRefresh = false) {
        // Check cache first, if not a forced update
        if (!forceRefresh) {
          const cachedData = localStorage.getItem(CACHE_KEY);
          const cacheTimestamp = localStorage.getItem(CACHE_TIMESTAMP_KEY);
          const now = Date.now();
          
          // If we have valid cache data
          if (cachedData && cacheTimestamp && now - parseInt(cacheTimestamp) < CACHE_DURATION) {
            try {
              const results = JSON.parse(cachedData);
              console.log(`Using cached data (${results.length} comments, cache from ${Math.round((now - parseInt(cacheTimestamp)) / 1000 / 60)} minutes ago)`);
              renderLatestReplies(results, false);
              
              // If not silent, no need to do more
              if (!silent) {
                return;
              }
              
              // If silent, continue to check for updates
            } catch (e) {
              console.error("Error processing cache:", e);
              // If cache error, continue to fetch fresh data
            }
          } else if (cachedData) {
            console.log("Cache expired, fetching fresh data");
          } else {
            console.log("No cache found, fetching fresh data");
          }
        } else {
          console.log("Forcing update, ignoring cache");
        }
        
        // If it is not silent, show the loading indicator
        if (!silent) {
          // If a comments container already exists, do not show the indicator
          const existingContainer = document.querySelector(".latest-replies-container");
          if (!existingContainer) {
            let loadingIndicator = document.getElementById("latest-replies-loading");
            if (!loadingIndicator) {
              loadingIndicator = document.createElement("div");
              loadingIndicator.id = "latest-replies-loading";
              loadingIndicator.innerHTML = `
                <div style="text-align: center; padding: 20px;">
                  <span class="spinner small"></span>
                  <span style="margin-left: 10px;">Loading recent comments...</span>
                </div>
              `;
              container.parentNode.insertBefore(loadingIndicator, container.nextSibling);
            }
          }
        }
        
        // Fetch the latest data
        fetch("/posts.json?order=created")
          .then(res => res.json())
          .then(data => {
            // Diagnostic log
            if (!silent) {
              console.log("Data received from API:", data.latest_posts.length);
            }
            
            const replies = data.latest_posts
              .filter(p => p.post_number > 1 && !p.topic_slug.includes("private-message"))
              .slice(0, COMMENTS_TO_SHOW);
            
            // Check for new posts
            const maxId = replies.length > 0 ? Math.max(...replies.map(post => post.id)) : 0;
            const hasNewPosts = maxId > lastSeenPostId;
            
            // Diagnostic log
            if (hasNewPosts && !silent) {
              console.log(`New posts detected. Last ID: ${lastSeenPostId}, New max ID: ${maxId}`);
            }
            
            // Update the last seen ID
            if (maxId > lastSeenPostId) {
              lastSeenPostId = maxId;
              localStorage.setItem(CACHE_LAST_ID_KEY, lastSeenPostId.toString());
            }
            
            // If there are no new posts and the check is silent, do nothing
            if (!hasNewPosts && silent && !forceRefresh) {
              return;
     ...
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.