นำเวลาที่ Server มาแสดงที่ Browser ง่ายๆ โดย php และ JavaScript

พอดีงานยุ่งๆ เลยไม่ได้เขียนอะไรมาอาทิตย์หนึ่ง วันนี้ว่างหน่อย ก็เลยเขียน วิธีการเขียนโปรแกรมให้แสดง เวลาที่หน้า website ของเรา แต่ว่าไม่ใช้เวลา ที่เครื่องของ user เหมือนกับ script ที่ใช้กันทั่วๆ ไป แต่ผมจะใช้เวลาที server มาแสดงที่ website ของเราแทน โดยจะต้องใช้ทั้ง php และ javaScript

ใน website โดยทั่วๆ ไปที่มีการแสดง เวลาในหน้า website มักจะเป็น เวลาของเครื่องของผู้ใช้เอง ไม่ใช้เวลาที่เครื่อง server (ไม่เชื่อคุณลองทำการเปลี่ยน เวลาที่เครื่องของคุณ แล้วทำการ refresh หน้า website นั้นอีกครั้งหนึง ก็จะพบว่าเวลาที่แสดงเป็นเวลาที่เราเปลี่ยนนั้นเอง)

บางคนก็จะบอกว่าไม่เห็นยากเลย สั่ง แสดงเวลาจาก server ก็ได้ แค่ใช้ print date(“Y/m/d H:i:s”); เพียงเท่านี้
เราก็ได้เวลาจาก server มาแสดงที่หน้า website เราแล้ว อะอะ แต่ว่าเวลาที่แสดงตรงนี้มันหยุดนิ้งนะครับ มันไม่ยอมเดิน
โดยวิธีการที่จะทำให้มันเดิน เราก็ต้องใช้ JavaScript เข้ามาช่วย

มาลองดูตัวอย่างกันก่อนดีกว่า ดูตัวอย่าง

จาก นั้นให้คุณลองทำการเปลี่ยนเวลาที่เครื่องของคุณดู แล้วลอง refresh อีกครั้ง จะพบว่าเวลาที่เปลี่ยนไป จะเปลี่ยน เฉพาะตรง Local Time เท่านั้น ในส่วนของ Server Time นั้นก็จะเดินของมันไปตามปกติ

จากตัวอย่างผมมีเวลาอยู่ 2 ตัวคือ Server Time และ Local Time เรามาดูจาก Local Time กันก่อนว่าทำงานยังไง

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="local_time" style="background-color:#FFCC00">&nbsp;</div>
<script language="JavaScript1.2">
<!--
function local_date(now_time) {
    current_local_time = new Date();
 
    local_time.innerHTML = current_local_time.getDate() + "/" + (current_local_time.getMonth()+1) + "/" + current_local_time.getYear() + " " + current_local_time.getHours() + ":" + current_local_time.getMinutes() + ":" +current_local_time.getSeconds();
 
    setTimeout("local_date()",1000);
}
 
setTimeout("local_date()",1000);
//-->
</script>

จากตัวอย่างของ Local Time ผมจะอธิบายการทำงานทีละส่วนดังนี้

เริ่ม จาก setTimeout(“local_date()”,1000); จะเป็นการใช้ function setTimeout() ของ JavaScript ให้ทำการเรียกใช้ function local_date() เมื่อครบกำหนดเวลาที่ตั้งไว้ ในที่นี้คือ 1 วินาที

จากนั้นที่ function local_date() จะทำการนำค่าของเวลาปัจจุบันในเครื่องของ user มาเก็บไว้ที่ ตัวแปร current_local_time

หลังจากนั้น ก็จะเป็นส่วนของการแสดงผล คือ

local_time.innerHTML = current_local_time.getDate() + “/” + (current_local_time.getMonth()+1) + “/” + current_local_time.getYear() + ” ” + current_local_time.getHours() + “:” + current_local_time.getMinutes() + “:” +current_local_time.getSeconds();

โดยมี methods ของ object date ที่ใช้ดังนี้คือ

.getDate() // แสดงวัน
.getMonth() // แสดงเดือน ที่ต้องบวก 1 เพิ่มเนื่องจากเดือนของ JavaScript เริ่มจาก 0 – 11 ไม่ใช้ 1 – 12 เหมือนกับ PHP
.getYear() // แสดงปี
.getHours() // แสดงชัวโมง
.getMinutes() // แสดงนาที
.getSeconds() // แสดงวินาที

จากนั้นก็จะมาทำการหน่วงเวลา อีกครั้งโดย function setTimeout(“local_date()”,1000);
จากนั้นก็จะกลับมาเข้า loop ของ function local_date อีกครั้งเมื่อครบกำหนด 1 วินาที ทีนี้ก็จะเป็นอย่างนี้ไปเรื่อยๆ

ต่อไปเรามาดูในส่วนของ Server Time กันต่อเลย

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div id="server_time" style="background-color:#339999">&nbsp;</div>
 
<?php
    $current_server_time = date("Y")."/".date("m")."/".date("d")." ".date("H:i:s");
?>
 
