How to stream new data to clients browser when index.html change, without the need of refreshing or reloading the web page

Question

I am new on Html. What i need is this. I have an index.html file on a server which is blank. I open it and write some text inside the body all the time. What i want is that when i save the html, the new data to appear on my clients browser without the need to refresh or reload the page. I have no idea on how to do it,so i haven't try anything. Is it possible? Is it simple?

Answer 1

This is a sample javascript code to read an online url and update the content container with the result.

I couldn't find a simple live update page so used my own website readme in github...

 var timeout = 2000, index = 1, cancel = false, url = 'https://raw.githubusercontent.com/petjofi/krivoshiev.com/master/README.md'; function update() { updateIndex(); load(url, done); if (!cancel) setTimeout(update, timeout); } function updateIndex() { document.getElementById("index").innerHTML = index++; } function done(result) { document.getElementById("content").innerHTML = result; } function load(url, callback) { var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) callback(xmlHttp.responseText); } xmlHttp.open("GET", url, true); // true for asynchronous xmlHttp.send(null); } 

 <button onclick="update()">start</button> <button onclick="cancel=true">stop</button> <span>updating: <span id="index">0</span></span> <div style="margin-top: 20px" id="content"></div>