如何使用 Socket.io 构建实时 Web 应用程序

Socket.io 是一个 JavaScript 库，允许 Web 客户端和服务器之间进行实时双向通信。它是创建聊天应用程序、协作白板、多人游戏等实时 Web 应用程序的热门选择。

在本文中，我们将介绍 Socket.io 的基础入门知识，从设置基本服务器到在客户端和服务器之间发送消息的所有内容。

前提条件

在深入学习 Socket.io 之前，我们需要了解一些前提条件：

JavaScript 知识： Socket.io 是一个 JavaScript 库，因此您应该对该语言有基本的了解。
Node.js 和 npm：Socket.io 是为与 Node.js 协同工作而设计的，因此您的电脑上需要安装 Node.js 和 npm（Node 包管理器）。
代码编辑器：您需要一个代码编辑器来编写 Socket.io 代码。有很多选择，包括 Visual Studio Code、Sublime Text 和 Atom。

具备这些条件后，你就可以开始使用 Socket.io了。

安装 Socket.io

要使用 Socket.io，我们首先需要安装它。打开终端窗口，导航到要创建项目的目录。

然后，运行以下命令创建一个新的 Node.js 项目：

npm init

该命令将提示您输入有关项目的一些信息，如名称、版本、描述和作者。大部分字段可以留空，按回车键接受默认值即可。

项目初始化后，我们可以运行以下命令安装 Socket.io：

npm install socket.io

这将在 node_modules 目录中安装 Socket.io 及其所有依赖项。

创建 Socket.io 服务器

现在我们已经安装了 Socket.io，让我们来创建一个简单的服务器来监听客户端的连接。创建一个名为 server.js 的新文件，并添加以下代码：

const io = require('socket.io')(3000);

io.on('connection', (socket) => {
  console.log('A user connected');
});

让我们来分析一下这段代码的作用：

我们首先导入 socket.io 库，并在端口 3000 上对其进行初始化。
我们为 connection 事件添加一个事件监听器。每当客户端连接到服务器时，就会触发该事件。
在事件监听器中，我们向控制台记录一条消息，表明用户已连接。

就是这样！只需几行代码，我们就创建了一个基本的 Socket.io 服务器。

从客户端连接服务器

现在我们已经运行了服务器，让我们从客户端连接到服务器。新建一个名为 index.html 的文件，并添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.io Test</title>
  </head>
  <body>
    <h1>Socket.io Test</h1>
    <script src="https://cdn.socket.io/4.2.0/socket.io.min.js"></script>
    <script>
      const socket = io('http://localhost:3000');
      socket.on('connect', () => {
        console.log('Connected to server');
      });
    </script>
  </body>
</html>

下面是这段代码的作用：

首先，在 HTML 文件中包含 socket.io 库。
创建一个新socket对象并将其连接到运行在http://localhost:3000.
我们为connect事件添加一个事件监听器，当套接字成功连接到服务器时，该事件就会触发。在事件监听器中，我们向控制台记录一条信息，表明我们已连接到服务器。
现在，如果你在浏览器中打开 index.html，并打开开发人员控制台，就会看到一条信息，表明你已连接到服务器。

在客户端和服务器之间发送消息

现在我们已经在客户端和服务器之间建立了连接，让我们在它们之间发送一些信息。修改 server.js 文件如下所示：

const io = require('socket.io')(3000);

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('message', (message) => {
    console.log(`Received message: ${message}`);
    socket.emit('message', `You sent: ${message}`);
  });
});

以下是我们所做的更改：

我们为message事件添加了一个事件侦听器。每当客户端向服务器发送消息时就会触发此事件。
在事件侦听器内，我们将消息记录到控制台，然后将响应消息发送回客户端。

接下来，修改index.html文件，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.io Test</title>
  </head>
  <body>
    <h1>Socket.io Test</h1>
    <input type="text" id="messageInput" placeholder="Type your message here">
    <button id="sendButton">Send</button>
    <ul id="messageList"></ul>
    <script src="https://cdn.socket.io/4.2.0/socket.io.min.js"></script>
    <script>
      const socket = io('http://localhost:3000');
      socket.on('connect', () => {
        console.log('Connected to server');
      });

      const messageInput = document.getElementById('messageInput');
      const sendButton = document.getElementById('sendButton');
      const messageList = document.getElementById('messageList');

      sendButton.addEventListener('click', () => {
        const message = messageInput.value;
        socket.emit('message', message);
      });

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

以下是我们所做的更改：

添加了一个输入字段和一个按钮，以允许用户向服务器发送消息。
添加了一个ul元素来显示从服务器收到的消息。
向发送按钮添加了一个事件侦听器，单击该按钮时，该按钮会将在输入字段中键入的消息发送到服务器。
为message事件添加了一个事件侦听器。每当服务器将消息发送回客户端时，就会触发此事件。在事件侦听器内，我们创建一个li包含消息文本的新元素并将其附加到ul元素。

现在，如果在浏览器中打开 index.html，就可以在输入框中输入信息，并看到它们出现在下面的列表中。收到消息时，服务器也会将消息记录到控制台。