Используйте React для создания многопользовательской тайловой игры на 100 тыс.

Я изучаю Реакт.

Я хочу создать игру с простой плиткой (как здесь http://richard.to/projects/beersweeper/, но плитки могут иметь два состояния («доступно» или «уже нажато»).

С точки зрения скорости React выглядит интересно, так как с его виртуальным DOM/diffs я мог только настроить css и текст внутри плиток, по которым кликнули (чтобы они визуально отличались от тех, которые еще никто не нажимал).

Моя цель (и личная задача, ха-ха) состоит в том, чтобы в эту игру могли играть 1000 одновременных игроков, которые могли бы щелкать в любом месте на доске из 100 000 плиток (распределение статуса плитки между клиентами в режиме реального времени будет сделано с помощью Firebase)

Должен ли я использовать базовый стандартный React и его встроенные функции (события onclick, прослушиватели ts...) или с помощью only-React невозможно включить такое количество событий/слушателей для 1000 человек на плитках 100K в режиме реального времени с любым пользователем? можно щелкнуть в любом месте (на доступных плитках)?

Должен ли я использовать альтернативные/дополняющие инструменты и методы, такие как холст, React Art, ускорение графического процессора, webgl, атласы текстур....?


reactjs firebase javascript reactjs-flux
person Mathieu    schedule 22.03.2015    source источник
comment
Возможно, вы захотите сначала реализовать его. Ориентир. Сделайте некоторые расчеты. Посмотрите, сможет ли он выдержать 100 тыс. (теоретически). Затем вы находите узкие места, исправляете, корректируете, находите альтернативы для улучшения определенных частей.   -  person majidarif    schedule 22.03.2015
comment
@majidarif да, спасибо, я знаю, но, поскольку я новичок и учусь, время, необходимое для внесения структурных изменений, будет для меня большим. Я бы предпочел спросить здесь, в каком направлении двигаться, даже если мне придется изменить его   -  person Mathieu    schedule 22.03.2015

Ответы (2)


arrow_upward
5
arrow_downward

WebGL - правильный ответ. С ним тоже довольно сложно работать.

Но в зависимости от размера плиток React может работать, но вы не сможете эффективно отображать 100 000 узлов dom... независимо от того, как вы это делаете. Вместо этого вам нужно отобразить подмножество плиток, видимых пользователю.

Чтобы сделать что-то подобное, вам понадобится много оптимизированного кода, и firebase, скорее всего, не будет на должном уровне. Я бы рекомендовал двоичный протокол через веб-сокеты и базу данных, которая имеет смысл (быстрый поиск по нескольким диапазонам числовых индексов и подписки).

В конечном счете, я бы, вероятно, пошел с:

  • webgl (сравните three.js и pixi.js)
  • настраиваемый сервер данных в golang (с постоянством/откатом, управляемым движком mysql, таким как maria или aws aurora)
  • сервер websocket, написанный на golang
  • веб-сокеты (без библиотеки-оболочки, бинарный протокол)

Единственной причиной использования golang вместо node.js для сервера веб-сокетов является производительность процессора, что означает меньшую задержку и большее количество клиентов на сервер. Они работают примерно одинаково для сетевого аспекта.

Вы, вероятно, проигнорируете большую часть этого, но просто поймите, что если у вас есть проблемы с производительностью, замена некоторых частей для них поможет.

Сделайте прототип, который обрабатывает 2 одновременных пользователей и 1000 плиток, и продолжайте. В порядке приоритета:

  1. не визуализируйте 100k узлов dom!
  2. webgl вместо dom
  3. бинарный протокол websocket, через socket.io или аналогичный (не firebase)
  4. пользовательский сервер данных в ходу
  5. бинарный протокол websocket, не использующий socket.io (например, пакет ws в узле)
  6. сервер веб-сокетов в работе (не так уж важно, может быть, никогда)
person Brigand    schedule 22.03.2015
comment
Спасибо, это чертовски полезно! это правда, что я могу не реализовать все это, но вы открыли очень привлекательные направления. pb с golang заключается в том, что мне придется выучить этот язык (конечно, слышал об этом). Вторая проблема: я не могу использовать регионы (их использует Minecraft), как вы предлагаете, то есть я хочу, чтобы игроки видели все 100 000 плиток (даже если им придется увеличивать масштаб, чтобы найти их), я не могу своего рода гигантская карта и отображает только 2K узлов, а остальные загружаются только тогда, когда люди прокручивают ее. так что я должен найти способ поддерживать от 50k до 100k DIRECT. - person Mathieu; 22.03.2015
comment
Кроме того, как вы думаете, почему серверные службы баз данных, такие как firebase.com или realtime.co, который утверждает, что обеспечивает сохранение реального времени среди тысяч одновременных клиентов, не подходит. слишком много игроков делают слишком много вещей? - person Mathieu; 22.03.2015
comment
если я использую webgl, мне придется игнорировать многих людей, поскольку webgl плохо поддерживается, особенно в Internet Explorer, Firefox (частичная поддержка) и Opera Mini (caniuse.com/#feat=webgl) - person Mathieu; 22.03.2015
comment
наконец, если бы вам пришлось сделать дикое предположение, до скольких узлов (тайлов) dom, по вашему мнению, React будет производительным (1K?10K?50K). трудно, может быть, узнать без тестирования :) - person Mathieu; 22.03.2015
comment
Тогда DOM не является ответом. Два оставшихся варианта — WebGL или Canvas. WebGL более сложен, но, по крайней мере, справится с логикой рендеринга и оптимизации за вас. С холстом вы будете работать с одномерным массивом байтов (4 байта = 1 пиксель). firebase и т. д. отлично подходят, когда вам нужно, чтобы несколько пользователей работали над документом или чем-то подобным, и они хорошо масштабируются для небольших групп пользователей, а не для одной большой группы пользователей с большим количеством данных и изменений. Поддержка WebGL ограничена, но у three и pixi есть запасные варианты Canvas, что дает вам довольно хорошую поддержку. - person Brigand; 22.03.2015
comment
Это зависит от вашего определения производительности, но React не оптимизирован для такой работы, он оптимизирован для сложных приложений (например, вы можете использовать его для системы инвентаря RPG, или меню, или внутриигрового магазина и т. д. ). Если вы создаете плитки в простом DOM, оптимизированном вручную, вы можете иметь (примерно) 2k плиток и делать до 50 обновлений на кадр, чтобы оставаться на скорости 60 кадров в секунду на быстрых компьютерах и 20 кадров в секунду на средних компьютерах. Есть больше факторов, чем я могу здесь описать, и я не проверял это. - person Brigand; 22.03.2015
comment
Если я использую webGl, я полагаю, что React вне комнаты? Реакция, насколько я понимаю, использует DOM (с его виртуальным DOM). Существуют ли какие-либо фреймворки/структурированные шаблоны для подключения моих серверных данных (Rails или Go) к WebGL? Мне понравилась продуманная/организованная структура, которая была бы у меня с View в React и M (модель) и C (контроллер) r в Rails. - person Mathieu; 22.03.2015
comment
Я нашел несколько библиотек с Reacts.js и с использованием three.js, поэтому кажется, что можно использовать оба: github.com/Izzimach/react-three. Будет ли React действительно полезен, если я буду использовать webGL для отображения 100 000 узлов? - person Mathieu; 22.03.2015
comment
Я не эксперт по базам данных: я использую postgresql и знаю концепции nosql (mongo, redis...). Вы предлагаете пользовательский сервер данных в golang (с сохранением/откатом, управляемым сиянием aws). Хорошо, могу ли я хранить эти данные в postgresql или redis, используя язык Ruby для доступа к ним. Или это действительно должно быть в golang? Не могли бы вы поделиться, почему? - person Mathieu; 22.03.2015

arrow_upward
3
arrow_downward

Многие люди используют React в качестве V в MVC.

Я считаю, что react подходит для UI, но вы должны спросить себя, какой будет логика на стороне сервера, вам все еще нужно подумать о M и C

Если вы ищете 1000 одновременных пользователей, ключевое слово scalable будет вашим другом.

Также вам следует проверить Node.js для службы на стороне сервера. Express.js за быструю реализацию и, наконец, Pomelo.js, который представляет собой js реализацию игрового сервера, основанную на node.js

Что касается производительности... WebGL, скорее всего, повысит вашу производительность. Здесь вы можете получить хороший учебник по теме: https://github.com/alexmackey/IntroToWebGLWithThreeJS

Если вы хотите собрать его вообще без GL языков, вам следует копнуть глубже JavaScript и создать свою собственную pseudo-class библиотеку с динамическим data bindings. В противном случае вы можете в конечном итоге использовать небольшой процент мощного фреймворка, который только замедлит работу вашего API.

Я бы воздержался от использования canvas, так как они хороши для визуализации model, а не игры front-end. Загляните на d3.js, чтобы убедиться в его превосходности и, к сожалению, проблемах с производительностью.

Здесь я написал хорошую скрипту, которая создает матрицу 100x100 при наведении, и производительность не очень хорошая. Вы можете легко настроить его, чтобы получить матрицу из 100 000 элементов: /

РЕДАКТИРОВАТЬ: WebGL - единственное разумное решение.

person Piotr Dajlido    schedule 22.03.2015
comment
спасибо за Ваш ответ. что касается только V, я буду использовать Rails (у меня уже есть приложение в rails) в качестве json API, который передает данные в json в представление Reatc (например: fancypixel.github.io/blog/2015/01/28/) - person Mathieu; 22.03.2015
comment
как новичок, чтобы управлять данными и распределять данные среди клиентов в режиме реального времени и включать многопользовательские игры, я буду использовать firebase и не буду слишком много делать Node/express... - person Mathieu; 22.03.2015
comment
проблема с webGL заключается в том, что он плохо поддерживается, особенно в Internet Explorer, Firefox (частичная поддержка) и Opera Mini (caniuse.com/#feat=webgl) - person Mathieu; 22.03.2015
comment
@Mathieu, было бы неплохо, если бы вы могли воспроизвести генерацию моего поля скрипки для выполнения той же задачи с помощью React.js (jsfiddle поддерживает react.js). Мы могли бы увидеть, есть ли значительная разница в производительности. - person Piotr Dajlido; 22.03.2015
comment
я сделаю, но это может занять как минимум несколько недель, я должен сначала изучить больше javascript и React, никогда даже не касался этих языков и фреймворков (исходя из Ruby и Rails). Сделаю после точно. - person Mathieu; 22.03.2015