Node.js/基本範例程式:修訂版本之間的差異
出自福留子孫
(→示範五) |
(→示範二) |
||
第 29 行: | 第 29 行: | ||
===示範二=== | ===示範二=== | ||
− | 伺服器端的 js 程式透過 node.js 聽本機的 8080 port | + | 伺服器端的 js 程式透過 node.js 聽本機的 8080 port<br/>javascript 代碼如下: |
− | + | ||
<pre> | <pre> | ||
// 引入 http 模組 | // 引入 http 模組 |
2023年3月7日 (二) 15:30的修訂版本
一、範例一
DS218+ /web 下,執行「node index.js」會出
Hello, World! Server running at http://localhost:3000/
index.js 程式碼如下:
// 引入 Node.js 的核心模組 const http = require('http'); // 建立一個 HTTP 伺服器 const server = http.createServer((req, res) => { // 設定 HTTP 回應的狀態碼、標頭和內容 res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello, World!\n'); }); // 啟動伺服器,並監聽 3000 port 的連線 server.listen(3000, () => { console.log('Server running at http://localhost:3000/'); // 當伺服器啟動後,在命令列中印出訊息 }); // 引入內建的 `console` 模組 const console = require('console'); // 呼叫 `console.log` 方法,在終端機中輸出一段文字 console.log('Hello, World!');
示範二
伺服器端的 js 程式透過 node.js 聽本機的 8080 port
javascript 代碼如下:
// 引入 http 模組 const http = require('http'); // 設定伺服器監聽的 port const port = 8080; // 建立一個 http 伺服器 const server = http.createServer((req, res) => { // 設定回應頭 res.writeHead(200, {'Content-Type': 'text/html'}); // 回應一個簡單的 HTML 頁面 res.end(` <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> </body> </html> `); }); // 監聽本機的 8080 port server.listen(port, () => { console.log(`Server is listening on port ${port}`); });
示範三
伺服器端的 js 程式透過 node.js 聽本機的 8080 port+載入另一個 javascript
// 引入 http 和 fs 模組 const http = require('http'); const fs = require('fs'); // 設定伺服器監聽的 port const port = 8080; // 建立一個 http 伺服器 const server = http.createServer((req, res) => { // 如果客戶端請求的是指定的 JS 檔案,就回傳檔案內容 if (req.url === '/myScript.js') { // 讀取指定的檔案 fs.readFile('./myScript.js', (err, data) => { if (err) { // 如果讀取檔案失敗,回傳 500 錯誤碼 res.writeHead(500); res.end(); } else { // 如果讀取檔案成功,回傳檔案內容和正確的 content-type res.writeHead(200, {'Content-Type': 'text/javascript'}); res.write(data); res.end(); } }); } else { // 如果客戶端請求的不是指定的 JS 檔案,回傳一個簡單的 HTML 頁面 res.writeHead(200, {'Content-Type': 'text/html'}); res.end(` <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <script src="/myScript.js"></script> </body> </html> `); } }); // 監聽本機的 8080 port server.listen(port, () => { console.log(`Server is listening on port ${port}`); });
示範四
找出檔案的實體路徑
console.log(__dirname); // 顯示當前模組的目錄名稱 console.log(process.cwd()); // 顯示當前工作目錄的路徑
示範五
如何在 node.js 載入 html 檔案?
如果你想要在瀏覽器中載入一個 Node.js 模組,你需要先將它轉換成瀏覽器可執行的 JavaScript 檔案,例如使用 Browserify 或 webpack 等打包工具將 Node.js 模組轉換為瀏覽器可執行的代碼,然後在 HTML 檔案中載入轉換後的代碼。
以下是一個使用 Browserify 轉換 Node.js 模組的示範
1.假設你有一個 Node.js 模組 mymodule.js,位於 ./src/mymodule.js 目錄下。
2.使用 npm 安裝 Browserify:npm install -g browserify
3.使用以下命令將 mymodule.js 轉換為瀏覽器可執行的代碼,並儲存到 bundle.js 檔案中:
browserify src/mymodule.js -o bundle.js
4.html中執行腳本
<html> <head> <script src="bundle.js"></script> </head> <body> <script> // 在瀏覽器中使用 mymodule 模組 var mymodule = require('mymodule'); console.log(mymodule.foo()); </script> </body> </html>
示範六
正式網頁服務 html 取用 node.js 模組只能引用 cdn 的 http 物件方法與屬性。(例如:node socket)
<script src="https://cdn.socket.io/4.6.1/socket.io.js"></script> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
二、共筆白板
- http://192.168.4.2/eBoard.html
- http://192.168.4.2/eBoard.js
node eBoard.js 會跑 V8 然後被中斷
在 DS720+ 上執行:
- 先裝 Node.js v18
- 建 web 下建 node_socket 資料夾
- 上傳 Socket_test.js,Socket_test.html 到 node_socket 資料夾
- 取得 root 權限後在 node_socket 資料夾 執行「npm install express」
- 在伺服器執行「node Socket_test.js」時,會需要一連串的 node_modules ,從 etherpad 拷過來後,終於可以執行
- 在瀏覽器中跑「http://twees.info/node_socket/Socket_test.html」會動,但和後端連不起來
- 可見從 etherpad 拷過來的 node_modules ,並不符合本例中的需求,須帶芸伍電腦中的 node_modules 過來