如何在多人游戏环境中建立撤销/重做机制

Undo/redo is a feature that is extensively used and essential in content creation software today. Building this functionality in a non‑collaborative environment is theoretically pretty straight forward, but still notoriously difficult to build. This becomes even more complex in a multiplayer world where many people can make changes in real‑time.

撤销/重做是目前内容创建软件中广泛使用的一项功能，也是必不可少的。在非协作环境中建立这种功能，理论上是非常直接的，但仍然是众所周知的困难。在一个多人游戏的世界里，这变得更加复杂，因为很多人可以实时进行修改。

But what makes developing the undo/redo feature in a collaborative environment so complex, and how can you tackle it properly?

但是，是什么让在协作环境中开发撤销/重做功能变得如此复杂，以及如何才能正确解决这个问题？

The main challenges in developing an undo/redo feature in a collaborative environment involve making undo/redo client‑specific, displaying all changes from other users in real‑time, and keeping the state of other features in the document other than just the previous contents.

在协作环境中开发撤销/重做功能的主要挑战涉及到使撤销/重做的客户端具体化，实时显示其他用户的所有修改，以及保持文档中其他功能的状态，而不仅仅是以前的内容。

Let’s dive in to how we handle multiplayer undo/redo at Liveblocks.

让我们深入了解我们在Liveblocks如何处理多人撤销/重做。

Undo/redo needs to be local to each client

撤销/重做需要在每个客户的本地进行

One of the most commonly used approaches to handle undo/redo is to save the application’s previous states and rewind through those when the user hits undo. This technique is also known as the memento pattern and has been popularized by the undo history implementation of popular state-management library Redux.

处理撤销/重做最常用的方法之一是保存应用程序以前的状态，并在用户点击撤销时倒退到这些状态。这种技术也被称为纪念品模式，并被流行的状态管理库Redux的撤销历史实现所推广。

An interactive visualization displaying a canvas and its multiple states across time.

一个交互式的可视化，显示一个画布和它在不同时间的多种状态。

In contrast to non‑collaborative situations, preserving the previous application state of that user and returning to it does not work. That is because several users can change the state of the document, and undoing may delete work done by others.

与非协作的情况相比，保留该用户以前的应用状态并返回到该状态是行不通的。这是因为几个用户可以改变文件的状态，而撤销可能会删除其他人所做的工作。

An interactive visualization displaying a canvas with two users and how rewinding...