3Dグローブはリアルタイムで訪問者を表示します。ライブ更新の仕組みと、グローブが異なるトラフィックレベルをどのように処理するかを理解しましょう。
リアルタイムの仕組み
Supabaseリアルタイムサブスクリプション
グローブはSupabaseリアルタイムサブスクリプションを使用して即時の訪問者更新を受信します：
- ウェブサイトIDでフィルタリングされた
visitorsテーブルをサブスクライブ INSERTイベント（新しい訪問者のページロード）をリッスン- ページを更新せずに即座に更新がプッシュされる
- 接続は自動的に管理される
更新フロー
誰かがサイトを訪問すると：
- トラッキングスクリプトが起動 — 訪問者データがZenovay APIに送信される
- データ保存 — 訪問者レコードがデータベースに挿入される
- リアルタイムブロードキャスト — Supabaseが新しいレコードをグローブにプッシュ
- マーカーが表示 — 訪問者の場所にDiceBearアバターマーカーが表示される
このプロセスは通常、ページロードからマーカー表示まで1〜2秒かかります。
フォールバックポーリング
リアルタイムサブスクリプションに加えて、グローブは安全網として数秒ごとのポーリング間隔を持っています：
- 約5秒ごとに
/api/globe/visitorsエンドポイントをポーリング - ブラウザタブが表示されている場合のみ実行（
document.hiddenを確認） - リアルタイムサブスクリプションで見逃した更新をキャッチします。ライブウィンドウを離れた訪問者を含む
- サブスクリプションが一時的に切断されてもデータが新鮮に保たれる
訪問者データのライフサイクル
2分間のローリングウィンドウ
グローブは過去2分間の訪問者を表示します：
| イベント | タイミング |
|---|---|
| 訪問者がページをロード | マーカーが即座に表示される |
| 2分経過 | マーカーが削除される |
| 同じセッション、新しいページ | 古いマーカーが新しいものに置き換えられる |
マーカーの上限
最大50個の訪問者マーカーが同時に表示されます：
- 最新の訪問者が優先される
- 新しい訪問者が来て上限に達すると、最も古いマーカーが削除される
- 統計オーバーレイはマーカーの上限に関わらず常に正確なカウントを表示する
重複排除
既存のセッションを持つ訪問者が別のページをロードすると：
- そのセッションの以前のマーカーが置き換えられる
- 各セッションの最新ページビューのみが表示される
- 同じ訪問者の重複マーカーを防ぐ
切断処理
切断が発生する理由
一般的な原因：
- ネットワーク中断
- 長時間にわたるブラウザタブのバックグラウンド化
- VPNまたはファイアウォールの問題
- ブラウザのスリープモード
切断中に起きること
切断中：
- グローブは最後に知られた訪問者データを表示する
- 2分間ウィンドウのマーカーが期限切れになり消える場合がある
- タブが非表示の場合、フォールバックポーリングが停止する
再接続
接続が復元またはタブが前面に表示されると：
- Supabaseリアルタイムサブスクリプションが自動的に再接続する
- フォールバックポーリングが再開し新鮮なデータを取得する
- マーカーが現在の状態を反映するように更新される
手動更新
データが古くなっているように見える場合：
- グローブコントロールバーのリロードボタンをクリック
- これにより即時データフェッチがトリガーされる
- 新鮮な訪問者データが現在のマーカーと置き換わる
タブの動作
アクティブなタブ
グローブタブが前面にある場合：
- リアルタイムサブスクリプションが即座に更新を配信
- 数秒ごとのフォールバックポーリングが安全網として実行
- フルレンダリングとアニメーションがアクティブ
バックグラウンドのタブ
グローブタブがアクティブなタブでない場合：
- ブラウザが接続をスロットルする場合がある
- フォールバックポーリングが一時停止（
document.hiddenを検出） - リソースを節約するためにレンダリングが一時停止
タブに戻る
グローブタブに切り替えると：
- フォールバックポーリングが即座に再開
- 新鮮なデータフェッチがトリガーされる
- マーカーが現在の訪問者を反映するように更新される
- リアルタイムサブスクリプションがキューに入ったイベントを追いつく
高トラフィック処理
マーカーの上限
グローブはトラフィック量に関係なく表示されるマーカーを50に制限します：
- これにより、トラフィックスパイク時でも一貫したパフォーマンスが確保される
- 新しい訪問者は常に表示される（最も古いマーカーが最初に削除される）
- トップ統計オーバーレイは正確な集計カウントを表示する
訪問者の期限切れ
2分以上経過した訪問者は自動的に期限切れになります：
- これによりグローブは現在のアクティビティに集中できる
- 持続的な高トラフィック中のマーカーの蓄積を防ぐ
- 期限切れの訪問者はリアルタイムとポーリング更新の両方でフィルタリングされる
パフォーマンスのヒント
リアルタイムの信頼性のために
| ヒント | 理由 |
|---|---|
| タブを前面に保つ | ブラウザのスロットリングを防ぐ |
| 安定したインターネット接続を使用する | 切断を減らす |
| 不要なタブを閉じる | ブラウザリソースを解放する |
| ハードウェアアクセラレーションを有効にする | レンダリングパフォーマンスを向上させる |
オフィスディスプレイ用
グローブをライブディスプレイとして使用する場合：
- ブラウザタブをアクティブで前面に保つ
- 視覚的なインパクトのためにフルスクリーンモードを使用する
- アンビエントオーディオのためにミュージックプレーヤーを有効にする
- フォールバックポーリングにより、リアルタイムサブスクリプションが一時的に切断されてもデータが新鮮に保たれる
プレゼンテーション用
- プレゼンテーション前にグローブ接続をテストする
- 安定したネットワーク接続を確保する
- フルスクリーンモードを使用する
- マーカーが期待通りに表示されない場合はリロードをクリックする
トラブルシューティング
リアルタイム更新なし
グローブが更新されない場合：
- リロードボタンをクリックして手動更新をトリガー
- インターネット接続を確認
- トラッキングスクリプトがウェブサイトにインストールされ機能していることを確認
- ブラウザの開発者コンソール（F12）を開いてエラーを確認
- ページを更新してみる
更新の遅延
更新が遅い場合：
- ネットワークレイテンシを確認
- アクティブな場合はVPNを無効にする（レイテンシが増加する可能性がある）
- 帯域幅を多く使用するアプリケーションを閉じる
- タブが前面にあることを確認する
マーカーが表示されない
訪問者が表示されない場合：
- トラッキングスクリプトがウェブサイトにインストールされていることを確認
- 分析ダッシュボードに訪問者が存在することを確認
- 正しいウェブサイトが選択されていることを確認
- アクティブなトラフィックがあることを確認（マーカーは2分後に期限切れになります）