Colyseus的room.onStateChange重复触发问题

原创已于 2024-12-29 17:12:00 修改 · 657 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #typescript #游戏程序

于 2024-12-24 21:42:28 首次发布

Colyseus 专栏收录该内容

47 篇文章

订阅专栏

一个简单的Colyseus应用的例子，服务端程序如下：

SceneRoom.ts:

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

// 定义状态
class SceneState extends Schema {
  @type("string")
  sceneId: string = "001";
}

export class SceneRoom extends Room<SceneState> {
  onCreate() {
    this.setState(new SceneState()); // 设置初始状态

    // 监听来自客户端的消息
    this.onMessage("changeScene", (client, newSceneId: string) => {
      if (this.state.sceneId !== newSceneId) {
        // 避免重复更新
        this.state.sceneId = newSceneId;
        console.log(
          `Client ${client.sessionId} changed sceneId to: ${newSceneId}`
        );
      }
    });
  }

  onJoin(client: Client) {
    console.log(`Client joined: ${client.sessionId}`);
  }

  onLeave(client: Client) {
    console.log(`Client left: ${client.sessionId}`);
  }

  onDispose() {
    console.log("Room disposed");
  }
}

设了一个状态变量sceneId: string = "001";

客户端程序ColyseusTest.vue：

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as Colyseus from 'colyseus.js';

const client = ref<Colyseus.Client | null>(null);
const room = ref<Colyseus.Room | null>(null);
const currentSceneId = ref<string>('未连接');
const newSceneId = ref<string>('');
const connectionStatus = ref<string>('未连接');

const connectToRoom = async () => {
  connectionStatus.value = '正在连接...';
  client.value = new Colyseus.Client('ws://localhost:5173/ws');

  try {
    room.value = await client.value.joinOrCreate('scene_room');
    connectionStatus.value = '已连接';

    // 初始状态同步
    currentSceneId.value = room.value.state.sceneId;

    // 使用 onStateChange 监听整个状态变化
    let lastState = JSON.stringify({});
    room.value.onStateChange((state) => {
      const currentState = JSON.stringify(state);
      if (currentState === lastState) return; // 忽略重复状态
      lastState = currentState;

      console.log('State updated:', state);
      console.log('Raw state:', JSON.stringify(state));
    });

    console.log('Connected to room:', room.value);
  } catch (error) {
    console.error('Failed to connect to room:', error);
    connectionStatus.value = '连接失败';
  }
};

const changeScene = () => {
  if (room.value) {
    room.value.send('changeScene', newSceneId.value);
    console.log('Sent new Scene ID:', newSceneId.value);
  } else {
    console.error('Room not connected');
  }
};

onMounted(() => {
  connectToRoom();
});
</script>


<template>
  <div class="colyseus-client">
    <h1>Colyseus Vue Client</h1>
    <p>
      当前场景 ID: <strong>{{ currentSceneId }}</strong>
    </p>
    <div>
      <input v-model="newSceneId" placeholder="输入新的场景 ID" type="text" />
      <button @click="changeScene">修改场景 ID</button>
    </div>
    <p v-if="connectionStatus">状态: {{ connectionStatus }}</p>
  </div>
</template>

用两个不同的浏览器分别打开了这个测试页面。其中一个浏览器页面进行了场景ID的修改，其控制台输出如下：

