Phoenix 這個 Elixir 語言的網頁程式框架，除了開發的工具很齊全，習慣之後寫起來很愉快之外，最著名的就是它可以很輕鬆的使用 WebSocket 通訊協定。大多的網頁應用程式預設使用 HTTP，就像是寄信一樣：

想像你想知道好朋友今天過得好不好：

1. 你寫一封信：「你今天好嗎？」
2. 寄出去
3. 等對方收到、讀完、寫回信
4. 你收到回信：「我很好！」
5. **信箱關上了**

如果想再問「你在做什麼？」→ 要重新寫一封信，重複寄信->收信->讀信->回信整個流程。

而 WebSocket 的流程像打電話：

你直接打電話給朋友：

1. **電話接通後，一直保持通話**
2. 你可以隨時說話：「你好嗎？」
3. 對方立刻回答：「我很好！」
4. 對方也可以主動說：「欸對了，我剛看到一隻貓！」
5. **不用掛斷、重撥**

雖然 Elixir 的開發者比較稀有，但 Phoenix 框架在最大的程式開發者問答網站 Stackoverflow 上，連續三年在問卷調查中，獲得了 喜歡的網頁框架 項目中的冠軍。

本篇就讓我們來試試看跟 AI 合作，一起做個聊天室吧！

建立一個新的 Elixir 專案

提醒：在往下進行之前，記得先依照附錄 A的說明，將 Elixir 的環境安裝起來喔。

首先開啟終端機，輸入以下指令：

mix phx.new small_talk

當出現是否下載安裝套件的提示時，按下 [Enter] 。

請 Gemini 跟我們一起寫程式

用 cd small_talk 切換到資料夾中，再輸入 gemini 打開 Gemini CLI

在輸入框中貼上以下文字：「我想用 live_view建立一個線上聊天室，只有一個聊天室，使用者不需登入，只要進入畫面時輸入暱稱，選擇動物的emoji ，訊息背景顏色，emoji 及顏色各有四個選項。就可以開始聊天。使用 ecto 儲存聊天記錄。」接著按下[Enter]，

這邊的 live_view 是 Phoenix 內建的 websocket 互動網頁套件，而 ecto 是存取資料庫用的套件。

Gemini 應該會告訴你他的計劃，如果沒有什麼問題的話，就輸入「好」並按下[Enter]

如果中間出現提示訊息，就選擇「yes, allow always ...」

找一下我們的網址

用編輯器打開我們的專案資料夾，找到 lib/small_talk_web/router.ex 這個檔案。裡面應該有一行長的像 live "/chat", ChatLive 的程式。記得斜線後面的英文字。

把專案跑起來

開啟另一個終端機視窗，輸入 mix -S phx.server，之後在網頁操作後，都要看一下這個視窗有沒有紅色的字，如果有的話就是錯誤訊息。

用瀏覽器開啟 https://localhost:4000/chat，就可以玩玩看囉！

如果操作起來怪怪的…

當網頁操作到後來會回到原先的頁面，表示程式出現故障。回去看跑著 iex -S phx.serve 的終端機視窗，把紅色的字前面約十行複製起來。

然後回到 Gemini 視窗，將錯誤訊息貼給它看。

試著讀程式碼

由於 AI 生成的程式碼不一定相同。所以如果出錯時，除了貼錯誤，並跟 AI 討論怎麼改之外。要記得請 AI 改程式之前，都可以先用 Git 「儲存版本」。

而在錯誤訊息的前幾行，通常可以看到是哪個檔案的哪一行出錯了。試著用編輯器找到那個位置，猜猜看那一段程式碼想要做什麼事。

小提示: 在 Gemini Cli 視窗中，先按下[!]，之後可以輸入命令列的指令，包括 git 指令。

在 Github 的這個儲藏庫中，我放了可以正常運作的聊天室程式碼示範。

https://github.com/taiansu/small_talk_demo

Phoenix LiveView 重點檔案

1. lib/small_talk_web/live/chat_live.ex

這個檔案放的是我們最重要的頁面跟行為，裡面有很多偽裝的很得像是 HTML ，但其實是 elixir 的程式碼。

下方會有幾個 def handle_xxxx 是用來處理網頁互動的行為，例如按下按鈕等。

2. lib/small_talk/chat/chat.ex

這個檔案是用來跟處理跟 PostgresQL 資料庫互動行為的檔案。

3. lib/small_talk_web/router.ex

這個檔案用來指定每個網址會跑到哪個頁面去。

營火旁的回憶

1. Phoenix 是 Elixir 的網頁程式框架，擅長 websocket 連線功能。
2. 用 mix phx.new 名稱 新建 phoenix 專案
3. 用 iex -S mix phx.server 把專案跑起來
4. 瀏覽器要開啟 http://localhost:4000 頁面，正確的網址要查 router.ex 檔案
5. 跟 Gemini 互動時，可以把跑 phx.server 的頁面上的錯誤貼給它看

下一關

這個網頁聊天室目前還只有我們自己能用，明天我們會試著把程式丟給朋友使用，並佈署到雲端伺服器上。