使用 Colyseus 构建多人实时白板应用

最新推荐文章于 2025-01-04 08:00:00 发布

原创

最新推荐文章于 2025-01-04 08:00:00 发布 · 1.2k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #游戏程序 #typescript #游戏引擎 #javascript #后端 #前端

使用 Colyseus 构建多人实时白板应用

使用 Colyseus 构建多人实时白板应用涉及以下几个关键步骤：设置服务器、设计房间逻辑、同步客户端状态以及实现前端交互。以下是详细的实现流程：

0. 示例白板功能

基础功能

实时绘制同步：
- 用户在白板上绘制时，其绘制的点会立即显示在自己的白板上，并通过 WebSocket 发送到服务器。
- 服务器接收到绘制的点后，会广播给房间内的其他用户，实现多人实时绘制同步。
新用户状态同步：
- 当新用户加入房间时，服务器会将当前白板上的已有绘制数据（lines）发送给新用户。
- 新用户可以立即看到白板上的现有内容，并从当前状态继续绘制。
简单的绘制功能：
- 用户可以通过鼠标点击并拖动在白板上绘制线条。
- 每次鼠标移动时，绘制的数据点（坐标）会记录并同步到服务器。

1. 环境准备

安装 Node.js 和 Colyseus。
使用 npm 初始化项目并安装 Colyseus 和相关依赖：
```
npm init -y
npm install colyseus express
```

2. 设计 Colyseus 房间逻辑

2.1 创建服务器

创建 index.js 文件，初始化服务器：

const express = require("express");
const {
     
      Server } = require("colyseus");
const {
     
      createServer } = require("http");
const {
     
      WhiteboardRoom } = require("./WhiteboardRoom");

const app = express();
const httpServer = createServer(app);
const gameServer = new Server({
     
      server: httpServer });

// 注册房间
gameServer.define("whiteboard", WhiteboardRoom);

// 启动服务器
const PORT = 3000;
httpServer.listen(PORT, () => {
     
     
  console.log(\`Server is running on http://localhost:\${
     
     PORT}\`);
});