Node.js+Socket.IO 实现小型聊天室-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用程序中，实时通信已成为必不可少的一部分。Socket.IO 是一个流行的 JavaScript 库，它允许在客户端和服务器之间建立实时双向通信。Node.js 是一个流行的服务器端 JavaScript 运行时环境，它可以使用 Socket.IO 来实现实时通信功能。在本文中，我们将介绍如何使用 Node.js 和 Socket.IO 来构建一个小型聊天室应用程序。

前置条件

在开始之前，您需要安装 Node.js 和 Socket.IO。您可以从官方网站下载 Node.js，或者使用您的操作系统包管理器来安装它。您可以使用 npm（Node.js 包管理器）来安装 Socket.IO。在终端中输入以下命令：

npm install socket.io

实现

服务器端

首先，我们需要创建一个 Node.js 应用程序。在您选择的目录中创建一个新目录，并在该目录中创建一个名为 server.js 的文件。在 server.js 文件中，我们将编写服务器端代码。

// javascriptcn.com 代码示例
// 引入 Socket.IO 库
const io = require('socket.io')();

// 监听连接事件
io.on('connection', (client) => {
  console.log('Client connected');

  // 监听聊天消息
  client.on('chat message', (message) => {
    console.log('Message received: ' + message);

    // 广播聊天消息
    io.emit('chat message', message);
  });

  // 监听断开连接事件
  client.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

// 启动服务器
io.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上面的代码中，我们首先引入 Socket.IO 库。然后，我们使用 io() 函数创建一个 Socket.IO 服务器实例，并使用 io.on() 方法监听连接事件。当客户端连接到服务器时，我们将在控制台中记录一条消息，然后使用 client.on() 方法监听 chat message 事件。当客户端发送一条聊天消息时，我们将在控制台中记录一条消息，并使用 io.emit() 方法将消息广播给所有连接到服务器的客户端。最后，我们使用 client.on() 方法监听 disconnect 事件。当客户端断开连接时，我们将在控制台中记录一条消息。

最后，我们使用 io.listen() 方法启动服务器并监听端口 3000。现在，我们的服务器端代码已经完成了。

客户端

接下来，我们需要创建一个 HTML 文件和一个 JavaScript 文件，用于实现客户端代码。在您选择的目录中创建一个名为 index.html 的文件，并在该文件中编写以下代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Socket.IO Chat Example</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="chat-form">
      <input id="message-input" type="text" placeholder="Type your message...">
      <button type="submit">Send</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script src="client.js"></script>
  </body>
</html>

在上面的代码中，我们创建了一个简单的 HTML 页面，其中包含一个用于显示聊天消息的列表和一个用于发送聊天消息的表单。我们还引入了 Socket.IO 库和一个名为 client.js 的 JavaScript 文件。

接下来，在您选择的目录中创建一个名为 client.js 的文件，并在该文件中编写以下代码：

// javascriptcn.com 代码示例
// 连接到服务器
const socket = io.connect('http://localhost:3000');

// 监听聊天消息
socket.on('chat message', (message) => {
  const li = document.createElement('li');
  li.textContent = message;
  document.getElementById('messages').appendChild(li);
});

// 监听表单提交事件
document.getElementById('chat-form').addEventListener('submit', (event) => {
  event.preventDefault();

  // 获取聊天消息
  const message = document.getElementById('message-input').value;

  // 发送聊天消息
  socket.emit('chat message', message);

  // 清空输入框
  document.getElementById('message-input').value = '';
});

在上面的代码中，我们首先使用 io.connect() 方法连接到服务器。然后，我们使用 socket.on() 方法监听 chat message 事件。当服务器广播一条聊天消息时，我们将在聊天窗口中显示该消息。接下来，我们使用 document.getElementById().addEventListener() 方法监听表单提交事件。当用户提交表单时，我们使用 socket.emit() 方法将聊天消息发送到服务器，并使用 document.getElementById().value 方法清空输入框。

现在，我们已经完成了客户端代码。

测试

现在，我们可以使用以下命令启动服务器：

node server.js

然后，在浏览器中打开 index.html 文件。您将看到一个简单的聊天窗口。在该窗口中，您可以输入一条聊天消息，并将其发送到服务器。服务器将广播该消息，并将其显示在所有连接到服务器的客户端的聊天窗口中。

总结

在本文中，我们介绍了如何使用 Node.js 和 Socket.IO 来构建一个小型聊天室应用程序。我们编写了服务器端和客户端代码，并演示了如何使用 Socket.IO 来实现实时双向通信。我们还提供了完整的代码示例，以帮助您更好地理解和实现这些功能。现在，您可以使用这些技术来构建更复杂的实时应用程序，如实时协作工具、实时游戏和实时通知等。

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