0

So I'd like to have these continuous, asynchronous, data loading in browser. I like Promises, they're good, aren't they? Fun to program, easy to read.

In my problem, I won't to continuously update some resource in the browser, for example an image. There are two parts then: producer and consumer. In synchronous code it could look like this:

var p = producer(),
    data = null;

while (data = p.next()) {
    consumer.update(data)
}

How would this translate to asynchronous, Promise/A+ enabled code?

UPDATE

I ended up using the following base class:

class Stream
    input  : null
    output : null
    # @param  {function} callback
    end    : (callback) -> @end_callback = callback
    # @param  {Stream} writable
    # @return {Stream}
    pipe   : (writable) -> writable.input = @ ; @output = writable
    # @param  {function} callback
    # @return {Stream}
    data   : (callback) ->
        setTimeout =>
            last = @
            chain = [@]
            while last.input != null
                last = last.input
                chain.push(last)
            last = chain.pop()
            next = =>
                thenable = last.read()
                if thenable is null and @end_callback
                    return @end_callback()
                thenable.then (value) =>
                    if not chain.length
                        callback(value)
                        @data(callback)
                    else
                        last = chain.pop()
                        last.write(value)
                        next()
            next()
        , 0
        @

Just implement read method, returning a Promise or null, or both read and write to create transforming stream.

skrat
  • 5,518
  • 3
  • 32
  • 48

2 Answers2

1

What you're talking of is more a Stream than Promises - maybe there's a better fitting library. If not, you might want to have a look at my "Lazy Promise Stream" implementation.

How would this [polling] translate to asynchronous, Promise/A+ enabled code?

The producer()'s next() method would return promises. Then, you'd loop over them in a recursive manner:

function getNext() {
    return p.next().then(function(data) {
         consumer.update(data);
         return getNext();
    });
}
getNext();

The returns could be omitted if you knew it was an infinite stream without errors, as getNext() would be always pending

Community
  • 1
  • 1
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • Nice, this is what I came up with too, I was just wondering what else is out there. Indeed my case is stream like. Thx for the link. – skrat Feb 20 '14 at 11:41
-1

I think from your description you'd probably want to use 'Web Workers' if you have a producer consumer pair.

The 'Worker' would be sent work and then return messages at certain points, such as when it's complete. You can listen to the onmessage event in the consumer and decide what to do, such as send more work, or process the result if it's complete.

Have a look at the MDN guide and see if it fits your need:

https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers

dougajmcdonald
  • 19,231
  • 12
  • 56
  • 89
  • Thanks, I'm familiar with WebWorker, my use-case is different, the producer actually uses XHR so it can't be executed in WebWorker. – skrat Feb 20 '14 at 11:33
  • XHR can be used in web workers, as detailed in the link I posted and further expanded on in here : https://developer.mozilla.org/en-US/docs/Using_workers_in_extensions – dougajmcdonald Feb 20 '14 at 13:19