iT邦幫忙

2026 iThome 鐵人賽

DAY 21
0
AI Engineering

30 天從資料處理、分析到生成式 AI 的整合應用與實作學習系列 第 21 篇

HttpServer:Frontend 和 Backend 怎麼連起來?

  • 分享至 

  • xImage
  •  

由於目前使用者發出的問題只是停留在 Browser 裡,所以接下來想了解的是 Frontend 和 Backend 到底是如何互相傳送資料,並將昨天簡易的網頁和前面的 Java 分析功能連接起來。

Java HttpServer

這裡建立接收問題的路徑 /api/chat,它就像是 Frontend 和 Java 溝通的一個入口。當 Frontend 對這個位置發送 Request 時,Server 就會把它交給對應的程式處理。

Java 怎麼取得 Request Body?

因為使用者的問題是在 Browser 輸入的,所以 Backend 一開始並不知道使用者輸入了什麼,需要由 Frontend 把資料放進 HTTP Request 傳過來。
Frontend 透過 fetch() 的 POST Request,把使用者的問題以 JSON 放在 Request Body 裡, Server 收到 Request 後,再讀取 Body,利用 Gson 找到 JSON 中的 query,最後再轉成 Java 可以使用的 userQuery。
https://ithelp.ithome.com.tw/upload/images/20261004/20184235Keqalw7TZ1.png
這邊先找到 JSON 裡面的 query,再利用 .getAsString() 取得真正的問題。這樣原本在 Browser 輸入的內容,就真的變成 Java 裡面的 userQuery,可以繼續交給原本的睡眠分析流程。

如何將結果送回 Browser

Java 分析完成後,還需要再透過 HTTP Response 把結果傳回 Frontend,使用者才能看得到最後的結果。
https://ithelp.ithome.com.tw/upload/images/20261004/20184235i3MXif4stH.png
分析結果會被放在 reply 裡,再由 Java Server 回傳給 Browser,Frontend 收到 Response 後,再取出 reply 顯示在網頁上。

用 Network 觀察

https://ithelp.ithome.com.tw/upload/images/20261004/20184235YNCB2be9Yx.png
從圖上可以看到 POST 代表這次 Frontend 有把資料送給 Backend,而 200 OK 則表示 Java Server 有成功處理這次的 Request。另外在 Request Headers 中也可以看到 Content-Type: application/json ,表示 Frontend 傳出去的是 JSON,所以 Java 才會再利用 Gson 解析 Request Body。

今日的小成果:

https://ithelp.ithome.com.tw/upload/images/20261004/2018423565z814zdl0.png
目前 Browser 和 Java Server 都還是在自己的電腦上,透過 localhost 執行。接下來還需要再處理 Server 怎麼讓外部服務存取,以及 Webhook 等問題,才能將 LINE 或其他外部服務也可以把資料傳進來。


上一篇
Fetch API:從 Frontend 發出 HTTP Request
下一篇
AI Backend 如何讓不同來源的 Frontend 存取?認識 CORS
系列文
30 天從資料處理、分析到生成式 AI 的整合應用與實作學習 共 26 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言