使用🤖 AI 回應串流模擬器情境練習SSE

一個完全模擬 ChatGPT 風格的 AI 流式回應效果的專案，使用 Server-Sent Events (SSE) 技術實現即時串流通訊。

✨ 功能特色

• 🎯 真實的 ChatGPT 體驗 - 完全模擬 AI 打字效果的流式回應
• ⚡ 智能延遲控制 - 根據標點符號調整回應速度，更加自然
• 🔄 即時進度顯示 - 顯示回應生成進度和停止控制
• 📱 響應式設計 - 完美支援桌面和移動設備
• 🎨 現代化 UI - ChatGPT 風格的美觀介面
• 🛑 中斷控制 - 可隨時停止 AI 回應生成
• 💡 智能建議 - 預設問題快速開始對話

🏗️ 技術架構

🔧 後端技術

• Node.js + Express - 後端服務器
• Server-Sent Events (SSE) - 即時串流技術
• 智能片段化 - 將完整回應拆分成自然的字符流
• 動態延遲 - 模擬真實的 AI 思考和回應時間

🎨 前端技術

• React 18 + TypeScript - 現代化前端框架
• EventSource API - SSE 客戶端連接
• Webpack 5 - 模組打包和開發服務器
• CSS3 動畫 - 流暢的視覺效果

🚀 快速開始

1. 安裝依賴項

npm install

2. 啟動開發環境

npm run start

這將同時啟動：

• 🔗 後端服務器：http://localhost:5000
• 🌐 前端應用：http://localhost:3000

3. 單獨運行命令

# 只啟動後端
npm run server

# 只啟動前端
npm run client

# 建構生產版本
npm run build

📡 API 端點詳解

🤖 AI 串流端點

GET /ai-stream?prompt=你的問題

SSE 事件格式：

// 開始事件
event: start
data: {"message": "開始生成回應...", "totalLength": 120}

// 串流數據
data: {"content": "你好！很高興見到你", "progress": 25, "isLast": false}

// 結束事件  
event: end
data: {"message": "回應完成", "fullText": "完整回應內容"}

// 錯誤事件
event: error
data: {"error": "錯誤描述", "details": "詳細錯誤資訊"}

💡 問題建議端點

GET /api/suggestions

{
  "suggestions": [
    "你好",
    "今天天氣如何", 
    "什麼是人工智能",
    "介紹一下自己",
    "如何學習程式設計",
    "什麼是 React"
  ]
}

❤️ 健康檢查端點

GET /api/health

{
  "status": "healthy",
  "timestamp": "2024/12/30 下午8:45:30",
  "version": "1.0.0"
}

🎯 核心技術實現

📝 文字片段化邏輯

function createFragments(text) {
  const fragments = [];
  for (let i = 1; i <= text.length; i++) {
    fragments.push(text.substring(0, i));
  }
  return fragments;
}

⏱️ 智能延遲控制

let delay = 50; // 基礎延遲

// 根據標點符號調整延遲
if (fragment.endsWith('。') || fragment.endsWith('！')) {
  delay = 200; // 句號和驚嘆號後較長停頓
} else if (fragment.endsWith('，')) {
  delay = 100; // 逗號後中等停頓
}

// 隨機化延遲，模擬真實打字
delay += Math.random() * 50;

🔄 前端 SSE 連接

const eventSource = new EventSource(`/ai-stream?prompt=${prompt}`);

// 處理串流數據
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  updateMessage(data.content, data.progress);
};

// 處理結束事件
eventSource.addEventListener('end', (event) => {
  const data = JSON.parse(event.data);
  finalizeMessage(data.fullText);
  eventSource.close();
});

🎨 使用體驗

1. 歡迎頁面

• 展示預設問題建議
• 點擊即可快速開始對話

2. 對話體驗

• 用戶輸入問題後，AI 開始"思考"
• 逐字顯示回應，模擬真實打字效果
• 顯示生成進度和停止按鈕

3. 進階功能

• 中斷生成：隨時停止 AI 回應
• 清空對話：重新開始對話
• 自動滾動：始終顯示最新訊息

💡 預設 AI 回應庫

專案內建了多種情境的 AI 回應：

• 🖐️ 問候語：「你好」
• 🌤️ 天氣查詢：「今天天氣如何」
• 🧠 技術解釋：「什麼是人工智能」、「什麼是 React」
• 👤 自我介紹：「介紹一下自己」
• 📚 學習建議：「如何學習程式設計」
• 🔧 預設回應：處理未匹配的問題

📱 響應式設計

• 桌面版：雙欄佈局，最佳體驗
• 平板版：自適應調整，保持易用性
• 手機版：單欄佈局，專門優化

🎨 視覺特色

• 漸層背景：專業的視覺效果
• 打字動畫：閃爍的游標效果
• 進度指示：即時顯示生成進度
• 平滑動畫：所有互動都有流暢過渡
• 暗色主題：自動適應系統偏好

🔧 開發說明

專案結構

ai-stream-simulator/
├── public/          # 靜態檔案
├── server/          # 後端服務器
│   └── index.js    # Express 服務器 + SSE 實現
├── src/            # 前端源碼
│   ├── App.tsx     # 主應用組件
│   ├── index.tsx   # 應用入口點
│   └── styles.css  # 樣式檔案
├── package.json    # 專案配置
├── webpack.config.js # Webpack 配置
└── tsconfig.json   # TypeScript 配置

自定義配置

1. 修改 AI 回應：編輯 server/index.js 中的 aiResponses 物件
2. 調整延遲時間：修改 createFragments 函數中的延遲邏輯
3. 更改樣式：編輯 src/styles.css 檔案
4. 端口配置：修改 package.json 中的啟動腳本

🚀 生產部署

建構專案

npm run build

部署選項

• Vercel/Netlify：前端靜態部署
• Heroku：全棧部署
• Docker：容器化部署
• VPS：自定義服務器部署

🔍 故障排除

常見問題

1. SSE 連接失敗

   • 檢查後端服務器是否運行
   • 確認端口號正確（預設 5000）
   • 檢查 CORS 設定

2. 串流中斷

   • 檢查網絡連接穩定性
   • 查看瀏覽器控制台錯誤
   • 確認 EventSource 支援

3. 打字效果異常

   • 檢查延遲設定
   • 確認片段化邏輯
   • 查看 CSS 動畫是否正常

🎓 學習價值

這個專案是學習以下技術的絕佳實例：

• Server-Sent Events (SSE) 實戰應用
• React Hooks 進階使用
• TypeScript 類型安全開發
• 即時通訊 技術實現
• 用戶體驗 設計思考

🤝 貢獻

歡迎提交 Issue 和 Pull Request！

📄 授權

此專案採用 ISC 授權條款。

---

享受與 AI 的對話體驗！ 🤖✨