2 篇文章含有標籤「Node.js」

檢視所有標籤

Node.js 入門教學筆記 | 學習筆記

2024年12月9日 · 閱讀時間約 3 分鐘

kdchang

Node.js 是一個基於 Chrome V8 JavaScript 引擎的運行環境，可讓開發者使用 JavaScript 來撰寫後端程式。它適合用於構建高效能、非同步的網路應用。

1.1 為何選擇 Node.js？

非同步 & 事件驅動：適合 I/O 密集型應用，如 Web 伺服器。
單一語言開發：可用 JavaScript 同時開發前端與後端。
強大的生態系統：擁有豐富的 NPM（Node Package Manager）套件。
高效能：基於 V8 引擎，運行速度快。

2. 安裝與環境設定

2.1 安裝 Node.js

從 Node.js 官方網站下載並安裝 LTS 版本。

2.2 檢查安裝是否成功

安裝完成後，在終端機輸入以下指令：

node -v
npm -v

應該會顯示 Node.js 和 npm（Node 套件管理工具）的版本號。

3. 基本應用程式

3.1 建立第一個 Node.js 應用

新建一個 app.js 檔案，並輸入：

console.log('Hello, Node.js!');

然後在終端機執行：

node app.js

應該會輸出：

Hello, Node.js!

3.2 建立簡單的 HTTP 伺服器

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello, World!');
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

執行後，開啟瀏覽器並訪問 http://localhost:3000，應該會看到 Hello, World!。

4. Node.js 模組

4.1 內建模組

Node.js 提供許多內建模組，例如：

const fs = require('fs'); // 檔案系統
const path = require('path'); // 路徑處理
const os = require('os'); // 作業系統資訊

4.2 NPM 套件管理

安裝 Express 框架：

npm install express

5. Express 入門

5.1 建立簡單的 Express 伺服器

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello, Express!');
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

6. 讀取與寫入檔案

6.1 讀取檔案

const fs = require('fs');

fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

6.2 寫入檔案

fs.writeFile('output.txt', 'Hello, Node.js!', (err) => {
  if (err) throw err;
  console.log('File has been saved!');
});

7. 連接 MongoDB 資料庫

7.1 安裝 MongoDB 驅動

npm install mongoose

7.2 連接 MongoDB

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/testDB', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('Connected to MongoDB'))
  .catch(err => console.error(err));

8. 部署 Node.js 應用

8.1 使用 PM2 管理應用

安裝 PM2：

npm install -g pm2

啟動應用：

pm2 start app.js

8.2 使用 Docker 部署

建立 Dockerfile：

FROM node:14
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
CMD ["node", "app.js"]
EXPOSE 3000

9. 結論

透過這篇入門筆記，初學者可以快速掌握 Node.js 的基礎概念與實作技巧，包含 HTTP 伺服器、檔案操作、資料庫連接等。建議進一步學習異步程式設計、RESTful API、WebSocket 以及雲端部署技術，以提升開發能力。

WebSocket 入門教學筆記（ESM 模組版） | 學習筆記

2024年7月11日 · 閱讀時間約 4 分鐘

kdchang

前言

在現代前端與全端開發中，許多應用需求都仰賴即時資料傳輸，例如即時聊天、線上協作、股票報價、IoT 裝置通訊等。而傳統的 HTTP 協定採用「請求－回應」模式，並不適合雙向即時通訊。這時，WebSocket 協定就成為更有效率的替代方案。

WebSocket 是 HTML5 標準的一部分，它允許在用戶端與伺服器之間建立一條持久的雙向連線。這使得伺服器能即時推播資料給客戶端，而非只能等待客戶端請求，適合實作低延遲、高互動的應用場景。

本教學將透過現代的 ESM（ECMAScript Module）語法，介紹如何在 Node.js 環境中建立 WebSocket 應用，並搭配 HTML 客戶端示範雙向通訊流程。

重點摘要

WebSocket 是什麼？ 一種基於 TCP 的雙向通訊協定，可在瀏覽器與伺服器之間建立長連線。
優點
- 持久連線，不需每次重複建立與關閉連線
- 支援伺服器主動推播資料給客戶端
- 節省頻寬與延遲
- 適用於高即時性場景

WebSocket vs HTTP

