使用React创建一个100K多人平铺游戏

Mat*_*ieu 0 javascript firebase reactjs reactjs-flux

我正在学习React.

我想创建一个带有基本图块板的游戏​​(比如http://richard.to/projects/beersweeper/,但是图块可以有两种状态('可用'或'已经点击').

在速度方面,React看起来很有趣,因为它的虚拟DOM /差异,我只能调整已点击的瓷砖内的css和文字(这样它们在视觉上会有所不同,而不是任何人都没有点击过的).

我的目标(以及个人挑战哈哈)是让这个游戏可以玩1000个同时玩家,他们可以在10万个瓷砖板上点击他们想要的地方.(在客户中实时分配瓷砖状态将通过Firebase完成)

我应该使用基本的标准React及其内置功能(onclick事件,ts听众......)还是只有-React才能在100K磁贴上实现1000个人的许多事件/监听器实时与任何用户能够点击任何地方(在可用的瓷砖上)?

我应该使用替代/补充工具和技术,如画布,React Art,GPU加速,webgl,纹理图册......?

Bri*_*and 5

WebGL是正确的答案.使用起来也很复杂.

但是根据瓷砖的大小,React可以工作,但无论你怎么做,你都无法正常渲染100k dom节点.相反,您需要渲染用户可见的图块子集.

要取消这样的东西,你需要有很多优化的代码,而firebase很可能不会达到标准.我推荐一个基于websockets的二进制协议和一个有意义的数据库(快速查找多个数字索引范围和订阅).

最终,我可能会选择:

  • webgl(比较three.js和pixi.js)
  • golang中的自定义数据服务器(由maria或aws的极光等mysql引擎管理的持久性/回退)
  • 用golang编写的websocket服务器
  • websockets(没有包装库,二进制协议)

对于websocket服务器,golang over node.js的唯一原因是CPU性能,这意味着更低的延迟和每台服务器更多的客户端.它们对网络方面的表现大致相同.

你可能会忽略大部分内容,但是要明白如果你确实遇到了性能问题,那么为这些部分切换一些部分会有所帮助.

做一个处理2个并发用户和1000个磁贴的原型,并从那里开始.按优先顺序排列:

  1. 不渲染100k dom节点!
  2. webgl而不是dom
  3. 二进制websocket协议,在socket.io或类似的(不是firebase)
  4. go中的自定义数据服务器
  5. 不使用socket.io的二进制websocket协议(例如节点中的ws包)
  6. 在去的websocket服务器(不是那么重要,也许永远不会)