https://github.com/wiz-develop/server-clock
⌚ Server-synchronized clock implementation for browsers with WebWorker support
https://github.com/wiz-develop/server-clock
Last synced: over 1 year ago
JSON representation
⌚ Server-synchronized clock implementation for browsers with WebWorker support
- Host: GitHub
- URL: https://github.com/wiz-develop/server-clock
- Owner: wiz-develop
- License: mit
- Created: 2025-03-13T07:58:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-13T08:04:53.000Z (over 1 year ago)
- Last Synced: 2025-03-13T09:20:18.728Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 9.8 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @wiz-develop/server-clock
サーバー時間同期型の高精度な時計ライブラリです。ブラウザで動作し、指定されたサーバーと時刻を同期して正確な時間を提供します。
## 特徴
- サーバー時間との精密な同期
- WebWorkerによるパフォーマンス最適化（自動フォールバック機能付き）
- TypeScript完全対応
- UMD/ESM形式で多様な環境に対応
- JST/UTC/ローカル時間の取得
- レガシー環境（WordPress/jQuery）でも使用可能
## インストール
npm:
```bash
npm install @wiz-develop/server-clock
```
yarn:
```bash
yarn add @wiz-develop/server-clock
```
pnpm:
```bash
pnpm add @wiz-develop/server-clock
```
## 使用方法
### モジュールとして使用する場合
```javascript
import { ServerClock } from '@wiz-develop/server-clock';
// 時計を初期化
const clock = new ServerClock({
serverUrls: ['https://example.com/time-api'], // 時刻配信サーバーのURLリスト
fetchInterval: 180000, // サーバー時間取得間隔(ms)
});
// 時計を開始
clock.start();
// 時計のTickイベントを監視
clock.onTick((clockData) => {
console.log('UTC時間:', clockData.UTC_STR);
console.log('JST時間:', clockData.JST_STR);
console.log('ローカル時間:', clockData.LOC_STR);
console.log('サーバーとのオフセット:', clockData.offset, '秒');
console.log('同期ステータス:', clockData.status);
});
// 時計を停止 (必要な場合)
// clock.stop();
```
### レガシー環境（scriptタグ）での使用方法
```html
// グローバル変数として利用可能
const clock = new WizDevelopServerClock.ServerClock({
serverUrls: ['https://example.com/time-api'], // 時刻配信サーバーのURLリスト
fetchInterval: 180000, // サーバー時間取得間隔(ms)
});
clock.start();
clock.onTick(function (clockData) {
document.getElementById('server-time').textContent = clockData.JST_STR;
});
```
### jQuery環境での使用例
```html
$(function () {
const clock = new WizDevelopServerClock.ServerClock({
serverUrls: ['https://example.com/time-api'], // 時刻配信サーバーのURLリスト
fetchInterval: 180000, // サーバー時間取得間隔(ms)
});
clock.start();
clock.onTick(function (clockData) {
$('#server-time').text(clockData.JST_STR);
});
});
```
## 時刻配信サーバーの実装例
このライブラリは以下のようなレスポンスを返すサーバーと連携します：
```json
{
"requestReceivedAt": 1647012345678,
"responseSentAt": 1647012345679
}
```
- `requestReceivedAt`: サーバーがリクエストを受信した時刻（ミリ秒）
- `responseSentAt`: サーバーがレスポンスを送信した時刻（ミリ秒）
Node.jsサーバーの実装例：
```javascript
const express = require('express');
const app = express();
app.get('/time', (req, res) => {
const requestReceivedAt = Date.now();
// 処理...
const responseSentAt = Date.now();
res.json({
requestReceivedAt,
responseSentAt,
});
});
app.listen(3000);
```
## ClockData オブジェクト
`onTick` コールバックに渡される ClockData オブジェクトの構造：
```typescript
interface ClockData {
status: 'pending' | 'client_only' | 'server_only' | 'accurate';
offset: number; // サーバーとの時間オフセット（秒）
LOCAL: Date; // ローカルタイムゾーンでの時刻（ブラウザのsetTimezone()を適用したDate）
LOCAL_STR: string; // ローカルタイムゾーンでの時刻（文字列形式）
JST: Date; // 日本標準時（UTC+9）の時刻
JST_STR: string; // 日本標準時の文字列表現
UTC: Date; // 協定世界時（UTC）の時刻
UTC_STR: string; // 協定世界時の文字列表現
LOC: Date; // サーバー時刻に基づく現地時刻
LOC_STR: string; // サーバー時刻に基づく現地時刻の文字列表現
}
```
## ライセンス
MIT