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

DJANGO 泡泡牆・網路實作

從遠端電腦操作 Django 泡泡牆
區域網路設定教學

泡泡牆網站只需在一台電腦啟動 Django，其他電腦便可透過瀏覽器連線投稿或投影。本文以 Windows 主機為例，說明如何在教室的同一個 Wi‑Fi／區域網路內設定與操作。

先了解架構：一台電腦擔任 Django 主機，負責執行網站與保存泡泡資料；其他電腦、平板或手機是用戶端，透過瀏覽器連線。遠端裝置不需要另外安裝 Django。

一、適用情境與準備項目

• 一台已解壓縮 Django 泡泡牆專案、能執行 Python 的主機。
• 主機和遠端電腦連接同一個 Wi‑Fi 或區域網路。
• 主機的區域網路 IP 位址，以及活動投稿 token。

以下假設專案已依照泡泡牆安裝教學完成套件安裝和資料庫遷移。若尚未安裝，請先在專案目錄執行 pip install -r requirements.txt 和 python manage.py migrate。

二、在 Django 主機查詢 IP 位址

步驟 1：開啟命令提示字元

在執行 Django 的 Windows 電腦按下「開始」，搜尋並開啟「命令提示字元」（CMD），輸入：

ipconfig

找到目前正在使用的 Wi‑Fi 或乙太網路介面，查看「IPv4 位址」。以下用 192.168.1.100 作為示例，實際操作時請換成您電腦顯示的 IP。

三、允許區域網路連線並啟動 Django

步驟 2：切換到專案資料夾

在 CMD 用 cd 進入包含 manage.py 的資料夾。例如：

cd C:\Users\學生\Desktop\bubblewall-django

請依照您實際解壓縮的位置修改路徑。

步驟 3：啟用虛擬環境（若有建立）

.venv\Scripts\activate

若命令提示字元前面出現 (.venv)，表示虛擬環境已啟用。

步驟 4：設定允許的主機 IP、活動 token 並啟動伺服器

在同一個 CMD 視窗依序執行下列指令。請把 IP 換成主機的 IPv4 位址，也可將 token 換成您要提供給學生的活動通行碼。

set DJANGO_ALLOWED_HOSTS=127.0.0.1,localhost,192.168.1.100
set BUBBLE_TOKENS=class-a-2026
python manage.py runserver 0.0.0.0:8000

0.0.0.0:8000 表示 Django 開發伺服器接受主機其他網路介面的連線；若只執行 python manage.py runserver，通常只能由主機本身開啟。

請讓這個 CMD 視窗保持開啟，關閉視窗或停止伺服器後，遠端就無法連線。用 set 設定的環境變數只在目前 CMD 視窗有效。

四、從遠端電腦開啟泡泡牆

在遠端電腦確認已連上與主機相同的 Wi‑Fi，接著打開 Chrome、Edge 或其他瀏覽器，輸入主機 IP 和連接埠：

用途	範例網址
學生投稿頁	http://192.168.1.100:8000/
投影展示頁	http://192.168.1.100:8000/projector/

請將範例網址中的 192.168.1.100 改成主機實際的 IPv4 位址。學生在投稿頁輸入活動 token、想法、隊伍名稱並選擇顏色，送出後投影頁會顯示新泡泡。

五、Windows 防火牆設定

若遠端電腦無法開啟網址，可能是 Windows 防火牆阻擋連線。首次啟動 Python 時若出現防火牆提示，允許 Python 在私人網路通訊。若沒有提示，可在 Windows「防火牆與網路保護」設定中，允許 Python 通過私人網路防火牆。

也可以由管理者建立入站規則，允許 TCP 連接埠 8000 在私人網路使用。請只開放教學場域需要的網路範圍。

六、常見問題排查

