То, что я имел в виду с моим предложением, - это поддерживать передачу данных между клиентом и сервером строго в сокетах. Это означает, что когда один пользователь обновляет 1 значение на своем конце, это значение будет отправлено на сервер и сохранено. После того как сервер завершит сохранение значения, это же значение будет отправлено всем другим клиентам. Таким образом, вы будете отправлять и получать только те детали, которые были изменены, без необходимости загружать все при каждом изменении.
Я не смог бы написать код точно так, как должен, поскольку у меня ограниченный опыт работы с Primus. js и мало знаю о вашем бэкэнде.
Но я бы подумал, что ваш интерфейс будет выглядеть примерно так. В приведенном ниже примере я удалил функцию fetch из события click. Вместо этого отправьте измененные данные на сервер, который должен обрабатывать эти дорогостоящие задачи.
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 на ваших элементах, которые соответствуют данным. Так, например, вы хотите изменить параграф «Бельгия», тогда он пригодится, если есть способ его распознать. Я не буду вдаваться в go в это слишком много, а просто создам что-то простое, что может помочь.
В приведенном ниже примере HTML я дал абзацу идентификатор. Этот идентификатор совпадает со значением страны, которую вы хотите обновить. Это уникальный идентификатор для поиска элемента, который вы хотите обновить. Или даже создать, если его там нет.
Пример JavaScript после этого получает данные от сервера через сокеты и проверяет действие. Это те же данные, которые мы отправляем на сервер, но только теперь, когда все получили, мы что-то делаем с ними.
Я написал функцию, которая обновит данные в вашем HTML. Он проверит наличие элемента с идентификатором, который соответствует стране, и соответствующим образом обновит свойство 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}`;
}
}
Я надеюсь, что это то, что вы ищете и / или полезно для того, что вы пытаетесь создать. Я хочу еще раз сказать, что это пример того, как это могло бы работать и не было проверено с моей стороны.
Если у вас есть какие-либо вопросы или я неясен, то, пожалуйста, не стесняйтесь спрашивать.