一個迷你小小專案，練習了一下跨裝置跨頁面的同步，想說那順便寫成一個技術文件好了也順便練習。

1. Project Overview

本專案實作了一套「一端控制、多端同步」的即時互動系統。管理者可透過網頁按鈕，觸發所有連線手機的視覺特效（紅包雨），且無距離限制。於2026春節實作。

2. System Architecture

• 前端框架：React
• 即時通訊：Firebase Realtime Database (WebSocket 基於雲端的同步)
• 網路隧道：ngrok (將 Localhost 轉為具備 HTTPS 的公網網址)

3. Key technologies and solutions

A. 突破網域限制

• 問題：localhost 無法讓手機直接存取，且不同網域間無法直接溝通。
• 解決：使用 ngrok 建立 HTTPS 隧道。
  • 重要：管理者與使用者必須統一使用 ngrok 網址，以確保在相同的通訊協議與網域下運作。

B. 雲端同步機制

• 問題 : 不同page無法進行即時對話。
• 解決 : 透過Google Fire Base來當中間人，實現Real-time Sync。
• 邏輯：管理者執行 set(ref(db, 'cny_signal'), { status: 'BOOM', ts: Date.now() })。
• 監聽：使用者端透過 onValue 進行長連線監聽。加入 timestamp (ts) 是為了確保每次更新都是「有感變化」，避免資料相同導致不觸發。

Showcase

1. 管理員進入 https://[ngrok]/?role=admin
   
2. 一般用戶則進入 https://[ngrok]，會有打字機效果跑馬燈顯示祝賀訊息。
   
3. 當管理員點擊 放煙火 則所有人的手機會有視覺特效:
   

實作文件

https://hackmd.io/@HyC-1029/B1SSI2qdWl

專案套件

npm install firebase canvas-confetti sweetalert2

套件名稱	用途
firebase	核心雲端功能。負責與 Google Firebase 通訊、監聽資料庫狀態以及傳送指令。
canvas-confetti	噴彩帶動畫。當接收到「BOOM」訊號時，負責在畫面上噴出五彩紙屑。
sweetalert2	美化彈窗。用來取代瀏覽器醜醜的 alert()，彈出紅色的新年賀喜視窗。

import { useEffect, useState } from 'react';
import { initializeApp } from 'firebase/app';
import { getDatabase, ref, onValue, set } from 'firebase/database';
import confetti from 'canvas-confetti';
import Swal from 'sweetalert2';
import TypeWriter from '../components/TypeWriter';
import '../Index.css';