現象	檢查方式
瀏覽器顯示無法連線	確認 Django 主機的 CMD 視窗仍在執行；確認網址 IP 正確、連接埠是 8000，且兩台裝置在相同網路。
出現 DisallowedHost	確認 DJANGO_ALLOWED_HOSTS 包含主機的 IPv4 位址；修改後重新啟動 Django。
網頁可開啟，但投稿失敗	確認 token 與主機設定的 BUBBLE_TOKENS 相同；檢查文字、隊伍名稱與顏色欄位。
同一 Wi‑Fi 還是互相連不到	查看防火牆是否允許私人網路；詢問網管 Wi‑Fi 是否啟用用戶端隔離。部分校園或訪客網路會禁止裝置彼此連線。
主機 IP 改變後網址失效	重新執行 ipconfig 查詢 IPv4，並用新的 IP 開啟網址；也要更新允許的主機設定。

七、在外網或校外使用

上述方式適合教室內同一個區域網路使用。若要讓校外網路或不同網路的電腦連線，建議將網站部署到正式伺服器或雲端主機，設定網域名稱與 HTTPS，再妥善管理活動 token。

重要：python manage.py runserver 是 Django 開發用伺服器，不適合直接公開到網際網路。不要只為了遠端連線，就在路由器上將 8000 埠公開轉發到網路。

八、課堂操作流程建議

1. 教師電腦啟動 Django，並將投影頁投放到教室螢幕。
2. 教師確認主機 IP，將投稿網址和活動 token 提供給學生。
3. 學生使用自己的電腦或手機開啟投稿頁，送出文字與顏色。
4. 全班觀察投影頁即時出現泡泡，討論瀏覽器、HTTP 請求、伺服器、資料庫和 SSE 的分工。

透過這個流程，學生能把「網路上的資料如何傳送」與「多媒體內容如何呈現」連結起來，從實際操作理解網站與互動系統的基本架構。

教學示範：Django 泡泡牆遠端操作｜適用於同一區域網路內的課堂活動與展示

網際網路 × 多媒體應用 × Django 實作

用 Django 打造即時泡泡牆
從網際網路理論到多媒體實作

一個泡泡牆看起來像是把文字變成彩色圓泡泡，背後其實串起了瀏覽器、HTTP、JSON、伺服器、資料庫與即時推播。本文以 Django 製作一套可在教室展示的泡泡牆，帶大一新生透過完整作品認識網際網路與多媒體應用的基礎。

一、設計動機

大一新生初次接觸網際網路與多媒體應用時，常會分別學到網頁、伺服器、資料格式、資料庫和視覺設計等名詞，卻不容易看見它們如何合作。泡泡牆把這些概念放進一個能親手操作、能立即看見結果的情境：學生輸入一句想法，按下送出，教室投影畫面就多出一顆彩色泡泡。

因此，這個作品的動機是讓大一新生瞭解網際網路以及多媒體應用的理論基礎。學生可以沿著一則資料的旅程，觀察瀏覽器如何發出請求、Django 如何驗證與處理資料、資料如何存進資料庫，以及伺服器如何把新內容即時送到投影畫面。

二、教學目的

• 認識用戶端與伺服器的分工，理解瀏覽器如何透過 HTTP 與網站溝通。
• 分辨 GET 與 POST 的用途，讀懂 200、201、400、401 等狀態碼。
• 理解 JSON 如何承載文字、顏色、隊伍等結構化資料。
• 了解 Django URL 路由、View、Model 與 SQLite 資料庫的關係。
• 體驗 Server-Sent Events（SSE）如何將新泡泡由伺服器推送到投影瀏覽器。
• 連結多媒體的文字、色彩、動態效果與全螢幕展示，思考科技如何支持課堂互動。

學習成果：完成後，學生不只會看到泡泡牆的畫面，也能說明一顆泡泡如何從投稿表單出發，經過網路傳輸、伺服器處理與資料儲存，最後出現在投影幕上。

三、系統如何運作

學生瀏覽器HTTP POSTDjango API寫入SQLite

投影瀏覽器GET /api/state載入既有泡泡

Django SSE推送新事件投影瀏覽器新增泡泡

學生端將文字、顏色、隊伍名稱組成 JSON，並在 HTTP 標頭附上 Bearer token。伺服器檢查 token 和欄位後，建立資料記錄，回傳 201 Created。同時，SSE 連線會收到新泡泡事件，讓投影畫面無須重新整理就能更新。

