專案初始化

第一步是設定一個提供表單和訊息清單的簡單 HTML 網頁。我們將使用 Node.JS 網路架構 express 來達成此目的。請確認已安裝 Node.JS。

首先，讓我們建立一個描述專案的 package.json 清單檔案。建議您將其放置在專用的空目錄中（我將我的目錄命名為 socket-chat-example）。

CommonJS

{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "type": "commonjs",
  "dependencies": {}
}

ES 模組

{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "type": "module",
  "dependencies": {}
}

注意

「名稱」屬性必須是唯一的，您無法使用「socket.io」或「express」等值，因為 npm 在安裝相依項時會發生錯誤。

現在，為了輕鬆地使用我們需要的項目填入 dependencies 屬性，我們將使用 npm install

npm install express@4

安裝後，我們可以建立一個 index.js 檔案，用來設定我們的應用程式。

CommonJS

const express = require('express');
const { createServer } = require('node:http');

const app = express();
const server = createServer(app);

app.get('/', (req, res) => {
  res.send('<h1>Hello world</h1>');
});

server.listen(3000, () => {
  console.log('server running at https://127.0.0.1:3000');
});

ES 模組

import express from 'express';
import { createServer } from 'node:http';

const app = express();
const server = createServer(app);

app.get('/', (req, res) => {
  res.send('<h1>Hello world</h1>');
});

server.listen(3000, () => {
  console.log('server running at https://127.0.0.1:3000');
});

這表示

• Express 將 app 初始化為一個函式處理常式，你可以提供給 HTTP 伺服器（如第 5 行所示）。
• 我們定義一個路由處理常式 /，當我們進入網站首頁時會呼叫它。
• 我們讓 http 伺服器在 3000 埠上監聽。

如果你執行 node index.js，你應該會看到以下內容

如果你將瀏覽器指向 https://127.0.0.1:3000

到目前為止，一切都很好！

資訊

CommonJS

你可以在以下瀏覽器上直接執行此範例

• CodeSandbox
• StackBlitz

ES 模組

你可以在以下瀏覽器上直接執行此範例

• CodeSandbox
• StackBlitz