<script language="JavaScript1.2">
<!--
function server_date(now_time) {
    current_time1 = new Date(now_time);
    current_time2 = current_time1.getTime() + 1000;
    current_time = new Date(current_time2);
 
    server_time.innerHTML = current_time.getDate() + "/" + (current_time.getMonth()+1) + "/" + current_time.getYear() + " " + current_time.getHours() + ":" + current_time.getMinutes() + ":" +current_time.getSeconds();
 
    setTimeout("server_date(current_time.getTime())",1000);
}
 
setTimeout("server_date('<?=$current_server_time?>')",1000);
//-->
</script>

การทำงานในส่วนของ Server Time จะเริ่มจากในส่วนของ php ก่อนโดยการนำค่าเวลาจาก server มาเก็บลงตัวแปร $current_server_time

1
2
3

<?php
    $current_server_time = date("Y")."/".date("m")."/".date("d")." ".date("H:i:s");
?>

จากนั้นจะทำการ print ค่าของ $current_server_time ลงไปในส่วนของ JavaScript เพื่อให้เป็นค่าของเวลาที่จะนับต่อไป

setTimeout(“server_date(‘‘)”,1000);

เมื่อครบกำหนด 1 วินาที ของ function setTimeout ก็จะเป็นการไปเรียกใช้ function server_date() โดยที่มีการส่งค่าของ
เวลาที่ได้ จาก server ไปด้วย

ในส่วนของ function server_date() จะเริ่มจาก การรับค่าที่ได้ มาบวกเพิ่มอีก 1 วินาที

current_time1 = new Date(now_time);
current_time2 = current_time1.getTime() + 1000;
current_time = new Date(current_time2);

จากนั้นนำค่าที่ได้มาแสดงผล

server_time.innerHTML = current_time.getDate() + “/” + (current_time.getMonth()+1) + “/” + current_time.getYear() + ” ” + current_time.getHours() + “:” + current_time.getMinutes() + “:” +current_time.getSeconds();

หลังจากที่แสดงผลแล้วก็จะเข้ามาถึง function การหน่วงเวลาอีกครั้งหนึ่ง โดยในการหน่วงครั้งนี้ก็จะส่งค่าของเวลาที่บวกแล้ว กลับไปด้วย

setTimeout(“server_date(current_time.getTime())”,1000);

หลังจากนั้นก็จะเข้าวงจรนี้เรื่อยๆ ที่นี้เราก็ได้นาฬิกา ที่มีเวลาตรงกับ server มาแสดงหน้า website ของเราแย้ว

ที่นี้มาดู script เต็มๆ ของตัวอย่างที่ผมทำไว้เลย

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<html>
<head>
<title>Server &amp; Local Time</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<style type="text/css">
<!--
.style1 {font-family: "Microsoft Sans Serif", Tahoma}
-->
</style>
</head>
 
<body>
<table width="353" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
  <tr bgcolor="#FFFFFF">
    <td width="105" bgcolor="#FFFFFF"><span class="style1">Server Time </span></td>
    <td width="237" bgcolor="#FFFFFF">
<span class="style1">
<!---------------- Server Time ---------------------->
<div id="server_time" style="background-color:#339999">&nbsp;</div>
 
<?php
    $current_server_time = date("Y")."/".date("m")."/".date("d")." ".date("H:i:s");
?>
 
<script language="JavaScript1.2">
<!--
function server_date(now_time) {
    current_time1 = new Date(now_time);
    current_time2 = current_time1.getTime() + 1000;
    current_time = new Date(current_time2);
 
    server_time.innerHTML = current_time.getDate() + "/" + (current_time.getMonth()+1) + "/" + current_time.getYear() + " " + current_time.getHours() + ":" + current_time.getMinutes() + ":" +current_time.getSeconds();
 
    setTimeout("server_date(current_time.getTime())",1000);
}
 
setTimeout("server_date('<?=$current_server_time?>')",1000);
//-->
</script>
<!---------------- Server Time ---------------------->
</span>
    </td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td bgcolor="#FFFFFF"><span class="style1">Local Time </span></td>
    <td>
<span class="style1">
<!---------------- Local Time ---------------------->
<div id="local_time" style="background-color:#FFCC00">&nbsp;</div>
<script language="JavaScript1.2">
<!--
function local_date(now_time) {
    current_local_time = new Date();
 
    local_time.innerHTML = current_local_time.getDate() + "/" + (current_local_time.getMonth()+1) + "/" + current_local_time.getYear() + " " + current_local_time.getHours() + ":" + current_local_time.getMinutes() + ":" +current_local_time.getSeconds();
 
    setTimeout("local_date()",1000);
}
 
setTimeout("local_date()",1000);
//-->
</script>
<!---------------- Local Time ---------------------->
</span>
    </td>
  </tr>
</table>
 
<center>
<a href="server_date.php">refresh</a>
</center>
</body>
</html>

จากการทำงานของโปรแรกมนี้ จะเห็นได้ว่าเวลาที่แสดงที่หน้า website ของเราอาจจะไม่ตรงกับทาง server 100% เนื่องจาก
การ เสียเวลาในการ load ข้อมูลเข้ามาในครั้งแรก แต่ผมว่าไม่น่าที่จะผิดพลาดจากเวลาจริงใน server มากนัก (คิดว่าไม่น่าเกิน 10 วินาทีนะ)