我最近基于Reddit的原生应用平台Devvit开发了一个实时协作的小图像画布游戏，想和其他开发者在开发该平台时分享一些相关技术知识。

**我构建的东西:**Pixel 战争：Sub 版本——简而言之，是对子版块限定的r / Place。玩家在共享64x64画布上放置颜色的小图像，并且会有冷却期系统、排行榜和实时更新。

**技术堆栈:**

- Devvit（React + Hono + Redis）

- Tailwind CSS用于UI

- Redis用于画布状态、冷却期和排行榜

- Devvit的实时订阅/发布接口用于直播小图像更新

**关键教训的总结:**

  1. **Devvit 的 Redissurprisingly 能力很强大** — 将64x64 格网储存在 Redis hash 中，使用像素坐标作为键，效果很好。读取速度快，可以很便宜地扫描整个画布。

  2. **大规模实时同步很难** — Devvit 的实时通路有极限。我们批量更新小图像，以避免洪水式地订阅者，然后在重新连接时轻松放弃通路。

  3. **要为冷却期配置 server-side** — 我们在 Hono 服务器处理器中强制实施冷却期，而不是在客户端。客户端的冷却期只是用户界面，真正的门槛是 Redis 中的后端检查。

  4. **在 Reddit 文章中渲染画布图像** — 我们将小图像渲染为在一个可滚动和缩放的容器中的div。SVG 对4096个元素太慢了。使用 CSS Grid 的绝对定位表现得更加出色。

  5. **Android 移动设备触摸事件处理** — 需要自定义触摸事件处理：滚动到放大和移动。Reddit 的 Webview iframe 原生触摸事件并没有被全部转发。

不禁感到高兴地在Devvit上构建游戏——这是一种低调的平台，有着上亿数量的受众。