Connected to room: Proxy(_Room) {hasJoined: true, onStateChange: ƒ, onError: ƒ, onLeave: ƒ, onJoin: ƒ, …}
ColyseusTest.vue:29 State updated: _ {$changes: ChangeTree2, $callbacks: undefined, _sceneId: '001', onChange: ƒ}
ColyseusTest.vue:30 Raw state: {"sceneId":"001"}
ColyseusTest.vue:53 Sent new Scene ID: 002
ColyseusTest.vue:29 State updated: _ {$changes: ChangeTree2, $callbacks: undefined, _sceneId: '002', onChange: ƒ}
ColyseusTest.vue:30 Raw state: {"sceneId":"002"}
ColyseusTest.vue:29 State updated: _ {$changes: ChangeTree2, $callbacks: undefined, _sceneId: '002', onChange: ƒ}
ColyseusTest.vue:30 Raw state: {"sceneId":"002"}
ColyseusTest.vue:53 Sent new Scene ID: 003
ColyseusTest.vue:29 State updated: _ {$changes: ChangeTree2, $callbacks: undefined, _sceneId: '003', onChange: ƒ}
ColyseusTest.vue:30 Raw state: {"sceneId":"003"}
ColyseusTest.vue:29 State updated: _ {$changes: ChangeTree2, $callbacks: undefined, _sceneId: '003', onChange: ƒ}
ColyseusTest.vue:30 Raw state: {"sceneId":"003"}
ColyseusTest.vue:53 Sent new Scene ID: 004
ColyseusTest.vue:29 State updated: _ {$changes: ChangeTree2, $callbacks: undefined, _sceneId: '004', onChange: ƒ}
ColyseusTest.vue:30 Raw state: {"sceneId":"004"}
ColyseusTest.vue:29 State updated: _ {$changes: ChangeTree2, $callbacks: undefined, _sceneId: '004', onChange: ƒ}
ColyseusTest.vue:30 Raw state: {"sceneId":"004"}

服务器输出如下：

node-1   | Client joined: 9N5h-irJg
node-1   | Client joined: soEPwRQay
node-1   | Client soEPwRQay changed sceneId to: 002
node-1   | Client soEPwRQay changed sceneId to: 003
node-1   | Client soEPwRQay changed sceneId to: 004

另外一个客户端控制台输出如下：

Connected to room: 
Proxy { <target>: {…}, <handler>: {…} }
ColyseusTest.vue:43:12
State updated: 
Object { sceneId: Getter & Setter, onChange: onChange(changes)
, … }
ColyseusTest.vue:29:14
Raw state: {"sceneId":"001"} ColyseusTest.vue:30:14
State updated: 
Object { sceneId: Getter & Setter, onChange: onChange(changes)
, … }
ColyseusTest.vue:29:14
Raw state: {"sceneId":"002"} ColyseusTest.vue:30:14
State updated: 
Object { sceneId: Getter & Setter, onChange: onChange(changes)
, … }
ColyseusTest.vue:29:14
Raw state: {"sceneId":"002"} ColyseusTest.vue:30:14
State updated: 
Object { sceneId: Getter & Setter, onChange: onChange(changes)
, … }
ColyseusTest.vue:29:14
Raw state: {"sceneId":"003"} ColyseusTest.vue:30:14
State updated: 
Object { sceneId: Getter & Setter, onChange: onChange(changes)
, … }
ColyseusTest.vue:29:14
Raw state: {"sceneId":"003"} ColyseusTest.vue:30:14
State updated: 
Object { sceneId: Getter & Setter, onChange: onChange(changes)
, … }
ColyseusTest.vue:29:14
Raw state: {"sceneId":"004"} ColyseusTest.vue:30:14
State updated: 
Object { sceneId: Getter & Setter, onChange: onChange(changes)
, … }
ColyseusTest.vue:29:14
Raw state: {"sceneId":"004"}

由上述输出可见，每次修改sceneId, 函数onStateChange都被触发了两次。

我猜测这可能是Colyseus 的“增量补丁”多次触发 onStateChange。

解决方案是采用字段级的更新监听。通常情况下，Colyseus 的 onChange / listen API 可以实现更轻量级、局部性的更新监听（只在真正有变更的字段时处理），也就不会出现多次全量触发的问题。
具体到这个例子里，就是直接监听sceneId，就不会重复触发了：

    // 使用字段级别的监听
    room.value.state.listen('sceneId', (newValue, oldValue) => {
      currentSceneId.value = newValue
      console.log('Scene ID changed from', oldValue, 'to', newValue)
    })

总之，序列化整个 State 对象在 State 比较庞大时可能会有性能开销。使用更“精确监听”方式，能够提高性能且不会出现重复触发的情况。