Colyseus 的高效状态同步与增量更新

原创已于 2024-12-29 17:11:37 修改 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#游戏引擎 #node.js #typescript #javascript

于 2024-12-24 09:24:58 首次发布

Colyseus 专栏收录该内容

47 篇文章

订阅专栏

部署运行你感兴趣的模型镜像

在多人在线游戏和实时应用中，状态同步是一个核心挑战。Colyseus 通过独特的增量更新机制，显著提高了状态同步的效率。以下是详细的讲解：

1. 什么是增量更新？

完整状态同步：传统方式是每次状态改变后，服务器将完整的状态数据发送给所有客户端。这种方法简单但低效，尤其在状态数据庞大、变化频繁时，会浪费大量带宽和处理时间。
增量更新：Colyseus 的增量更新机制只会将状态的变化部分（delta）发送给客户端。客户端接收到这些变化后，应用到本地的状态镜像中，从而实现同步。

通过这种方式：

减少传输数据量：只有变化的字段会被传输。
提高传输效率：使用二进制格式（紧凑、高效）。
降低延迟：减小了网络传输时间和客户端解析时间。

2. 增量更新的底层原理

Colyseus 的增量更新基于以下关键机制：

(1) 状态的序列化和反序列化

在服务端，Schema 状态会被序列化成一个紧凑的二进制格式。
通过比较当前状态和之前状态的差异，生成变化部分的序列化结果（增量数据）。
在客户端，接收到的二进制增量数据会被反序列化并应用到本地的状态镜像中。

(2) 状态变化的追踪

每个 Schema 对象会维护一个“字段版本”（Field Version）或类似的机制。
当字段值发生改变时，Colyseus 会记录这个字段需要同步。
通过遍历整个状态对象，自动检测哪些字段改变了。

(3) FossilDelta 算法

Colyseus 使用一种高效的算法（例如 FossilDelta 或自定义算法）来计算状态变化。
该算法将前一个状态与当前状态进行对比，提取变化部分，并将其打包成增量数据。

(4) 二进制传输

增量更新会被序列化为二进制格式，这种格式非常紧凑，相比 JSON 等文本格式可以显著减少数据大小。
这种序列化使用位标记（bit flags）等技术来表示字段的存在与否，进一步优化传输效率。

3. 增量更新的过程

以下是增量更新的典型过程：

(1) 服务器端

定义状态：开发者在服务器端使用 Schema 定义房间的状态。
修改状态：在房间逻辑中，通过修改 this.state 来更新状态。
生成增量：Colyseus 自动检测状态变化并计算增量（delta）。
发送增量：增量数据以二进制形式广播到所有客户端。

(2) 客户端

初始化状态：客户端在连接房间时会接收完整的初始状态。
接收增量：在状态改变时，客户端接收服务器发送的增量数据。
应用增量：增量数据被反序列化并应用到本地状态镜像中。

4. 示例代码

以下是一个完整的状态同步增量更新示例：

服务器端：

import { Room, Client } from "colyseus";
import { Schema, type } from "@colyseus/schema";

class Player extends Schema {
  @type("string") name: string;
  @type("number") x: number;
  @type("number") y: number;
}

class GameState extends Schema {
  @type({ map: Player }) players = new Map<string, Player>();
}

export class MyRoom extends Room<GameState> {
  onCreate() {
    this.setState(new GameState());
  }

  onJoin(client: Client) {
    const player = new Player();
    player.name = `Player ${client.sessionId}`;
    player.x = 0;
    player.y = 0;

    this.state.players.set(client.sessionId, player);
  }

  onMessage(client: Client, message: any) {
    const player = this.state.players.get(client.sessionId);
    if (message.type === "move") {
      player.x += message.x;
      player.y += message.y;
    }
  }

  onLeave(client: Client) {
    this.state.players.delete(client.sessionId);
  }
}

客户端：

import { Client, Room } from "colyseus.js";

// 创建客户端连接
const client = new Client("ws://localhost:2567");
const room = await client.joinOrCreate("my_room");

// 接收完整的初始状态
room.state.players.onAdd = (player, sessionId) => {
  console.log(`Player ${sessionId} joined!`);
};

// 增量更新：监听属性变化
room.state.players.onChange = (player, sessionId) => {
  console.log(`Player ${sessionId} moved to (${player.x}, ${player.y})`);
};

// 发送消息修改状态
room.send("move", { x: 1, y: 0 });