-1

i have an iframe that loads my chatbox, but when it refreshed it flickers, how would I go about stopping it flickering. I have included the code below that I use to refresh the Iframe its self.

window.setInterval("reloadIFrame();", 2000);

function reloadIFrame() {
window.frames["chatlogs"].location.reload();

}

Thanks in advance for any help!

user4398987
  • 35
  • 5
  • 3
    I would suggest you consider using AJAX in order to retrieve new chat logs, instead of refreshing the iFrame every two seconds. This would get rid of the flickering (which happens because the browser has to reload the page, and may be much worse depending on the latency of the network/server). – JCOC611 Jan 01 '15 at 20:00
  • Thanks for your quick reply, how would I go about using AJAX to do this? Do you know of any good tutorials on the web? – user4398987 Jan 01 '15 at 20:05
  • Yeah, it's called google. – OptimusCrime Jan 01 '15 at 20:07
  • 1
    You can start by reading [this introductory question](http://stackoverflow.com/questions/1510011/how-does-ajax-work), this one about [making vanilla-js AJAX calls](http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery), or the jQuery [help on AJAX](http://learn.jquery.com/ajax/). Google is your friend. – JCOC611 Jan 01 '15 at 20:08
  • 1
    @OptimusCrime shut up please, if you are going to be sarcastic go hang yourself :) but make sure you do it quietly. – user4398987 Jan 01 '15 at 20:25
  • @JCOC661 Thanks for your help & Happy new year! – user4398987 Jan 01 '15 at 20:26

1 Answers1

1

Not only might you want to use AJAX instead of an iframe, but depending on requirements you might also want to go look into using a server-side push. The problem being solved is, how does a client update its content when an event occurs on the server? Chat is a classic example of this. You have several options available to you, which I list below.

Frequent polling

The simplest solution. Each client repeatedly asks the server if there are any updates and is the closest to your iframe implementation. The downside comes from wasted bandwidth from communication overhead of each client request.

Long polling / Comet

when where the server keeps the clients waiting for a longer time (i.e. 5 sec) before returning as soon as an update occurs or timeout, whichever is sooner. With Comet, the server needs to be coded to keep client connections open without keeping any server threads waiting (otherwise the server will run out of threads to serve new requests and it'll be a performance nightmare).

WebSockets

New in HTML 5, WebSockets support bidirectional communication between client and server and are the recommended technology for any communication for server-side push.

You can find a good example with WebSockets here, which, guess what? Happens to be a guy trying to implement a chat application :)

Misc

For the record, you'll be able to eliminate iframe flicker if instead of keeping one iframe and refreshing it, your JavaScript creates a new hidden iframe with the same URL and position as the old one, and when it loads make it visible and delete the old iframe.

mxxk
  • 9,514
  • 5
  • 38
  • 46