sockets - Vue + Socket.io + RethinkDB - リアルタイムでの基本的な CRUD 操作

Question

Vue + Rethink の使用を開始し、両方の概念が大好きで、簡単な todo リストの作成を開始しています。Vue + Express + RethinkDB が CRD (まだ更新なし) 操作で適切に動作するスケルトン アプリを作成しました。すべてがダンディですが、もちろんデータはリアルタイムではありません。タスク/ToDo アイテムを挿入すると、ページを更新して表示する必要があります。

RethinkDB の変更フィードを調べてみましたが、これは興味深いようですが、現在の Express API セットアップにそれらを実装する方法が 100% わかっているわけではありません。Socket.io で遊んでいるいくつかの例を見つけたので、それを自分のセットアップにも実装しようとしています (これは必要ですか??)。

私のコードベースはすべてここにあります: https://github.com/patrickbolle/vue-todo

すべての項目を表示する TaskList.vue コンポーネントの例を次に示します。

import TaskNew from './TaskNew'
var socket = io.connect('http://localhost:8099');

export default {
  components: {
    TaskNew
  },

  data () {
    return {
      tasks: []
    }
  },

  created () {
    this.$http.get('http://localhost:8090/api/tasks').then(response => {
      this.tasks = response.data
    })
    var vm = this
    socket.on('tasksSocket', function (task) {
      vm.tasks.push(task)
    })
  },

API に投稿して新しいタスクを作成すると、(空白の) タスクが表示されますが、既存のタスクは表示されません。

/tasks の GET ルートは次のとおりです。

//GET - All Tasks
router.get('/tasks', (req, res) => {
  r.table("tasks").changes().run().then(function(cursor) {
    cursor.each(function(err, task) {
      io.sockets.emit("tasksSocket", task);
    })
  })
})

正直なところ、私は自分自身をますます混乱させています。私は Meteor のバックグラウンドを持っているので、この Web ソケット/API を行うことは私にとって混乱を招きます。誰かが私に正しい方向への指針を与えることができれば、私はとても感謝しています.

- GET /api/tasks ルートからタスクを取得する - ソケットから新しいタスクを取得する... これも GET /api/tasks ルートにありますか? - Vue JS で表示する