JavaScriptだけでサーバー時間を取得
通常現在の日時を取得する際はnew Date()が使用されることが多いがnew Date()はユーザーのデバイスの日時が取得されるためnew Date()だと都合が悪い場合がある。
例えば指定した時刻に何かを表示するためのタイマーなどは日本のサイトであれば日本の日時を基準にして実装されるためnew Date()だと意図した通りに動作しないことがある。
例えば3月14日の9時にホワイトデーのバナーをJavaScriptで表示したい場合、ユーザーのデバイスの日時が3月14日の8時になっていると指定した日時に表示されないという問題が発生する。
パソコンやスマートフォンはインターネットに接続していれば自動で時刻合わせが行われるため時間がずれることは通常は発生しないが、時刻合わせを自動にしていなかったり、逆に時刻合わせを自動にしていたため海外に行った際にその地域の時刻に変更されてしまい日本時間で表示できないという問題が発生することがある。
サーバーのレスポンスヘッダーの日時を使用する
サーバーの日時を取得するにはPHPやJavaなどサーバーサイドスクリプトが必要だと勘違いされることが多い。
サーバーのレスポンスヘッダーの時刻を使用すればJavaScriptだけでもサーバーの日時を取得することが可能だ。
コードは以下の通り
var request = new XMLHttpRequest();
request.open('HEAD', window.location.href, true);
request.send();
request.onreadystatechange = function() {
if (this.readyState === 4) {
var serverDate = new Date(request.getResponseHeader('Date'));
console.log(serverDate);
// 例) => Wed Feb 16 2017 12:00:00 GMT+0900
}
}
new XMLHttpRequest()のあとrequest.open('HEAD'〜でレスポンスヘッダーを取得したあとrequest.getResponseHeader('Date')で日時を取得している。
遅いサーバーだと日時の取得および表示に時間がかかることがあるため注意が必要だ。
JavaScriptだけでサーバー時間を取得したタイマーサンプル
ちなみにjQueryを使用すれば、もっと簡単な記述で済む。
$.ajax({
type: 'GET'
}).done(function(data, status, xhr) {
var serverDate = new Date(xhr.getResponseHeader('Date'));
console.log(serverDate);
// 例) => Wed Feb 16 2017 12:00:00 GMT+0900
});