特性	HTTP	WebSocket
通訊模式	客戶端請求 → 伺服器回應	雙向（Client ↔ Server）
連線型態	短連線	長連線（持續開啟）
傳輸效率	較低（含 header）	高效（精簡封包）

常見應用情境
- 即時聊天系統
- 線上遊戲同步
- IoT 裝置狀態回報
- 即時儀表板或股市報價
基本 API（前端）
- new WebSocket(url)：建立連線
- socket.onopen：連線成功
- socket.send()：傳送資料
- socket.onmessage：接收訊息
- socket.onclose：連線關閉
- socket.onerror：錯誤處理

實作範例（Node.js + ESM + 原生 HTML）

一、專案初始化

建立一個新的資料夾並初始化：

mkdir websocket-esm-demo
cd websocket-esm-demo
npm init -y
npm install ws

修改 package.json 以啟用 ESM 模組支援：

{
  "name": "websocket-esm-demo",
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "ws": "^8.0.0"
  }
}

二、伺服器端（使用 ESM 模組語法）

建立 server.js：

// server.js
import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('用戶已連線');

  ws.on('message', (message) => {
    console.log(`收到用戶訊息：${message}`);
    ws.send(`伺服器收到：${message}`);
  });

  ws.on('close', () => {
    console.log('連線已關閉');
  });

  ws.on('error', (err) => {
    console.error('WebSocket 錯誤：', err);
  });
});

console.log('WebSocket 伺服器啟動於 ws://localhost:8080');

三、客戶端 HTML（WebSocket 客戶端）

建立 index.html：

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8" />
    <title>WebSocket ESM 範例</title>
  </head>
  <body>
    <h1>WebSocket 即時通訊示範</h1>
    <input type="text" id="input" placeholder="輸入訊息" />
    <button onclick="sendMessage()">送出</button>
    <ul id="log"></ul>

    <script>
      const socket = new WebSocket('ws://localhost:8080');

      socket.addEventListener('open', () => {
        logMessage('已連線至伺服器');
      });

      socket.addEventListener('message', (event) => {
        logMessage(`來自伺服器：${event.data}`);
      });

      socket.addEventListener('close', () => {
        logMessage('連線已關閉');
      });

      socket.addEventListener('error', () => {
        logMessage('連線發生錯誤');
      });

      function sendMessage() {
        const input = document.getElementById('input');
        socket.send(input.value);
        logMessage(`你說：${input.value}`);
        input.value = '';
      }

      function logMessage(msg) {
        const li = document.createElement('li');
        li.textContent = msg;
        document.getElementById('log').appendChild(li);
      }
    </script>
  </body>
</html>

四、執行與測試

啟動伺服器：

node server.js

打開 index.html（直接用瀏覽器開啟或用 VSCode Live Server 插件）
在輸入框輸入訊息，點擊「送出」，觀察瀏覽器與後端終端機回應。

補充與進階建議

安全性： 若部署在生產環境，應使用 wss://（WebSocket over TLS）取代 ws://。
重連策略： 真實場景下需考慮自動重連機制（如斷線重試）。
認證機制： WebSocket 不支援標準 HTTP 標頭傳遞 JWT，通常可透過 URL query 傳 token，或搭配 Session Cookie。
整合框架： 可結合 Express、Koa、Fastify 使用同一個 HTTP 伺服器提供 HTTP 與 WS。

總結

WebSocket 是實現現代即時網頁應用的重要基礎建設，能提供更快、更輕量的資料通訊方式。透過本文，你應該已能建立一個使用 ESM 寫法的簡單 WebSocket 應用，並了解其基本運作流程。未來你可以進一步探索如 Socket.IO、SignalR 或 WebRTC 等進階解決方案，以支援更多功能與兼容性需求。

1.1 為何選擇 Node.js？​

2. 安裝與環境設定

2.1 安裝 Node.js​

2.2 檢查安裝是否成功​

3. 基本應用程式

3.1 建立第一個 Node.js 應用​

3.2 建立簡單的 HTTP 伺服器​

4. Node.js 模組

4.1 內建模組​

4.2 NPM 套件管理​

5. Express 入門

5.1 建立簡單的 Express 伺服器​

6. 讀取與寫入檔案

6.1 讀取檔案​

6.2 寫入檔案​

7. 連接 MongoDB 資料庫

7.1 安裝 MongoDB 驅動​

7.2 連接 MongoDB​