Is it possible to use TimeLine to create a message queue?

[dominate]

I am designing a simple multiplayer game (html5). I have noticed that although the server send the messages in an order, rarely the clients may receive them in another order.

 

(I know that it is possible to implement ACK for every message receiving, but I do not prefer.)

 

I have used deferred objects to wait an action to be finished before executing the new one, but this way shortly complicated the code and it became non-trivial to follow the order. So, I needed a "Manager" to organize this. At this point, I thought if I could use Timeline to do that.

 

What I want is, although the client receives the messages in wrong order, execute it in javascript in the right order.

This requires to hold a structure, like message-queue. Hold non-executed messages in a queue, in a order that is told by server. 

 

(ie: msg1: {order: 1}, msg2: {order:2 }, ... although msg2 is received before msg1, since currentOrder < msg2.order, it would wait to be executed)

 

Then, execute the messages from the front of the queue and once it is executed, delete from the queue.

 

Could I use Timeline for such job? Do you think it is appropriate for that?

[Carl]

If you don't need to replay the message queue and you are going to also want to be repeatedly removing things after they are played I don't see much value in using a timeline. I don't know a lot about how this is supposed to work but I think you would be fine displaying a message, checking and waiting for the next message to "load" and then displaying the next one. 

 

If you have some degree of assurance that all messages will load at virtually the same time but out of order it would be fairly straight-forward to just place them in a timeline based on their order. Here is a super simple demo:

 

//messages come in out of order
var messages = [
  {message:"fred", order:5},
  {message:"name", order:3},
  {message:"is", order:4},
  {message:"hello", order:1},
  {message:"my", order:2}  
];


var tl = new TimelineLite();


//messages get displayed in order
for (var i = 0 ; i<messages.length; i++){
  console.log(messages[i].message);
  tl.set("h2", {text:messages[i].message}, messages[i].order)
}

 

http://codepen.io/anon/pen/YwjLNa?editors=0011

[dominate]

Thank you for response.
 
And how about the messages that do not exist yet?
Because they are coming asynchronously.
 
Let say

 

{message: "", order: 3} did not come yet, but {order: 2} and {order: 4} already exist.

 

Then Timeline should execute {order: 2} but should wait {order: 3}, and until {order: 3} is available, not execute any thing.

Once {order: 3} comes, then continue execute: {order: 3}, {order: 4}, ...

 

I imagine that it could do that by writing onComplete, onStart etc callbacks, right?

 

What I do not calculate well is if using Timeline for this aim is more suitable then writing my own mechanism from scratch.

[OSUblake]

If you don't want to use deferred objects, store every thing in an array. When you add something to the array, sort it. If the item you need is in the correct order, remove it from the array and run your logic on it.

next = 1;

// Current items
items = [
  { order: 3 },
  { order: 2 }
];

// Add item
items = [
  { order: 1 },
  { order: 3 },
  { order: 2 }
];

// Sort
items = [
  { order: 3 },
  { order: 2 },
  { order: 1 }  
];

// Next is 1 so remove it
items = [
  { order: 3 },
  { order: 2 } 
];

[dominate]

 

If you don't want to use deferred objects, store every thing in an array. When you add something to the array, sort it. If the item you need is in the correct order, remove it from the array and run your logic on it.

next = 1;

// Current items
items = [
  { order: 3 },
  { order: 2 }
];

// Add item
items = [
  { order: 1 },
  { order: 3 },
  { order: 2 }
];

// Sort
items = [
  { order: 3 },
  { order: 2 },
  { order: 1 }  
];

// Next is 1 so remove it
items = [
  { order: 3 },
  { order: 2 } 
];

 

So do you think that using TimeLine wouldn't make sense?

[OSUblake]

Not really. Timelines are great for doing things in a sequence. Managing a timeline with things added async seems complicated and messy. And I'm still not sure how you are imagining this would work. Using an array like I showed is all you really need to manage a simple message queue.

[dominate]

I had thought that I'll also need a loop which will execute the messages when available, and suspend until the message is available.
But I think that checking & executing from the list every time a new message comes will be enough.

 

Thanks.