Skip to main content
Version: 4.x

教程步骤 #1 - 项目初始化


项目初始化

第一个目标是建立一个简单的 HTML 网页,提供表单和消息列表。 为此,我们将使用 Node.JS Web 框架 express。 确保已安装 Node.JS

英:The first goal is to set up a simple HTML webpage that serves out a form and a list of messages. We’re going to use the Node.JS web framework express to this end. Make sure Node.JS is installed.

首先让我们创建一个描述我们项目的 package.json 清单文件。 我建议你将其放在一个专用的空目录中(我将其称为我的 socket-chat-example)。

英:First let’s create a package.json manifest file that describes our project. I recommend you place it in a dedicated empty directory (I’ll call mine socket-chat-example).

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

"name" 属性必须是唯一的,不能使用 "socket.io" 或 "express" 这样的值,因为 npm 在安装依赖时会抱怨。

英:The "name" property must be unique, you cannot use a value like "socket.io" or "express", because npm will complain when installing the dependency.

现在,为了轻松地用我们需要的东西填充 dependencies 属性,我们将使用 npm install

英:Now, in order to easily populate the dependencies property with the things we need, we’ll use npm install:

npm install express@4

安装后,我们可以创建一个 index.js 文件来设置我们的应用。

英:Once it's installed we can create an index.js file that will set up our application.

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');
});

这意味着:

英:This means that:

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

如果运行 node index.js,你应该看到以下内容:

英:If you run node index.js you should see the following:

A console saying that the server has started listening on port 3000

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

英:And if you point your browser to http://localhost:3000:

A browser displaying a big 'Hello World'

到目前为止,一切都很好!

英:So far, so good!

info

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

英:You can run this example directly in your browser on: