hi guys, i make a project about water level monitoring real-time.
i managed to make it works, the output is right and accurate, but i want to make the output on the browser real-time too without the page being refreshed.
so the output will update everytime no need to refresh the page and the user just need to access the page once.
so how do i make this? any idea?
thank you. 
this is my currently code :
//JUST LOOK AT MY HTML CODE BELOW
#include <LiquidCrystal.h>
#include <SPI.h>
#include <Ethernet.h>
#define trigPin 3
#define echoPin 2
LiquidCrystal lcd(9, 8, 7, 6, 5, 4);
const int chipSelect = 10;
byte degree[8] = {
0b01110,
0b01010,
0b01110,
0b00000,
0b00000,
0b00000,
0b00000,
0b00000
};
byte mac[] = {
0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,25);
EthernetServer server(80);
void setup()
{
Ethernet.begin(mac, ip);
server.begin();
Serial.begin (9600);
pinMode(trigPin, OUTPUT);
pinMode(echoPin, INPUT);
lcd.createChar(1, degree);
lcd.begin(16, 2);
}
void loop()
{
long duration, distance;
digitalWrite(trigPin, LOW);
delayMicroseconds(10);
digitalWrite(trigPin, HIGH);
delayMicroseconds(100);
digitalWrite(trigPin, LOW);
duration = pulseIn(echoPin, HIGH);
distance = (duration/2) / 29.1;
EthernetClient client = server.available();
lcd.clear();
lcd.setCursor(0,0);
lcd.print("Water Level:");
lcd.print(distance);
lcd.print("cm");
delay(500);
if (client) {
boolean current_line_is_blank = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();
if (c == '\n' && current_line_is_blank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: keep-alive");
client.println();
client.println("<HTML>");
client.println("<HEAD>");
client.println("");
client.println("</HEAD>");
client.println("<BODY>");
client.println("<center>");
client.println("<H1>Real-time Water Level Monitoring</H1>");
client.println("<div id='time'></div>"); //THIS IS ONLY DATE AND TIME
client.println("<div id='time2'></div>");
client.println("<script type='text/javascript'>");
client.println("function berdetik()");
client.println("{var date = new Date();");
client.println("var tanggal = date.getDate();");
client.println("var bulan = date.getMonth();");
client.println("var tahun = date.getFullYear();");
client.println("var jam = date.getHours();");
client.println("var menit = date.getMinutes();");
client.println("var detik = date.getSeconds();");
client.println("window.document.getElementById('time').innerHTML = 'Date today : ' +tanggal + '/' + (bulan+1) + '/' + tahun;");
client.println("window.document.getElementById('time2').innerHTML = 'Time right now : ' +jam + ':' + menit + ':' + detik;");
client.println("setTimeout('berdetik()',1000);}");
client.println("berdetik();");
client.println("</script>");
client.println("<hr />");
client.println("<H3>");
client.print(distance); //THIS IS THE VARIABLE THAT I WANT IT TO BE UPDATED WITHOUT BEING PAGE REFRESHED
client.print(" cm");
client.println("</H3>");
client.println("</center>");
client.println("
");
client.println("</BODY>");
client.println("</HTML>");
delay(1000);
break;
}
if (c == '\n') {
// we're starting a new line
current_line_is_blank = true;
}
else if (c != '\r') {
// we've gotten a character on the current line
current_line_is_blank = false;
}
}
}
// give the web browser time to receive the data
delay(1);
client.stop();
}
delay(500);
}