Automatic page refresh when contents updated

[w3rra]

I'm working on a project that allows people to remotely control lights over the internet, a webcam is pointing at the lights so they are able to see what they are doing.
I also have a screen running firefox next to the lights that people can send their messages to via a simple form that changes the contents of a php file, and if their message does not fit on screen fully it scrolls down at a set speed via this Javascript:

<SCRIPT LANGUAGE="JavaScript">
<!--
var y = 0;

function scrollit() {
        if (y < 20000) {
                window.scroll(0,y);
                y = y + 12;
                setTimeout('scrollit()', 60);
        }

}

// -->
</SCRIPT>

I set the page to update with a Javascript meta refresh, every 10 seconds or so.

<meta http-equiv="refresh" content="10"/>

But this is the problem, sometimes the page can refresh before the scrolling has finished, so has to start again never reaching the bottom of the page. This method is also bad for bandwidth, refreshing the whole page unnecessarily.

So I basically want to know if it is possible for the browser to only refresh the page when a change is detected, I'm not exactly sure which code to use for this although I'm guessing that php may be helpful somehow.

Any help/info links are much appreciated,
Luke.
(I'm a bit of a newbie to coding so please explain stuff fully🙂)