AngularJS + Socket.IO - how to update model? - node.js

Question

So I have this basic CRUD Todo app that I've made with AngularJS. I then thought I wanted to spice it up with some Socket.IO to make it a real time web app. However, I'm having some problems getting it to work correctly.
Setup:
Yeoman (bower+grunt)
AngularJS
RequireJS
NodeJS + MongoDB
Socket.IO
My 'grunt server' runs on localhost:9000 whereas my NodeJS/MongoDB/Socket.IO server runs on localhost:4711
What works with Socket.IO at the moment is creating and deleting a todo, but I can't seem to figure out how to update my todos. Something I thought would be quite easy.
Here is the codez.
Socket.js:
var io = require('socket.io');
exports.initialize = function(server) {
io = io.listen(server);
io.sockets.on('connection', function(socket) {
socket.on('message', function(message) {
message = JSON.parse(message);
socket.get('deletedTodo', function(err, nickname) {
socket.broadcast.send(JSON.stringify(message));
socket.send(JSON.stringify(message));
});
});
socket.on('delete_todo', function(data) {
socket.set('deletedTodo', data.title, function() {
socket.emit('todo_delete', data);
socket.broadcast.emit('todoDeleted', data);
});
});
socket.on('update_todo', function(data) {
socket.broadcast.emit('todoUpdated', data);
})
});
}
And here is my client side codez.
Services.js:
/*global define*/
define(['angular'], function(angular) {
'use strict';
return angular.module('services', [])
.factory('Todo', function($resource) {
//var baseUrl = 'http://designit-todo.eu01.aws.af.cm/api/todos/:id';
var baseUrl = 'http://localhost:port/api/todos/:id';
return $resource(baseUrl,
{port: ':4711', id: '#_id'}, {
'update': {method:'PUT'},
'delete': {method:'DELETE', isArray: true}
});
})
.factory('socket', function($rootScope) {
var socket = io.connect('http://localhost:4711');
return {
on: function(eventName, callback) {
socket.on(eventName, function() {
var args = arguments;
$rootScope.$apply(function() {
callback.apply(socket, args);
})
});
},
emit: function(eventName, data, callback) {
socket.emit(eventName, data, function() {
var args = arguments;
$rootScope.$apply(function() {
if (callback) {
callback.apply(socket, args);
}
});
});
},
send: function(eventName, data, callback) {
socket.send(eventName, data, function() {
var args = arguments;
$rootScope.$apply(function() {
if (callback) {
callback.apply(socket, args);
}
});
});
}
}
});
});
Controllers.js:
/*global define*/
define(['angular', 'services/services'], function(angular) {
'use strict';
return angular.module('controllers', ['services'])
.controller('Todos', ['$scope', '$resource', 'Todo', '$location', 'socket', function($scope, $resource, Todo, $location, socket) {
// Grab all todos.
$scope.todos = Todo.query();
socket.on('message', function(data) {
// Grab all todos when new added via socket.
$scope.todos = Todo.query();
$scope.todos.push(data);
});
// Complete/update todo.
$scope.todoCompleted = function(todo) {
todo.$update();
socket.emit('update_todo', todo);
}
socket.on('todoUpdated', function(todo) {
// Update on all connected clients.
console.log(todo);
});
$scope.removeTodo = function(todo) {
var index = $scope.todos.indexOf(todo);
socket.emit("delete_todo", JSON.stringify(index));
$scope.todos.splice(index, 1);
todo.$remove();
}
socket.on('todoDeleted', function(index) {
$scope.todos.splice(index, 1);
});
}])
.controller('Single', ['$scope', '$resource', '$routeParams', 'Todo', '$timeout', '$location', function($scope, $resource, $routeParams, Todo, $timeout, $location) {
// Grab just a single todo
$scope.todo = Todo.get({ id: $routeParams.id });
// Throttle the update PUT request
var saveTimeout;
$scope.save = function() {
$timeout.cancel(saveTimeout);
saveTimeout = $timeout(function() {
// Save the todo and then update the scope
$scope.todo.$update(function(updated_todo) {
$scope.todo = updated_todo;
});
}, 1000);
};
}])
.controller('Add', ['$scope', '$resource', 'Todo', '$location', 'socket', function($scope, $resource, Todo, $location, socket) {
$scope.todo = new Todo({});
$scope.save = function() {
if ($scope.todo.title) {
$scope.todo.$save(function(data) {
console.log(data);
socket.send(JSON.stringify(data));
$location.path('/');
});
}
}
}]);
});
So my problem is within this piece of code:
// Complete/update todo.
$scope.todoCompleted = function(todo) {
todo.$update();
socket.emit('update_todo', todo);
}
socket.on('todoUpdated', function(todo) {
// Update on all connected clients.
console.log(todo);
});
When I console.log(todo), I get the todo, but I'm able to do a "todo.$update" on it. I've also tried something like:
socket.on('todoUpdated', function(todo) {
var thisTodo = Todo.get({id: todo._id});
console.log(thisTodo);
});
But as soon as I try to do thisTodo.$update() I get an error:
PUT http://localhost:4711/api/todos 404 (Not Found) :4711/api/todos:1
What am I doing wrong? And please correct me if I'm doing anything wrong within my code. I'm still fairly new to AngularJS and Socket.IO.

Answer 1

I found another solution, but not sure if it's the right way to do it:
socket.on('todoUpdated', function(updated_todo) {
for (var i in $scope.todos) {
if ($scope.todos[i]._id == updated_todo._id) {
$scope.todos[i] = updated_todo;
}
}
});
So in the Todos controller I have the $scope.todos which holds all todos. I then loop through all these, find a match on the id and sets the found todo to the newly updated todo.
If there's a better way to do it, please do tell me :)