{%hackmd C-_zW0vxSXSSsOkJHknc8g %} # React project: <br> wujue-gpt [TOC] --- ## 簡介 - 用 React 做一個簡易的網頁版 Chat GPT --- ## Backend - 使用 Express framework 做一個串接 Chat API 的服務 ---- ### Express - [Express](https://developer.mozilla.org/zh-TW/docs/Learn/Server-side/Express_Nodejs/Introduction) 是最受歡迎的 Node web 框架，還是其他許多流行的Node web 框架的底層庫，它提供： - 替不同 HTTP Method、不同 URL 路徑的 requests 編寫不同的處理方法 - 透過整合「畫面」的渲染引擎來達到插入資料到樣板中產生 response - 設定常見的 web 應用設定，例如：連線用的 port 和產生 response 的樣板位置 - 在 request 的處理流程中增加額外的「中間層」進行處理 ---- ### CORS - [跨來源資源共用](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS)（Cross-Origin Resource Sharing, CORS）是一種使用額外 HTTP 標頭令目前瀏覽網站的使用者代理取得存取其他來源（網域）伺服器特定資源權限的機制 - 由於 Express 預設為不准許 CORS，所以需要再安裝 [cors](https://expressjs.com/en/resources/middleware/cors.html) package ---- ### Fetch - Node.js 沒有實作 fetch API，所以要另外安裝 [node-fetch](https://www.npmjs.com/package/node-fetch) --- ## Frontend - 用 React 做一個簡易的聊天頁面 ---- ### Stream iterator ```javascript= async function* streamToAsyncIterator(stream: ReadableStream<Uint8Array>): AsyncGenerator<Uint8Array> { const reader = stream.getReader(); try { while (true) { const { done, value } = await reader.read(); if (done) break; yield value; } } catch (error) { console.error(error); } } ``` ---- ### React syntax highlighter - [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) 是一個讓程式碼變漂亮的東東 ---- ### Auto scroll 1. 更新聊天室內容時要自動滾動至最下方 2. 使用者將滑鼠滾輪滾向上時停止自動滾動 3. 使用者將滑鼠滾輪滾向下時根據與最下邊界距離判斷是否開啟自動滾動 ---- ### React memo - [memo](https://react.dev/reference/react/memo) lets you skip re-rendering a component when its props are unchanged. ```javascript= import { memo } from 'react'; const SomeComponent = memo(function SomeComponent(props) { // ... }); ``` --- ## 成果~~~ - [WujueGPT](https://wujue0115.github.io/wujue-gpt/#/)  <style> hr.in-view { height: 0; } img { border-radius: 5px; } div.slide-background-content { background-color: #181825; } .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { color: #ffe8d1; } </style>