项目初始化

我们的首要目标是设置一个简单的 HTML 网页，用于提供一个表单和消息列表。我们将使用 Node.JS 的 Web 框架 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 modules

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

警告

"name" 属性必须是唯一的，不能使用类似 "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 http://localhost:3000');
});

ES modules

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 http://localhost:3000');
});

这意味着：

• Express 初始化 app 为一个函数处理器，可以提供给 HTTP 服务器（如第 5 行所示）。
• 我们定义了一个路由处理器 /，当访问我们的网站主页时会被调用。
• 我们让 HTTP 服务器监听 3000 端口。

如果运行 node index.js，你应该会看到以下内容：

如果将浏览器指向 http://localhost:3000：

到目前为止，一切顺利！

信息

CommonJS

你可以在浏览器中直接运行此示例：

• CodeSandbox
• StackBlitz

ES modules

你可以在浏览器中直接运行此示例：

• CodeSandbox
• StackBlitz