教程：使用 Express.js 搭建一个简单的聊天室-JavaScript中文网-JavaScript教程资源分享门户

在本教程中，我们将使用 Express.js 框架搭建一个简单的聊天室。这个聊天室将允许用户发送消息并在聊天室中显示。我们将使用 Node.js 和 Socket.IO 库来实现这个聊天室。

什么是 Express.js？

Express.js 是一个基于 Node.js 平台的 web 应用程序框架。它提供了一组强大的特性，使得构建 web 应用程序变得更加容易和高效。这些特性包括路由、中间件、视图系统等等。Express.js 是一个非常流行的框架，被广泛应用于构建 web 应用程序和 API。

什么是 Socket.IO？

Socket.IO 是一个实时应用程序框架，允许客户端和服务器之间进行双向通信。它是基于 WebSocket 协议实现的，但也支持其他协议，如轮询和长轮询。Socket.IO 提供了一组易于使用的 API，使得构建实时应用程序变得更加容易和高效。

搭建聊天室

安装 Express.js 和 Socket.IO

在开始之前，我们需要安装 Express.js 和 Socket.IO 库。我们可以使用 npm 包管理器来安装这些库。打开终端并输入以下命令：

npm install express socket.io

创建 Express.js 应用程序

我们将使用 Express.js 框架来创建我们的聊天室应用程序。在创建应用程序之前，我们需要创建一个新的目录并在其中创建一个新的 JavaScript 文件。打开终端并输入以下命令：

mkdir chatroom
cd chatroom
touch app.js

现在我们可以打开 app.js 文件并开始编辑。

首先，我们需要引入 Express.js 库并创建一个新的 Express.js 应用程序。我们还需要创建一个 HTTP 服务器并将其绑定到应用程序上。这可以通过以下代码实现：

// javascriptcn.com 代码示例
// 引入 Express.js 库
const express = require('express');

// 创建 Express.js 应用程序
const app = express();

// 创建 HTTP 服务器
const server = require('http').createServer(app);

// 将服务器绑定到应用程序上
const io = require('socket.io')(server);

在这里，我们使用 require() 函数来引入 Express.js、http 和 Socket.IO 库。我们创建一个新的 Express.js 应用程序并将其存储在 app 变量中。我们创建一个 HTTP 服务器并将其绑定到应用程序上。最后，我们使用 Socket.IO 库将服务器绑定到应用程序上。

创建路由

现在我们需要创建一些路由来处理 HTTP 请求。我们将创建一个路由来处理根路径请求，并将其发送到聊天室页面。这可以通过以下代码实现：

// 创建根路径路由
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

在这里，我们使用 get() 函数创建一个新的路由，并将其绑定到根路径上。我们发送 index.html 文件作为响应。

创建 Socket.IO 事件

现在我们需要创建一些 Socket.IO 事件来处理客户端和服务器之间的通信。我们将创建一个事件来处理客户端连接和断开连接，以及一个事件来处理客户端发送的消息。这可以通过以下代码实现：

// javascriptcn.com 代码示例
// 处理客户端连接和断开连接
io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

// 处理客户端发送的消息
socket.on('chat message', (msg) => {
  console.log('message: ' + msg);
});

在这里，我们使用 on() 函数创建一个新的事件监听器，并将其绑定到 connection 事件上。我们在控制台中输出一条消息，表示有新的用户连接到了聊天室。我们还创建一个事件监听器来处理客户端发送的消息。我们在控制台中输出一条消息，表示收到了一条新的消息。

创建聊天室页面

现在我们需要创建一个聊天室页面，以便用户可以在其中发送消息。我们将创建一个简单的 HTML 页面，并将其存储在 index.html 文件中。这可以通过以下代码实现：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Chat Room</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="message-form">
      <input type="text" id="message-input" autocomplete="off" />
      <button type="submit">Send</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      const messageForm = document.getElementById('message-form');
      const messageInput = document.getElementById('message-input');
      const messages = document.getElementById('messages');

      messageForm.addEventListener('submit', (event) => {
        event.preventDefault();
        socket.emit('chat message', messageInput.value);
        messageInput.value = '';
      });

      socket.on('chat message', (msg) => {
        const message = document.createElement('li');
        message.textContent = msg;
        messages.appendChild(message);
      });
    </script>
  </body>
</html>

在这里，我们创建一个包含一个文本框和一个发送按钮的表单，以便用户可以在其中输入和发送消息。我们还创建一个无序列表，用于显示聊天记录。我们使用 Socket.IO 库的客户端库来建立与服务器的连接，并创建事件监听器来处理用户发送的消息和服务器发送的消息。

运行应用程序

现在我们已经完成了应用程序的所有部分，可以运行它并测试它了。在终端中输入以下命令来启动服务器：

node app.js

现在打开浏览器并访问 http://localhost:3000。您将看到一个简单的聊天室页面。您可以在其中输入消息并发送它们。您将看到您发送的消息出现在聊天记录中。

总结

在本教程中，我们学习了如何使用 Express.js 框架和 Socket.IO 库来构建一个简单的聊天室应用程序。我们创建了一个 Express.js 应用程序，并使用 Socket.IO 库将它与 HTTP 服务器绑定。我们创建了一些路由来处理 HTTP 请求，并创建了一些 Socket.IO 事件来处理客户端和服务器之间的通信。最后，我们创建了一个聊天室页面，以便用户可以在其中发送消息。这个聊天室应用程序是一个很好的示例，展示了如何使用 Express.js 和 Socket.IO 库来构建实时应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6571a5fdd2f5e1655da56409