泡泡牆為什麼能從另一台電腦開啟？
認識 IP、連接埠與區域網路
老師在一台電腦啟動 Django 泡泡牆，學生卻能用自己的手機或筆電投稿，投影幕也能即時出現新泡泡。這個過程不只是「打開一個網址」，而是裝置在區域網路中找到伺服器，並透過指定連接埠交換資料。
一、先看懂連線中的角色
| 角色 | 在泡泡牆中的例子 | 工作 |
|---|---|---|
| 用戶端 | 學生手機、筆電、投影瀏覽器 | 提出網頁請求、顯示畫面、送出資料 |
| 伺服器 | 執行 Django 的教師電腦 | 接收請求、驗證資料、查詢或更新資料庫、回應結果 |
| 區域網路 | 教室 Wi‑Fi 或有線網路 | 讓同一網路中的裝置彼此傳送資料 |
本例中，學生瀏覽器是用戶端，教師電腦是伺服器。Django 接到投稿後會儲存泡泡，再通知投影頁更新。
二、IP 位址：在網路中找到那台電腦
IP 位址像是裝置在網路上的地址。教室區域網路常見的私有 IPv4 位址會以 192.168.、10. 或 172.16 至 172.31 開頭。例如 Django 主機可能是 192.168.1.100。
在 Windows 主機開啟 CMD，輸入以下指令查詢網路設定：
ipconfig找到正在使用的 Wi‑Fi 或乙太網路介面，查看「IPv4 位址」。遠端裝置要連線時，使用的就是這個主機 IP。主機若重新連接網路，IP 可能改變，需要重新查詢。
127.0.0.1 是「本機迴路」位址，代表目前正在使用的這台電腦。遠端學生輸入 127.0.0.1 會連回自己的手機或電腦，因此要輸入 Django 主機的區域網路 IP。三、連接埠：找到電腦裡正確的服務
一台電腦可能同時提供許多網路服務。連接埠（Port）用來區分資料應該交給哪個服務。泡泡牆開發時使用連接埠 8000，所以網址會寫成：
http://192.168.1.100:8000/其中 192.168.1.100 是主機 IP，8000 是 Django 服務使用的連接埠，最後的斜線代表網站路徑。完整網址可拆成：
| 網址部分 | 例子 | 說明 |
|---|---|---|
| 通訊協定 | http:// | 瀏覽器與網站使用 HTTP 溝通 |
| 主機位置 | 192.168.1.100 | 要連線的 Django 電腦 |
| 連接埠 | :8000 | 該電腦上的 Django 服務 |
| 路徑 | /projector/ | 要開啟的網站功能 |
四、為什麼要用 0.0.0.0 啟動？
Django 的開發伺服器預設只接受本機連線。若要讓同一區域網路的其他裝置連線，要讓它監聽主機的網路介面。進入 Django 專案資料夾後，可在 Windows CMD 執行：
set DJANGO_ALLOWED_HOSTS=127.0.0.1,localhost,192.168.1.100
set BUBBLE_TOKENS=class-a-2026
set BUBBLE_ADMIN_TOKEN=teacher-admin-2026
python manage.py runserver 0.0.0.0:80000.0.0.0:8000：Django 在所有可用網路介面的 8000 埠接收連線。DJANGO_ALLOWED_HOSTS：列出 Django 接受的主機名稱或 IP，請換成自己的主機位址。BUBBLE_TOKENS：學生投稿時使用的活動 token。BUBBLE_ADMIN_TOKEN：管理頁清空泡泡時使用的管理 token，應與投稿 token 不同。
這些 set 指令設定的值只存在於目前 CMD 視窗。關閉視窗後，需重新設定並啟動伺服器。
五、遠端裝置如何連線
學生手機或筆電連上相同 Wi‑Fi 後，在瀏覽器輸入：
- 投稿頁：
http://192.168.1.100:8000/ - 投影頁：
http://192.168.1.100:8000/projector/ - 管理頁：
http://192.168.1.100:8000/manage/
網址中的 IP 請替換成 Django 主機的實際 IPv4 位址。學生在投稿頁填入活動 token；教師若要清空本場泡泡，則到管理頁輸入管理 token。
六、HTTP 請求如何抵達 Django？
當學生按下送出，瀏覽器會向伺服器傳送 HTTP POST 請求。網路設備依照目標 IP 將資料送到教師電腦，作業系統再依連接埠把請求交給 Django。Django 驗證 token 和欄位後回傳結果；投影頁則透過 SSE 接收新泡泡事件。
| 動作 | 請求／通訊 | 結果 |
|---|---|---|
| 打開投稿頁 | 瀏覽器向 Django 要求 HTML、CSS、JavaScript | 顯示投稿表單 |
| 送出泡泡 | POST /api/bubbles，附上 JSON 與 token | Django 驗證並寫入資料庫 |
| 投影端載入舊資料 | GET /api/state | 回傳目前泡泡清單 |
| 出現新泡泡 | /api/events 的 SSE 推播 | 投影頁即時更新，不必重新整理 |
七、Windows 防火牆與網路限制
即使 IP 和網址正確，防火牆仍可能阻擋其他裝置連入。首次執行 Python 時，若 Windows 顯示網路存取提示，應在可信任的教室私人網路中允許通訊。必要時請管理者設定允許 TCP 8000 埠的私人網路入站規則。
部分校園、訪客 Wi‑Fi 會啟用用戶端隔離，阻止同一 Wi‑Fi 的裝置互相連線。若兩台設備都連上網路但仍無法互通，可請網管確認此設定，或改用允許裝置互通的教學網路。
八、連線檢查清單
- 主機上 Django 是否正在執行，且啟動指令包含
0.0.0.0:8000？ - 遠端裝置是否使用主機 IPv4，而不是
127.0.0.1？ - 網址是否包含
:8000連接埠？ DJANGO_ALLOWED_HOSTS是否包含該 IP？- Windows 防火牆是否允許私人網路連線？
- 兩台設備所連的 Wi‑Fi 是否允許用戶端彼此通訊？
九、區域網路與公開網際網路
使用主機私有 IP 的方式，只適合可互相連線的同一區域網路。校外的電腦通常不能直接使用 192.168.x.x 連到教室主機。若需要公開服務，應部署到正式伺服器、設定網域與 HTTPS，並妥善管理密鑰。
python manage.py runserver 是開發伺服器，適合本機開發或受控教室網路示範。不要直接把它公開到網際網路，也不要將活動 token 或管理 token 放在公開文章或程式碼中。十、課堂延伸問題
- 為什麼同一台電腦上的
127.0.0.1和192.168.1.100指向不同連線情境？ - 一台電腦開啟多個網站服務時，如何利用連接埠區分它們？
- 若主機 IP 改變，學生書籤中的網址會發生什麼事？
- 若教室網路不允許裝置彼此連線，有哪些可行的部署或網路安排？
從泡泡牆的遠端操作開始，學生可以逐步理解 IP 如何定位主機、連接埠如何定位服務、HTTP 如何交換資料，也能認識防火牆和區域網路規則對網站連線的影響。把這些概念與親手操作連在一起，網際網路就不再只是抽象名詞。