介面	方法與路徑	用途	成功／錯誤回應
載入泡泡	GET /api/state	取得既有泡泡	200 OK + JSON
新增泡泡	POST /api/bubbles	驗證並儲存投稿	201 Created；格式錯誤 400；token 無效 401
即時事件	GET /api/events	維持 SSE 連線、接收新泡泡	text/event-stream

四、重要程式解析

1. Model：定義泡泡資料

Django Model 描述一筆泡泡要保存哪些欄位。執行資料庫遷移後，Django 會依此建立資料表。

from django.db import models

class Bubble(models.Model):
    text = models.CharField(max_length=160)
    color = models.CharField(max_length=7)
    team = models.CharField(max_length=40)
    created_at = models.DateTimeField(auto_now_add=True, db_index=True)

    class Meta:
        ordering = ['-created_at']

    def as_event(self):
        return {
            'id': self.pk,
            'text': self.text,
            'color': self.color,
            'team': self.team,
            'created_at': self.created_at.isoformat(),
        }

CharField 用來保存文字欄位，auto_now_add=True 會在建立記錄時自動記下時間。as_event() 將 Model 物件轉成適合 JSON 傳輸的 Python 字典。

2. URL 路由：把網址交給對應功能

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('projector/', views.projector, name='projector'),
    path('api/state', views.state, name='state'),
    path('api/bubbles', views.create_bubble, name='create_bubble'),
    path('api/events', views.events, name='events'),
]

路由可以想成網站的分機表：收到不同路徑，Django 就呼叫不同的 View。一般頁面負責回傳 HTML；以 /api/ 開頭的路徑主要交換資料。

3. View：驗證資料、存入資料庫並回傳狀態碼

以下節錄新增泡泡的關鍵邏輯。實際專案也會檢查 JSON 格式、欄位長度與色碼格式。

@require_POST
def create_bubble(request):
    token = request.headers.get('Authorization', '')
    token = token.removeprefix('Bearer ').strip()

    if not token or token not in settings.BUBBLE_TOKENS:
        return JsonResponse(
            {'error': 'unauthorized'}, status=401
        )

    data = json.loads(request.body)
    text = data.get('text', '').strip()
    color = data.get('color', '')
    team = data.get('team', '').strip()

    # 正式程式在此檢查欄位內容與格式
    bubble = Bubble.objects.create(
        text=text, color=color.upper(), team=team
    )
    return JsonResponse(bubble.as_event(), status=201)

Authorization: Bearer ... 是 HTTP 標頭中的通行憑證。驗證失敗回傳 401；資料欄位無效回傳 400；建立成功回傳 201。這些狀態碼是瀏覽器或其他用戶端判斷結果的依據。

安全提醒：教學原型使用環境變數設定 token；正式活動應將預設示範 token 換掉，避免把 token 寫在公開程式碼中。登入表單送出的 token 會由瀏覽器傳送到網站，因此公開部署須使用 HTTPS。

4. SSE：讓投影畫面收到新泡泡

SSE 是由伺服器單向推送資料到瀏覽器的機制。它適合「學生送出、投影端即時顯示」這種更新方向單純的情境。

def events(request):
    q = Queue()
    with _subscribers_lock:
        _subscribers.add(q)

    def stream():
        try:
            yield 'retry: 3000\n\n'
            while True:
                try:
                    payload = q.get(timeout=15)
                    yield f'event: bubble\ndata: {payload}\n\n'
                except Empty:
                    yield ': keep-alive\n\n'
        finally:
            with _subscribers_lock:
                _subscribers.discard(q)

    response = StreamingHttpResponse(
        stream(), content_type='text/event-stream'
    )
    response['Cache-Control'] = 'no-cache'
    response['X-Accel-Buffering'] = 'no'
    return response

投影瀏覽器先呼叫 /api/state 載入舊泡泡，再使用 EventSource 訂閱新事件：

fetch('/api/state')
  .then(response => response.json())
  .then(data => data.bubbles.forEach(addBubble));

