В этой статье я собираюсь показать вам, как взять простую однопользовательскую веб-игру и использовать GatherAct API, чтобы легко превратить ее в многопользовательскую совместную игру в реальном времени. Что такого интересного в GatherAct API, так это то, что вы можете использовать его, чтобы сделать любой простой (или сложный) веб-сайт совместным в режиме реального времени с помощью всего пары строк кода.

Эта статья в конечном итоге сгенерирует код, доступный в этом репозитории GitHub, если вы хотите подыграть:

https://github.com/gatheract/word_scramble_demo

Одиночная игра

Позвольте мне начать с простой игры по расшифровке слов, которую я написал. Чтобы демонстрация была легкой для понимания, я сделал ее простой. Для этого требуется всего около 50 строк кода JavaScript. Вот как это работает: игроку предоставляется набор зашифрованных букв в нижней части экрана. Затем они перетаскивают буквы в поле в центре и меняют их порядок, чтобы получилось слово. Если слово написано правильно, цвет фона меняется на зеленый. Затем они могут попробовать новое слово, нажав кнопку обновления в правом верхнем углу.

Чтобы максимально упростить код, я использую Vue JavaScript Framework и Vue.Draggable, которые выполняют перетаскивание и управление состоянием за меня. Итак, вот как в итоге выглядит код:

Совместная работа в режиме реального времени

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

  • Когда игрок меняет какое-либо слово (угадай или перепутал буквы), нам нужно отправить сообщение другим игрокам с новым состоянием. Это включает в себя изменение слова, нажав кнопку нового слова в правом верхнем углу.
  • Когда игрок получает сообщение с новым состоянием, нам нужно обновить внутреннее состояние этого игрока и отобразить новые данные.

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

К счастью, VueJS (или любой другой реактивный фреймворк) упрощает интеграцию этой функциональности. Нам просто нужен триггер для отправки состояния (или, по крайней мере, интересующей нас части) и триггер для реакции на загрузку нового состояния. В этом примере я подключился к событию Vue.Draggable @end, чтобы узнать, когда пользователь закончил перетаскивание буквы, а также к функции refresh(), которая вызывается, когда игрок нажимает «новое слово». кнопка, которая генерирует новое зашифрованное слово. Чтобы отреагировать на получение нового состояния, нам практически ничего не нужно делать. Нам просто нужно обновить переменную состояния любыми новыми письмами, отправленными другим пользователем, и Vue позаботится об их отображении для нас.

Обратите внимание, что мы добавили новую функцию с именем sendGuess(), которая вызывает gatheract.sendMessage(). sendMessage — это основная функция GatherAct API, которая упрощает отправку сообщений другим пользователям канала. Подробнее об этом в следующем разделе.

Настройка GatherAct API

Теперь, когда у нас есть предварительные условия, давайте на самом деле проделаем магию, которая отправит эти сообщения для нас. Во-первых, давайте взглянем на документацию по GatherAct API на https://gatheract.com/docs/realtime#sample_app. В этом примере показаны две основные функции API: отправка сообщений другим пользователям и получение сообщений (как от других пользователей, так и общих сообщений канала).

Отправка сообщений

С помощью GatherAct API можно отправлять сообщения двух типов: широковещательные сообщения и направленные сообщения. Широковещательные сообщения отправляются каждому пользователю в канале, а направленные пользователи отправляются определенным пользователям в канале. Сообщения отправляются вызовом API:

collectact.sendMesssage (сообщение, пользователи []?)

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

Получение сообщений

Существует несколько типов сообщений, которые может получать пользователь:

  • Когда текущий пользователь подключился к каналу
  • Когда текущий пользователь отключился от канала
  • Когда на канал добавляется другой пользователь
  • Когда другой пользователь удаляется с канала
  • Когда сообщение отправляется от другого пользователя текущему пользователю

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

Ниже вы можете видеть, что код для этого довольно прост. Мы просто смотрим, было ли событие для newUser и являемся ли мы хостом (gatheract.isHost). Причина, по которой нам нужно проверять, являемся ли мы хостом, заключается в том, что мы не хотим, чтобы каждый пользователь на канале видел нового пользователя и одновременно транслировал состояние.

Так как же GatherAct определяет, кто является хостом? В дальнейшем ведущим может стать конкретный человек, т.е. учитель или человек, сгенерировавший канал. Сегодня хост — это просто первый пользователь, присоединившийся к каналу. Кроме того, GatherAct достаточно умен, чтобы отправлять события, когда хост покидает канал, и автоматически назначать новый хост, чтобы приложение могло продолжать работать, когда хост покидает канал.

Наконец, у нас есть событие appMessage. В нашем случае мы знаем, что в этом приложении отправляется только один тип сообщений. Если бы было несколько типов сообщений, было бы разумно иметь вспомогательную функцию, которая может проверять тип сообщения, прежде чем предпринимать какие-либо действия. Здесь мы проверяем, является ли тип «предположением», а затем переназначаем состояние на основе полученного сообщения.

Тестирование приложения

Теперь, когда у нас есть это приложение, давайте попробуем запустить его. Самое классное в GatherAct то, что он не требует сервера. Вы можете буквально разрабатывать приложение прямо в любом веб-браузере, не устанавливая никакого другого программного обеспечения. Вот процедура:

  1. Откройте файл index.html в новой вкладке веб-браузера.
  2. Убедитесь, что приложение работает с одним пользователем
  3. В любой момент откройте index.html в другой вкладке веб-браузера.
  4. GatherAct автоматически соединит две страницы и начнет отправлять сообщения.

Глядя на инструменты разработчика веб-браузера, вы сможете увидеть, как GatherAct автоматически соединяет две вкладки и отправляет сообщения между ними. Взгляните на вкладку сети, чтобы увидеть сообщения:

Чтобы узнать больше об API GatherAct и его текущем состоянии, вы можете ввести «gatheract» в консоли JavaScript веб-браузера:

Подключение реальных пользователей к реальному каналу

Теперь, когда мы разработали и отладили приложение, мы готовы запустить его для реальных пользователей. Самый простой способ сделать это — опубликовать приложение на торговой площадке GatherAct. После публикации приложения пользователи могут получить к нему доступ через GatherAct Lab. Это позволяет пользователям использовать приложение в режиме реального времени через Интернет вместо двух фальшивых пользователей на вашем персональном компьютере.

Вот как это делается:

  • Создайте учетную запись и войдите на GatherAct.com
  • Нажмите «Панель управления» → «Новый модуль».

  • Дайте вам имя приложения, описание и изображения, если хотите. Но самое главное, дайте ему URL-адрес запуска, который является веб-адресом, по которому обслуживается ваше приложение. Если у вас нет сервера, вы можете попробовать использовать netlify.com совершенно бесплатно.
  • Наконец, не забудьте выбрать Включить RealTime и Опубликовано, чтобы ваше приложение было доступно для всех.

Вот как будет выглядеть лаборатория с запущенным приложением. Теперь вы можете поделиться ссылкой на лабораторию с другими пользователями и попросить их присоединиться к каналу для отдельных компьютеров!

Подведение итогов

В этой статье мы взяли простое приложение для расшифровки слов и с помощью нескольких строк кода JavaScript сделали его многопользовательским для совместной работы в режиме реального времени. Практически любой веб-сайт можно сделать совместным с помощью простого API для совместной работы GatherAct. Если вы хотите узнать больше о GatherAct и о том, как использовать API, перейдите по этим ссылкам: