Starting to use Vue + Rethink, love the concepts of both of them and am starting to create a simple todo list. I've got a skeleton app done with Vue + Express + RethinkDB working properly with CRD (no update yet) operations. Everything is dandy, but of course the data is not real time. When I insert a task/todo item, I need to refresh the page to see it appear,etc.
I've looked into RethinkDB's change feeds, which looks interesting, but I'm not 100% sure how to implement them into my current Express API setup. I found a few examples playing around with Socket.io and now I am trying to implement that into my setup as well (is this necessary??).
My codebase is all up here : https://github.com/patrickbolle/vue-todo
Here's an example of my TaskList.vue component where I will display all the items -
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)
})
},
This sort of works, when I create a new task by posting to my API, a (blank) task appears, but none of my pre-existing tasks are shown.
Here is my GET route for /tasks:
//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);
})
})
})
Honestly I'm just confusing myself more and more, I come from a Meteor background so doing this web socket/API stuff is confusing for me. If anyone could just give me a pointer in the right direction I would be very grateful.
Essentially I need to : - Retrieve tasks from my GET /api/tasks route - Grab NEW tasks from the socket... which is also on the GET /api/tasks route? - Display them in Vue JS
