项目初始化

第一个目标是设置一个简单的 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 模块

{
  "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 模块

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 模块

您可以在浏览器中直接运行此示例，地址为

• CodeSandbox
• StackBlitz