2. 用JavaScript和Node.js实现一个简单的聊天应用

构建你的聊天应用：从零到英雄

1. 安装Node.js和npm

首先，确保你的计算机上已经安装了Node.js和npm。如果没有，请访问Node.js官网下载并安装。这个过程就像是在超市里挑选食材，没有它们，我们的大餐就无法开始烹饪。

2. 创建项目文件夹

在你的计算机上创建一个新的文件夹，用于存放聊天应用的项目文件。例如，可以命名为chat-app。这就像是为了即将到来的盛宴准备一个宽敞明亮的厨房。

3. 初始化项目

进入chat-app文件夹，然后在命令行中运行以下命令以初始化项目：

bash 复制代码

npm init -y

这将生成一个package.json文件，用于存储项目的依赖和配置信息。这个文件就像是我们的菜谱，记录了我们需要的所有食材和步骤。

4. 安装Express框架

Express是一个流行的Web应用程序框架，可以帮助我们快速搭建聊天应用。在命令行中运行以下命令以安装Express:

bash 复制代码

npm install express --save

这就像是在超市里找到了最新鲜的蔬菜，为我们的菜肴增添了色彩和营养。

5. 创建主文件

在chat-app文件夹中创建一个名为index.js的文件。这将是聊天应用的主文件。这就像是一位大厨拿起他的刀，准备开始切割这些新鲜的食材。

6. 编写代码

在index.js文件中编写以下代码：

javascript 复制代码

// 引入所需模块
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const http = require('http').createServer(app);
const io = require('socket.io')(http);

// 使用body-parser中间件解析请求体
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 定义静态文件夹路径
app.use(express.static(__dirname + '/public'));

// 设置端口号
const port = process.env.PORT || 3000;

// 当有客户端连接时触发
io.on('connection', (socket) => {
  console.log('用户已连接');
  // 当收到客户端消息时触发
    socket.on('chat message', (msg) => {
        io.emit('chat message', msg);
          });
  // 当客户端断开连接时触发
    socket.on('disconnect', () => {
        console.log('用户已断开连接');
          });
          });
// 启动服务器并监听指定端口
http.listen(port, () => {
  console.log(`聊天应用正在监听端口${port}`);
  });

这段代码就像是我们的烹饪过程，每一步都精心安排，确保最终的菜肴美味可口。

7. 创建HTML模板文件

在chat-app文件夹中创建一个名为public的文件夹。在这个文件夹中创建一个名为index.html的文件。这将是我们的聊天应用的HTML模板。这就像是我们的餐桌，摆放着精美的餐具等待食物的到来。

8. 编写HTML代码

在index.html文件中编写以下代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <title>简单聊天应用</title>
      <style>
          #messages { list-style-type: none; margin: 0; padding: 0; }
              #messages li { padding: 5px 10px; }
                </style>
                </head>
                <body>
                  <ul id="messages"></ul>
                    <form action="">
                        <input id="m" autocomplete="off" /><button>发送</button>
                          </form>
                            <script src="/socket.io/socket.io.js"></script>
                              <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                                <script>
                                    $(function() {
                                          const socket = io();
                                                const form = $('form');
                                                      const input = $('input');
                                                            const messages = $('#messages');
                                                                  const m = $('#m');
                                                                        form.submit(function(e){ e.preventDefault(); }); // 防止表单提交时页面刷新问题，需要的话可以注释掉这一行代码。如果你想保留这个功能，你可以使用以下代码替换上面的代码： if (!socket) return; $(this).trigger('submit'); }); // 在表单提交时通过socket发送消息。注意：这里使用了jQuery库来简化DOM操作。 如果你不想使用jQuery库，你可以手动获取输入框中的值并通过socket发送消息。 socket.on('chat message', function(msg){ // 在收到消息时将其添加到列表中 messages.append($('<li>').text(msg)); }); input.keypress(function(e){ if(e.which === 13){ // 当按下回车键时通过socket发送消息 socket.emit('chat message', m.val()); m.val(''); return false;} }); window.socket = socket; window.form = form; window.input = input; window.messages = messages; window.m = m; }); </script> <!-- 注意：这里使用了jQuery库来简化DOM操作。 如果你不想使用jQuery库，你可以手动获取输入框中的值并通过socket发送消息。 --> </body> </html> ```