热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《使用React创建一个100K多人平铺游戏》经验,为你挑选了1个好方法。

我正在学习React.

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

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

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

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

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



1> Brigand..:

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个磁贴的原型,并从那里开始.按优先顺序排列:

    不渲染100k dom节点!

    webgl而不是dom

    二进制websocket协议,在socket.io或类似的(不是firebase)

    go中的自定义数据服务器

    不使用socket.io的二进制websocket协议(例如节点中的ws包)

    在去的websocket服务器(不是那么重要,也许永远不会)


推荐阅读
  • 本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 一、Hadoop来历Hadoop的思想来源于Google在做搜索引擎的时候出现一个很大的问题就是这么多网页我如何才能以最快的速度来搜索到,由于这个问题Google发明 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • PHP设置MySQL字符集的方法及使用mysqli_set_charset函数
    本文介绍了PHP设置MySQL字符集的方法,详细介绍了使用mysqli_set_charset函数来规定与数据库服务器进行数据传送时要使用的字符集。通过示例代码演示了如何设置默认客户端字符集。 ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 本文详细介绍了MysqlDump和mysqldump进行全库备份的相关知识,包括备份命令的使用方法、my.cnf配置文件的设置、binlog日志的位置指定、增量恢复的方式以及适用于innodb引擎和myisam引擎的备份方法。对于需要进行数据库备份的用户来说,本文提供了一些有价值的参考内容。 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • Tomcat/Jetty为何选择扩展线程池而不是使用JDK原生线程池?
    本文探讨了Tomcat和Jetty选择扩展线程池而不是使用JDK原生线程池的原因。通过比较IO密集型任务和CPU密集型任务的特点,解释了为何Tomcat和Jetty需要扩展线程池来提高并发度和任务处理速度。同时,介绍了JDK原生线程池的工作流程。 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
author-avatar
爱在逃离
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有