我如何只呈现更新的统计数据 - websockets

Question

现在整个 div 重新呈现，但我正在寻找一种方法来只重新呈现更新后的统计信息

这些是我现在拥有的一部分

updatestats.js

document.querySelector("#submit").addEventListener("click", function (e) {
let country = document.querySelector("#country").value
let numberCases = document.querySelector("#number").value

fetch(base_url + "/api/v1/stats/updatestats", {
    method: "put",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        "country": country,
        "numberCases": numberCases
    })
}).catch(err => {
    console.log(err);
})

primus.write({ "action": "update" })

stats.js

 primus.on("data", (json) => {
    if (json.action === "update") {
        document.querySelector("#overview").innerHTML = ""
        appendInfo()
    }
})

function appendInfo() {
    fetch(base_url + "/api/v1/stats", {
        method: "get",
        headers: {
            'Content-Type': 'application/json'
        },
    }).then(response => {
        return response.json();
    }).then(json => {
        json.data.stats.forEach(stat => {
            let country = stat.country
            let numberCases = stat.numberCases
            let p = document.createElement('p')
            let text = document.createTextNode(`${country}:   ${numberCases}`)
            p.appendChild(text)
            let overview = document.querySelector("#overview")
            overview.appendChild(p)
        })
    }).catch(err => {
        console.log(err);
    })
}


window.onload = appendInfo();

stats.pug

body
h1 Cases by country
div#overview

因此，如果我只更新国家/地区比利时，我只希望更改该统计信息。现在一切似乎都重新加载

Answer 1

要在评论中详细说明@EmielZuurbier 的建议，请尝试以下代码。

//Client-side

primus.emit('data',data);

primus.on("dataUpdated", (json) => {

});

//Server-side

primus.on('data',data =>{

//process it here and then
//send it out again


primus.emit('dataUpdated','the data you want to send to the front end');

})

Answer 2

我的建议的意思是严格在套接字中保持客户端和服务器之间的数据通信。这意味着当一个用户在其端更新 1 个值时，该值将被发送到服务器并存储。服务器完成存储值后，相同的值将发送给所有其他客户端。通过这种方式，您只需发送和接收已更改的部分，而无需在每次更改时下载所有内容。

我可能无法完全按照应有的方式编写代码，因为我对 Primus.js 的经验有限并且对您的后端知之甚少。

但我认为您的前端部分看起来像这样。在下面的示例中，我从 click 事件中删除了 fetch 函数。而是将更改后的数据发送到应该处理那些昂贵任务的服务器。

const countryElement = document.querySelector("#country");
const numberCasesElement = document.querySelector("#number");
const submitButton = document.querySelector("#submit");

submitButton.addEventListener("click", function (e) {

  let data = {
    action: 'update',
    country: countryElement.value,
    numberCases: numberCasesElement.value
  };

  primus.write(data);

});

现在服务器应该收到一条消息，表明其中一个客户端已经更新了一些数据。并且应该对这些数据做一些事情，比如存储它并让其他客户端知道这条数据已经更新。

primus.on('data', data => {
  const { action } = data;
  if (action === 'update') {

    // Function that saves the data that the socket received.
    // saveData(data) for example.

    // Send changed data to all clients.
    primus.write(data);

  }
});

服务器现在应该已经存储了更改并将更改广播给所有其他客户端。现在您自己和其他人将收到已更改的数据并可以渲染它。所以回到前端。我们通过侦听 data 事件并检查数据对象中的操作以确定要执行的操作来执行与服务器相同的技巧。

您需要一种方法来确定如何定位要更改的元素，您可以通过在与数据相对应的元素上设置 id 属性来实现。因此，例如，您想更改 'Belgium' 段落，如果有办法识别它，它就会派上用场。我不会说太多，只是创建一些简单的东西可能会成功。

在下面的 HTML 示例中，我为该段落指定了一个 ID。此 ID 与您要更新的国家/地区值相同。这是用于查找要更新的元素的唯一标识符。如果不存在，甚至可以创建。

之后的JavaScript例子通过套接字从服务器接收数据并检查动作。这与我们发送到服务器的数据相同，但现在只有当每个人都收到时我们才会对其进行处理。

我编写了一个函数来更新您 HTML 中的数据。它将检查 id 与国家/地区匹配的元素，并相应地更新 textContent 属性。这与使用 document.createTextNode 几乎相同，但步骤更少。

<div id="overview">
  <p id="Belgium">Belgium: 120</p>
</div>

const overview = document.querySelector("#overview");

primus.on('data', data => {
  const { action } = data;
  if (action === 'update') {
    updateInfo(data);
  }
});

function updateInfo(data) {
  const { country, numberCases } = data;

  // Select existing element with country data.
  const countryElement = overview.querySelector(`#${country}`);

  // Check if the element is already there, if not, then create it.
  // Otherwise update the values.
  if (countryElement === null) {
    const paragraph = document.createElement('p');
    paragraph.id = country;
    paragraph.textContent = `${country}: ${numberCases}`;
    overview.append(paragraph);
  } else {
    countryElement.textContent = `${country}: ${numberCases}`;
  }
}

我希望这就是您正在寻找的内容和/或对您尝试创建的内容有所帮助。我想再说一遍，这是它如何工作的一个例子，我还没有测试过。

如果你有任何问题或者我有什么不清楚的地方，请不要犹豫，尽管问。

我如何只呈现更新的统计数据 - websockets

How do I only render the updated stat - websockets

javascript

websocket

node.js

primus