KumaTechLab
2020-12-21/2023-05-23

javaScriptからサーバー時間を知る

javaScriptからサーバー時間を知る

javaScriptからサーバー時間を知る方法を紹介します。

javaScriptで時間を扱う際でよく使用するのが以下の表記です。

const now = new Date();

javaScriptは基本的にはクライアントサイドなので上記で取得できる時間はクライアント側の時間です。

これで問題なければ良いのですが、サーバーの時間を基準にして確認したい場合もあるでしょう。

そこで今回はサーバーの時間を取得する方法を紹介します。wordpressを使用する前提とします。

javascriptだけで取得する場合はこのような形で取得できます。

var request = new XMLHttpRequest();
request.open('HEAD', window.location.href, true);
request.send();
request.onreadystatechange = function() {
  if (this.readyState === 4) {
    const server = new Date(request.getResponseHeader('Date'));
}

XMLHttpRequestを使用してHeader情報に含まれる値を取得します。

同じ事をfetchでやろうとしたのですが、うまいこといかず…

普通にajaxを使用してphpからサーバー時間を返す方法にしました。

javaScript側は以下のように作成しました。

ajaxurlについてはphp側で記述しています。

const data = {
			method: 'POST',
			headers: { 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8' },
			body: 'action=server_time_ajax'
		}
		fetch( ajaxurl, data )
			.then( (response) => response.text() )
			.then( (text) => new Date(JSON.parse(text) ) );

続いてphp側です。

年月日があれば良かったため年月日の形で返却します。

また、wordpress特有のajax用のテンプレートファイルのパスをhead内に指定しています。

詳しくはWordPressで非同期処理する方法を参考にしてください。

function server_time_ajax() {
	header("Content-Type: application/json; charset=utf-8");
	echo json_encode( date( 'Y/m/d' ) );
	wp_die();
}
add_action( 'wp_ajax_server_time_ajax', 'server_time_ajax' );
add_action( 'wp_ajax_nopriv_server_time_ajax', 'server_time_ajax' );


function add_ajaxurl() {
?>
    <script>
        var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
    </script>
<?php
}
add_action( 'wp_head', 'add_ajaxurl', 1 );
2020 KumaTechLab.