const stream = new EventSource('/api/events');
stream.addEventListener('bubble', event => {
  const bubble = JSON.parse(event.data);
  addBubble(bubble);
});

收到資料後，JavaScript 建立泡泡元素、套用顏色，並將文字放入頁面。CSS 負責圓形外觀、陰影、浮動動畫和手機版排版，構成多媒體呈現的一部分。

五、執行步驟

步驟 1：準備環境

先安裝 Python 3.10 以上版本，將 bubblewall-django.zip 解壓縮到一個工作資料夾。開啟 Windows 命令提示字元（CMD），使用 cd 切換到含有 manage.py 的專案目錄。

cd C:\\Users\\學生\\Desktop\\bubblewall-django

步驟 2：建立虛擬環境並安裝 Django

python -m venv .venv
.venv\\Scripts\\activate
pip install -r requirements.txt

看到命令提示字元前面出現 (.venv)，表示虛擬環境已啟用。

步驟 3：設定活動 token

原型預設 token 是 demo-token，直接啟動也能測試。若要指定活動用 token，可在同一個 CMD 視窗執行：

set BUBBLE_TOKENS=class-a-2026

此 token 會用來驗證學生的投稿請求。CMD 視窗關閉後，這項設定會消失；正式部署需改用適當的環境變數管理方式。

步驟 4：建立資料表並啟動伺服器

python manage.py migrate
python manage.py runserver

看到 Django 的開發伺服器已啟動後，在同一個 Wi-Fi 網路中，可先用本機網址測試 http://127.0.0.1:8000/。開發伺服器預設只供本機使用；若要讓教室其他設備連線，需設定主機位址、防火牆及允許的網域。

步驟 5：開啟投稿頁與投影頁

• 學生投稿頁：http://127.0.0.1:8000/
• 投影展示頁：http://127.0.0.1:8000/projector/

用兩個瀏覽器視窗開啟這兩個頁面。在投稿頁輸入想法、隊伍、選擇顏色和 token，送出後觀察投影頁是否即時出現泡泡。

步驟 6：用 curl 測試 API

開啟另一個 CMD 視窗，以 curl 直接送出 JSON。若將 token 設定為示範值，命令如下：

curl.exe -X POST http://127.0.0.1:8000/api/bubbles ^
  -H "Authorization: Bearer demo-token" ^
  -H "Content-Type: application/json" ^
  -d "{\"text\":\"讓想法一起發光\",\"color\":\"#61D7C5\",\"team\":\"海洋隊\"}"

成功時會回傳泡泡資料及 HTTP 201。把 token 改錯可觀察 401；把色碼改成不符合格式的內容，則可觀察 400。

六、課堂討論與延伸

1. 如果投稿資料只有文字、沒有顏色，JSON 欄位與表單要如何調整？
2. 為什麼投影端要先載入既有泡泡，再訂閱 SSE？如果順序相反，可能發生什麼情況？
3. GET 和 POST 在這個系統中各自負責什麼？為什麼新增資料不使用 GET？
4. 除了隊伍名稱與文字，還可以加入圖片、表情符號或音效嗎？前端需要做哪些變更？
5. 目前資料庫記錄會保留。若每次活動要建立獨立泡泡牆，可加入活動代碼或活動模型來分流資料。

七、原型限制與下一步

目前版本使用 SQLite，適合課堂示範和小型單機活動。SSE 訂閱者清單保存在單一 Django 程序的記憶體中，因此多程序、多台主機部署時，事件不會自動跨程序同步；正式擴充時可改用 Redis Pub/Sub 或 Django Channels。正式上線也應使用 HTTPS、妥善管理 token，並搭配正式的 Django 部署伺服器。

這個作品的價值，在於把抽象網路概念變成可觀察的資料流程。學生每送出一顆泡泡，就能看見用戶端、伺服器、資料庫與多媒體畫面如何協同工作，逐步建立對網際網路與互動應用的整體理解。

教學示範專案：Django 泡泡牆｜適用於網際網路與多媒體應用入門課程