Node.js/基本範例程式：修訂版本之間的差異

出自福留子孫
跳轉到： 導覽、 搜尋
（→‎範例二）
第 28 行： 第 28 行：
 
console.log('Hello, World!');</pre>
 
console.log('Hello, World!');</pre>
  
−
===範例二===
+
===示範二===
 
伺服器端的 js 程式透過 node.js 聽本機的 8080 port
 
伺服器端的 js 程式透過 node.js 聽本機的 8080 port
  
第 60 行： 第 60 行：
 
   console.log(`Server is listening on port ${port}`);
 
   console.log(`Server is listening on port ${port}`);
 
});
 
});
 +
</pre>
  
 +
===示範三===
 +
伺服器端的 js 程式透過 node.js 聽本機的 8080 port＋載入另一個 javascript
 +
 +
<pre>
 +
// 引入 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}`);
 +
});
 +
</pre>
 +
 +
===示範四===
 +
找出檔案的實體路徑
 +
 +
<pre>
 +
console.log(__dirname); // 顯示當前模組的目錄名稱
 +
console.log(process.cwd()); // 顯示當前工作目錄的路徑
 +
</pre>
 +
 +
===示範五===
 +
如何在 node.js 載入 html 檔案？
 +
 +
如果你想要在瀏覽器中載入一個 Node.js 模組，你需要先將它轉換成瀏覽器可執行的 JavaScript 檔案，例如使用 Browserify 或 webpack 等打包工具將 Node.js 模組轉換為瀏覽器可執行的代碼，然後在 HTML 檔案中載入轉換後的代碼。
 +
 +
以下是一個使用 Browserify 轉換 Node.js 模組的示範<br/>
 +
1.假設你有一個 Node.js 模組 mymodule.js，位於 ./src/mymodule.js 目錄下。<br/>
 +
2.使用 npm 安裝 Browserify：npm install -g browserify<br/>
 +
3.使用以下命令將 mymodule.js 轉換為瀏覽器可執行的代碼，並儲存到 bundle.js 檔案中：<br/>
 +
<pre>
 +
browserify src/mymodule.js -o bundle.js
 +
</pre>
 +
4.html中執行腳本
 +
<pre>
 +
<html>
 +
  <head>
 +
    <script src="bundle.js"></script>
 +
  </head>
 +
  <body>
 +
    <script>
 +
      // 在瀏覽器中使用 mymodule 模組
 +
      var mymodule = require('mymodule');
 +
      console.log(mymodule.foo());
 +
    </script>
 +
  </body>
 +
</html>
 
</pre>
 
</pre>
  

2023年3月7日 (二) 15:01的修訂版本

一、範例一

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 

// 引入 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>

二、共筆白板

  1. http://192.168.4.2/eBoard.html
  2. http://192.168.4.2/eBoard.js
    node eBoard.js 會跑 V8 然後被中斷

在 DS720+ 上執行：

  1. 先裝 Node.js v18
  2. 建 web 下建 node_socket 資料夾
  3. 上傳 Socket_test.js,Socket_test.html 到 node_socket 資料夾
  4. 取得 root 權限後在 node_socket 資料夾 執行「npm install express」
  5. 在伺服器執行「node Socket_test.js」時，會需要一連串的 node_modules ，從 etherpad 拷過來後，終於可以執行
  6. 在瀏覽器中跑「http://twees.info/node_socket/Socket_test.html」會動，但和後端連不起來
  7. 可見從 etherpad 拷過來的 node_modules ，並不符合本例中的需求，須帶芸伍電腦中的 node_modules 過來
取自「http://jendo.org/wellBeingNg/index.php?title=Node.js/基本範例程式&oldid=13273」