[Day 6] 零碳運算 - 以Express 伺服器發送聊天室的HTML頁面

15th鐵人賽

kingkenleung

團隊沙培小子

2023-09-21 22:47:43

202 瀏覽

分享至

Express只能發送文字嗎？

上回提到用Express 伺服器跟前端說「Hello」，純文字的內容，甚麼介面也沒有，說好的聊天室呢？

一般來說，客戶端無法看見任何在伺服器上的檔案，這也是為了伺服器的安全（怎能讓網民隨意檢視伺服器程式的代碼呢！）。然而，Express 提供了一個優雅的自帶功能，今天我將會示範如何用這功能向客戶端發送任何靜態檔案。

聊天室的頁面

來寫一個極簡的吧，反正這階段只是在做Proof-of-concept。請先在根目錄開一個資料夾，名為「public」，意味著這資料夾內的內容可以讓客戶端自由獲取。然後，在裡面新增一個HTML檔，名為index.html。

把以下的代碼放進去。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
</head>

<body>
    <h1>零碳運算</h1>
    <input></input>
    <input type="button" value="send"></input>
</body>

</html>

然後，請回到根目錄的index.js，也就是伺服器程式的門戶，以下面句子取代apt.get()：

這個部分不要了
//app.get('/', (req, res) => {
//    //向客戶回應「Hello World!」
//    res.send('Hello World!');
//});

// 以 / 為起點，可以根據public 資料夾內的相對路徑獲得裡面的任何靜態檔案。
app.use("/", express.static("public"));

因此，若果我就這到「localhost:3000/index.html」，我將能讀取index.html的頁面。