由於目前使用者發出的問題只是停留在 Browser 裡,所以接下來想了解的是 Frontend 和 Backend 到底是如何互相傳送資料,並將昨天簡易的網頁和前面的 Java 分析功能連接起來。
這裡建立接收問題的路徑 /api/chat,它就像是 Frontend 和 Java 溝通的一個入口。當 Frontend 對這個位置發送 Request 時,Server 就會把它交給對應的程式處理。
因為使用者的問題是在 Browser 輸入的,所以 Backend 一開始並不知道使用者輸入了什麼,需要由 Frontend 把資料放進 HTTP Request 傳過來。
Frontend 透過 fetch() 的 POST Request,把使用者的問題以 JSON 放在 Request Body 裡, Server 收到 Request 後,再讀取 Body,利用 Gson 找到 JSON 中的 query,最後再轉成 Java 可以使用的 userQuery。
這邊先找到 JSON 裡面的 query,再利用 .getAsString() 取得真正的問題。這樣原本在 Browser 輸入的內容,就真的變成 Java 裡面的 userQuery,可以繼續交給原本的睡眠分析流程。
Java 分析完成後,還需要再透過 HTTP Response 把結果傳回 Frontend,使用者才能看得到最後的結果。
分析結果會被放在 reply 裡,再由 Java Server 回傳給 Browser,Frontend 收到 Response 後,再取出 reply 顯示在網頁上。

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

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