文章概述：

　　本文將介紹如何使用JavaScript獲取服務(wù)器系統(tǒng)時間作為頁面中心的方法，該方法簡單易用，不需要額外的JavaScript插件或庫。該方法可用于讓網(wǎng)頁在不同設(shè)備或時區(qū)下都顯示當(dāng)前的標(biāo)準(zhǔn)時間。本文將分別從以下四個方面進(jìn)行詳細(xì)闡述：（1）JavaScript獲取服務(wù)器系統(tǒng)時間的原理，（2）使用XMLHttpRequest對象與服務(wù)器交互獲取時間，（3）通過WebSocket協(xié)議獲取時間，（4）使用Node.js服務(wù)器實(shí)時推送時間。最后將對全文進(jìn)行總結(jié)歸納。

　　1、JavaScript獲取服務(wù)器系統(tǒng)時間的原理

　　通過JavaScript獲取服務(wù)器系統(tǒng)時間的原理是客戶端與服務(wù)器交互獲取當(dāng)前時間。一般情況下，客戶端通過JavaScript內(nèi)置的Date對象獲取本地時間，但本地時間與不同時區(qū)或設(shè)備時間不一致，因此需要與服務(wù)器交互獲取當(dāng)前標(biāo)準(zhǔn)時間。

　　2、使用XMLHttpRequest對象與服務(wù)器交互獲取時間

　　XMLHttpRequest對象可以在不重新加載頁面的情況下從服務(wù)器獲取數(shù)據(jù)。我們可以通過創(chuàng)建一個XMLHttpRequest對象來向服務(wù)器發(fā)送請求，獲取服務(wù)器返回的當(dāng)前時間。

　　首先，需要在服務(wù)器端編寫返回當(dāng)前時間的接口。可以使用PHP、ASP.NET等語言編寫，這里以PHP為例：

　　

　　 echo date(Y-m-d H:i:s, time());

　　?>

　　上述代碼將返回當(dāng)前時間的字符串，格式為“年-月-日 時:分:秒”。接下來在客戶端使用XMLHttpRequest對象向服務(wù)器獲取當(dāng)前時間：

　　var xhr = new XMLHttpRequest();

　　xhr.open(get, /gettime.php, true);

　　xhr.onreadystatechange = function() {

　　 if(xhr.readyState == 4 && xhr.status == 200) {

　　 var time = xhr.responseText;

　　 document.getElementById(current-time).innerHTML = time;

　　 }

　　};

　　xhr.send();

　　上述代碼中，gettime.php是服務(wù)器端返回時間的接口地址，current-time是網(wǎng)頁的一個節(jié)點(diǎn)，用來顯示當(dāng)前時間的字符串。

　　3、通過WebSocket協(xié)議獲取時間

　　WebSocket是一種在單個TCP連接上進(jìn)行雙向通訊的協(xié)議。使用WebSocket可以實(shí)現(xiàn)實(shí)時的雙向通訊，而不需要像XMLHttpRequest那樣頻繁地請求服務(wù)器。

　　使用WebSocket獲取時間的代碼如下：

　　var socket = new WebSocket(ws://example.com/gettime);

　　socket.onopen = function() {

　　 socket.send(get time);

　　};

　　socket.onmessage = function(event) {

　　 var time = event.data;

　　 document.getElementById(current-time).innerHTML = time;

　　};

　　上述代碼中，ws://example.com/gettime是WebSocket的接口地址，當(dāng)連接建立成功后，客戶端向服務(wù)器發(fā)送一個“get time”消息，服務(wù)器返回當(dāng)前時間的字符串。

　　使用WebSocket獲取當(dāng)前時間的優(yōu)點(diǎn)是能夠?qū)崿F(xiàn)實(shí)時推送，而不需要頻繁地向服務(wù)器請求。

　　4、使用Node.js服務(wù)器實(shí)時推送時間

　　可以使用Node.js創(chuàng)建一個HTTP服務(wù)器，在其中集成WebSocket服務(wù)器，實(shí)現(xiàn)實(shí)時推送當(dāng)前時間。下面是實(shí)現(xiàn)代碼：

　　var http = require(http);

　　var WebSocketServer = require(ws).Server;

　　var server = http.createServer(function(request, response) {

　　 response.writeHead(200, {Content-Type: text/html});

　　 response.end(

上一篇：時鐘同步服務(wù)器模式及其應(yīng)用研究 下一篇：以魔獸世界服務(wù)器時間為基準(zhǔn)的新標(biāo)題創(chuàng)意