构建 Todo List：使用 Socket.io 实现实时协作

2023-11-18 10:07:14

协同编辑 Todo List：Socket.io 入门
在构建 Todo List 项目时，你可能希望多个用户可以同时查看和编辑列表中的任务。要实现此功能，我们需要使用能够在客户端和服务器之间实现实时通信的技术。其中一种最受欢迎的选择是 Socket.io。

Socket.io 是一个开源库，它允许你通过 WebSocket 来实现双向的实时通信。这意味着客户端和服务器可以持续不断地相互发送消息，即使页面在后台运行或网络连接不稳定时也是如此。

设置 Socket.io

要开始使用 Socket.io，我们需要在我们的项目中安装它。你可以使用以下命令通过 npm 进行安装：

npm install socket.io

接下来，我们需要在服务器和客户端代码中分别创建 Socket.io 实例。在服务器端，我们将在 Express 应用程序中执行此操作：

const express = require("express");
const socketIO = require("socket.io");

const app = express();
const server = app.listen(3000);
const io = socketIO(server);

io.on("connection", (socket) => {
  console.log("用户已连接！");
});

在客户端，我们将在 HTML 中包含 Socket.io 库并使用它来连接到服务器：

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

  socket.on("connect", () => {
    console.log("已连接到服务器！");
  });
</script>

现在，客户端和服务器可以相互通信。

实时更新列表

为了在客户端之间实时更新 Todo 列表，我们需要实现一个事件处理程序。在我们的示例中，我们将监听名为 "update-list" 的事件：

io.on("connection", (socket) => {
  socket.on("update-list", (list) => {
    io.emit("update-list", list);
  });
});

在客户端，我们将在更新列表时向服务器发送一个 "update-list" 事件：

const socket = io();

socket.on("connect", () => {
  socket.on("update-list", (list) => {
    // 更新本地列表并重新绘制 UI
  });

  socket.emit("update-list", localList);
});

这样，每当用户更新列表时，服务器都会将更新发送到所有连接的客户端，从而使其他用户能够实时看到更改。