泡泡牆為什麼能從另一台電腦開啟？IP、連接埠與區域網路入門

網際網路入門・Django 泡泡牆實作

泡泡牆為什麼能從另一台電腦開啟？
認識 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:8000

• 0.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 的裝置互相連線。若兩台設備都連上網路但仍無法互通，可請網管確認此設定，或改用允許裝置互通的教學網路。

八、連線檢查清單

1. 主機上 Django 是否正在執行，且啟動指令包含 0.0.0.0:8000？
2. 遠端裝置是否使用主機 IPv4，而不是 127.0.0.1？
3. 網址是否包含 :8000 連接埠？
4. DJANGO_ALLOWED_HOSTS 是否包含該 IP？
5. Windows 防火牆是否允許私人網路連線？
6. 兩台設備所連的 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 如何交換資料，也能認識防火牆和區域網路規則對網站連線的影響。把這些概念與親手操作連在一起，網際網路就不再只是抽象名詞。

教學主題：IP 位址、連接埠、區域網路與 HTTP｜實作案例：Django 泡泡牆