Два дива с подгрузкой данных, как это сделать на Vue.js?

Question

[Алексей Типа]

Представьте, что у вас есть два дива, один рядом с другим.
Каждый из дивов получает данные для отображения внутри себя из json файла.
Два дива - два json файла.

Данные показываются так, что любое изменение json файла приводит к моментальному изменению внутри дива.

Помогите, пожалуйста, реализовать такую штуку.

Answer 1

[0xD34F]

Одного vue будет недостаточно - помимо отображения данных на клиенте, надо ещё следить за изменением файлов на сервере. Можно попробовать посмотреть в сторону node.js + websocket.

Набросок решения, сервер (используется ws):

const fs = require('fs');

let ID = 0;
const clients = {};

new (require('ws').Server)({
  port: 8081,
}).on('connection', ws => {
  const id = ++ID;
  clients[id] = ws;

  ws.on('close', () => {
    delete clients[id];
  });
});

fs.watch('./', (eventType, filename) => {
  if (/\.json$/.test(filename)) {
    fs.readFile(filename, 'utf8', (err, data) => {
      if (!err && data) {
        const info = JSON.stringify({
          filename,
          data: JSON.parse(data),
        });

        Object.values(clients).forEach(n => n.send(info));
      }
    });
  }
});

Клиент:

<div id="app">
  <div v-for="(data, name) in files">
    <div>{{ name }}</div>
    <div>{{ data }}</div>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    socket: null,
    files: {},
  },
  created() {
    this.socket = new WebSocket('ws://localhost:8081');
    this.socket.onmessage = e => {
      const f = JSON.parse(e.data);
      this.$set(this.files, f.filename, f.data);
    };
  },
});

Comments

[Алексей Типа]

Очень здорово! Спасибо, скорее всего это точно нужно.
У меня, правда, не так много опыта с node.js и websocket
Без пол-литра не разобраться.