Backbone Collection produces error when receiving server response

Question

I'm making a twitter client for my own friends, and im making it using Backbone.js and a php backend using Twitter oAuth API.

So here's the scenario:

1. user authenticates
2. backbone app initializes and sends a first request: window.timeline.fetch();
3. window.timeline is a backbone collection and its url is: /connect/timeline/
4. server returns 10 recent tweets in json and window.timeline adds them using Tweet model, and saves last Tweet id in a variable.
5. backbone view renders and shows them and triggers a timer
6. Timer starts ticking and runs window.timeline.fetch({add: true}); every 10 seconds, and adds /ID/ add the end of the fetch URL, to tell twitter API return tweets since that ID
7. since I passed the add option, when server returns the object, it triggers "add" event and I bind it to a method which adds every tweet and the top of the list and saves the last tweet id to use in next timer tick.

the problem is tweeter sometimes returns the same tweet twice (like RT's and stuff), and since that ID exists in backbone collection, it produces this error:

Uncaught Error: Can't add the same model to a set twice,119896811958833150

and exits the program. how can I control this situation? or is there a better way to do this?

window.Tweet  = Backbone.Model.extend({});
window.Timeline = Backbone.Collection.extend({
    model: Tweet,
    url: function(){
        var id = (window.lastId) ? window.lastId + "/?" + Math.floor(Math.random()*99999) : "";
        return "/connect/timeline/" + id;
    }
});

Thanks (and sorry for my English)

Answer 1

Well you certainly have a race condition. If you manage to send two requests and have a very slowly responding server you might get the same tweet twice. I'm not sure if that's the problem in your case but it certainly is an option.

Given this is the source of your problem, you have at least two options to solve it:

• Maintain some flag that would indicate whether you're in a process of waiting for a server response. This will allow you to prevent sending two requests concurrently from the same client instance. NOTE: This is not the same as synchonous requests. The latter blocks your UI!
• You could also check whether a tweet with the returned id already exists and only then proceed. However this is a little bit dangerous because it might hide a deeper problem with your implementation.

EDIT

I think you're problem is simply that url /timeline/SOME-ID-HERE returns all the newest tweets until the given id inclusive. I've checked the contents of the requests that your applications sends. The first one /timeline is long and ends with an id 119912841942802432. And this is the only id that is returned in your second request.

What I don't understand is how does the ID in the address relate to ids of your tweets. The second request address is /timeline/119912841942802430. On the other hand 119912841942802430 doesn't match anything in the results. 119912841942802432 (notice 2 instead of 0 at the end) does.