SITCON 2026 Lightning Talk

SITCON 2026 閃電講互動系統——與會者用手機投球，球會即時出現在展示螢幕的物理模擬畫面中。

功能概覽

• 使用者：用手機輸入 Email，以 Gravatar 頭像作為球，往上滑動或點擊即可投球
• 投影畫面：大螢幕顯示即時 Matter.js 物理模擬，球會在場地內彈跳
• 歡迎頁：顯示目前在線人數和加入 QR Code
• 管理員頁面：控制開放投球、倒數計時、物理參數、重置場地等

快速開始

安裝

pnpm i

設定環境變數

複製範例檔案並修改：

cp .env.example .env

編輯 .env：

PORT=3000
ADMIN_PASSWORD=your_secure_password   # 務必修改，預設值不安全
ALLOWED_ORIGIN=*                      # 正式環境建議設為你的網域

注意：若未設定 ADMIN_PASSWORD，啟動時會出現警告，且預設密碼為 admin123，請勿在正式環境使用。

啟動伺服器

pnpm dev
# 或
pnpm start

伺服器預設監聽 http://localhost:3000。

頁面說明

路徑	用途
/	觀眾端 — 與會者用手機開啟，輸入 Email 後即可投球
/display.html	展示端 — 接在大螢幕上，顯示物理模擬畫面
/welcome.html	迎賓端 — 顯示目前在線人數
/admin.html	管理端 — 主持人控制台，需輸入密碼登入

活動流程

準備階段

1. 在展示電腦上開啟 /display.html，投影或是輸入到 OBS。
   • 輸入到 OBS 可以直接使用網址：/display.html?hide=true&mode=1。OBS 不需要設定任何額外 CSS 參數，請直接清空。（其實不清理論上也沒差）
2. 在主持人手機或筆電開啟 /admin.html，以管理員密碼登入
3. 可選：在簽到處或大螢幕角落開啟 /welcome.html 顯示人數

活動進行

1. 與會者用手機掃描 QR code 進入 /，輸入 Email 並確認頭像
2. 主持人在 Admin 面板點擊「立即開放投球」，開始接受投球
3. 與會者往上滑動（或點擊）球，球會飛到展示端畫面
4. 開場前可設定倒數計時器，倒數結束後自動開放投球
5. 倒數結束後可依設定延遲觸發自動填充，讓整個畫面填滿球

重置場地

• 在 Admin 面板點擊「清空球」，地板會消失，所有球落下後場地重置

管理員面板操作

功能	說明
地球引力強度 (0–5)	調整物理引力，預設 1.0
彈力係數 (0–1)	調整球的彈跳程度，預設 0.8
倒數計時器	設定秒數後點擊「開始倒數」，倒數結束自動開放投球
立即開放投球	切換開放 / 停止投球狀態
清空球	移除所有球並重置場地
倒數結束後自動填充	設定倒數結束後幾秒自動填滿畫面（0 = 立即）
強制立即填滿	不等倒數，立即填滿畫面

速率限制

為防止濫用，伺服器端有以下限制：

• 投球：每個 socket 每秒最多 1 顆
• 加入：每個 socket 每 10 秒最多 3 次
• 管理員登入：每個 IP 失敗 10 次後鎖定 15 分鐘

技術架構

• 後端：Node.js + Fastify + Socket.IO
• 前端：Vanilla JS + Matter.js（物理引擎）
• 即時通訊：WebSocket（Socket.IO）
• 頭像：Gravatar（以 Email MD5 hash 取得）

開發

pnpm dev      # 啟動伺服器
pnpm format   # 格式化程式碼（Prettier）

License

Apache-2.0

Author

Elvis Mao