CODEWITHSUNDEEP
javascriptjquerycomet
Carson Myers
Carson Myers

Reputation: 38564

Implementing comet on the client side

I'm trying to implement comet in my application and, being inexperienced with JavaScript, I'm not sure how to do the client side.

When the server receives a request, it just keeps it open and writes data to it when necessary:

def render_GET(self, request):
    print "connected"
    request.write("Initiated\r\n")
    reactor.callLater(random.randint(2, 10), self._delay, request)
    return NOT_DONE_YET;

def _delay(self, request):
    print "output"
    self.count += 1
    request.write("Hello... {0}\r\n".format(self.count))
    reactor.callLater(random.randint(2, 10), self._delay, request)

I've been using jQuery on the client side so far, but I can't figure out how to make it work with the server. I've been looking at the jQuery.AJAX documentation and none of the callbacks say "Hey! I just received some data!", they only say "The request is finished."

I thought the dataFilter() function was what I wanted since it lets you handle the raw data before the request finishes, but it only lets you do it just before the request finishes, and not as you receive data.

So how can I receive data continuously through an open request? As you can see in the python example, each piece of data is delimited with \r\n so I want the JavaScript to behave like a line receiver. Is this possible with jQuery or do I have to play with XMLHttpRequest/ActiveXObject directly? Is there a (simple, lightweight) library available which implements a line receiver for me?

I'm hoping to hear about an existing library and how to implement this myself, since I've had bad bad luck with comet libraries so far, and at this point I'm hoping to just write the code I need and not bother with an entire library.

Upvotes: 2

Views: 1268

Answers (3)

fatihky
fatihky

Reputation: 116

this code is the simpliest I have ever seen.

var previous_response_length = 0
  , xhr = new XMLHttpRequest();

xhr.open("GET", "http://127.0.0.1:7379/SUBSCRIBE/hello", true);
xhr.onreadystatechange = checkData;
xhr.send(null);

function checkData() {
  if(xhr.readyState == 3) {
    response = xhr.responseText;
    chunk = response.slice(previous_response_length);
    previous_response_length = response.length;
    console.log(chunk);
  }
};

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532655

A standard technique is to do a long polling request via AJAX (standard call with a really long timeout), then when receiving a response have your callback initiate another long poll when it is invoked. If the timeout expires, then you reissue the request using the error handling mechanism. Rather than having a single long request that periodically does something (like the "infinite iframe" technique), this uses a series of long requests to get data as the server has it available.

 function longPoll( url, data, cb )
 {
       $.ajax({
          url: url,
          data: data,
          timeout: Number.MAX_VALUE,
          ...other options...
          success: function(result) {
               // maybe update the data?
               longPoll( url, data, cb );
               cb.call(this,result);
          },
          error: function() {
               longPoll( url, data, cb );
          }
       }
 }

Upvotes: 2

S Pangborn
S Pangborn

Reputation: 12739

After looking at some other Comet/jQuery questions, I stumbled across this: http://code.google.com/p/jquerycomet/, which looks to be a jQuery plugin that does what you're after. If you're looking to see how it works, I'd just dig into the source.

The question where I found some great information is here.

Upvotes: 2

Related Questions